Leaflet Layer Control – Moving the Layer-Control Menu

layersleaflet

This might be a silly question, but I could not find a documented way to achieve this.

I'd like to freely position the layer-control menu, probably to the top left near the default zoom-in/out button.

My layer control looks like this:

// Group layers as overlay pane
overlayPane = {
  "Endpoints" : endpointMarkerLayer,
  "Links" : linkLineLayer
};

// Add a layer control element to the map
layerControl = L.control.layers(null, overlayPane);
layerControl.addTo(map);

Where endpointMarkerLayer and linkLineLayer are layers containing markers and polylines respectively.

Is there an option to specify where the menu should appear?
Or alternatively, how can I get a reference to the DOM-objcet of the control-menu, such that I could assign it a custom class and override positioning in CSS?

Best Answer

According to the docs here, you can pass the position in as an option when creating the layer control.

Available positions are outlined here

overlayPane = {
  "Endpoints" : endpointMarkerLayer,
  "Links" : linkLineLayer,
};

// Add a layer control element to the map
layerControl = L.control.layers(null, overlayPane, {position: 'topleft'});
layerControl.addTo(map);
Related Question