Dépliant: Comment déplacer le menu de contrôle des calques?

Cela peut être une question stupide, mais je n'ai pas pu trouver de moyen documenté pour y parvenir.

Je voudrais positionner librement le menu de contrôle des calques, probablement en haut à gauche près du bouton de zoom avant / arrière par défaut.

Mon contrôle de calque ressemble à ceci:

// 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);

Où endpointMarkerLayeret où se linkLineLayertrouvent les couches contenant des marqueurs et des polylignes respectivement.

Existe-t-il une option pour spécifier où le menu doit apparaître? Ou bien, comment puis-je obtenir une référence à DOM-objcet du menu de contrôle, de sorte que je puisse lui affecter une classe personnalisée et remplacer le positionnement en CSS?

Selon les documents ici , vous pouvez passer la position en option lors de la création du contrôle de calque.

Les postes disponibles sont décrits ici

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

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

La réponse de Kelso est correcte. Cependant, la documentation (et l'API) est un peu déroutante. Par exemple, pour créer une boîte d'informations personnalisée, basée sur cet exemple: http://leafletjs.com/examples/choropleth.html, vous pouvez le faire:

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);

Les options sont définies sur l'objet de contrôle. On peut donc penser que vous pouvez le faire pour positionner un contrôle de superposition:

// incorrect
var layerControl = L.control({position:'topleft'}).layers(null, mapOverlays).addTo(map);

La façon correcte de le faire, comme indiqué ci-dessus, est:

// correct
var layerControl = L.control.layers(null, mapOverlays, {position:'topleft'}).addTo(map);