Search code examples
angulartypescriptngx-leaflet

Remove or hide LayersControl

I want to remove or hide LayersControl because I change the layer of the map with an external menu. Is this possible? I have this code:

HTML

<div leaflet 
     [leafletOptions]="leafletOptions"
     [leafletBaseLayers]="baseLayers"
     (leafletMapReady)="onMapReady($event)">
</div>

TS

  leafletOptions: L.MapOptions = {
    zoom: 6,
    maxZoom: 19,
    zoomControl: false,
    center: L.latLng(40.4166395, -3.7046087)
  };

  baseLayers: { [layerName: string]: L.Layer } = {
    'OSM': this.mapService.baseMaps.OSM,
    'Catastro': this.mapService.baseMaps.Catastro
  };

How can I do so that the map does not show me the box that allows me to change the base layer? Thanks in advance.

EDIT : I can do it with CSS styles, but if there is a better way I prefer it

Solution

  • You can try :

    map.layerscontrol.removeFrom(map);

    I assume layerscontrol was initialized as follows:

    layerscontrol = L.control.layers(baseLayers).addTo(map);

    Doc: http://leafletjs.com/reference-1.3.0.html#layer-removefrom