Opuscolo: come spostare il menu di controllo del livello?

Questa potrebbe essere una domanda sciocca, ma non sono riuscito a trovare un modo documentato per raggiungere questo obiettivo.

Vorrei posizionare liberamente il menu di controllo del livello, probabilmente in alto a sinistra vicino al pulsante di ingrandimento / riduzione predefinito.

Il mio controllo del livello è simile al seguente:

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

Dove endpointMarkerLayere linkLineLayersono strati contenenti rispettivamente marcatori e polilinee.

C'è un'opzione per specificare dove dovrebbe apparire il menu? O in alternativa, come posso ottenere un riferimento all'oggetto DOM del menu di controllo, in modo da potergli assegnare una classe personalizzata e sovrascrivere il posizionamento nei CSS?

In base ai documenti qui , è possibile passare la posizione come opzione durante la creazione del controllo layer.

Le posizioni disponibili sono indicate qui

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 risposta di Kelso è corretta. Tuttavia, la documentazione (e l'API) è un po 'confusa. Ad esempio, per creare una finestra informativa personalizzata, in base a questo esempio: http://leafletjs.com/examples/choropleth.html è possibile eseguire questa operazione:

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

Le opzioni sono impostate sull'oggetto di controllo. Quindi si potrebbe pensare di poterlo fare per posizionare un controllo overlay:

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

Il modo corretto per farlo, come indicato sopra, è:

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