Leaflet: How to move the layer-control menu?
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);
Kelso's answer is correct. However, the documentation (and API) is a bit confusing. For example, to create a custom info box, based on this example: http://leafletjs.com/examples/choropleth.html you can do this:
var mapInfo = L.control({position:'topleft'});
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
this.update();
return this._div;
};
// method that we will use to update the control based on feature properties passed
info.update = function (props) {
this._div.innerHTML = '<h4>US Population Density</h4>' + (props ?
'<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
: 'Hover over a state');
};
info.addTo(map);
The options are set on the control object. So one may think you can do this to position an overlay control:
// incorrect
var layerControl = L.control({position:'topleft'}).layers(null, mapOverlays).addTo(map);
The correct way to do this, as stated above, is:
// correct
var layerControl = L.control.layers(null, mapOverlays, {position:'topleft'}).addTo(map);