Folleto: Cómo mover la capa de control de menú?

Question

Esta podría ser una pregunta tonta, pero no podía encontrar la manera documentada para lograr esto.

Me gustaría libremente la posición de la capa de control de menú, probablemente en la parte superior izquierda cerca del zoom predeterminado-botón de entrada/salida.

Mi capa de control se parece a esto:

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

Donde endpointMarkerLayer y linkLineLayer son las capas que contienen los marcadores y polilíneas respectivamente.

Hay una opción para especificar donde el menú debería aparecer? O, alternativamente, ¿cómo puedo obtener una referencia a la DOM-objcet del menú de control, de tal manera que yo podía asignar una clase personalizada y anular el posicionamiento en CSS?

Answer 1

De acuerdo a la documentación aquí, usted puede pasar a la posición en una opción a la hora de crear la capa de control.

Posiciones disponibles se describen aquí

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

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

Answer 2

Kelso la respuesta es correcta. Sin embargo, la documentación (y API) es un poco confuso. Por ejemplo, para crear una costumbre cuadro de información, basándose en este ejemplo: http://leafletjs.com/examples/choropleth.html usted puede hacer esto:

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

Las opciones se establecen en el objeto de control. De manera que uno puede pensar que usted puede hacer esto a la posición de superposición de control:

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

La manera correcta de hacerlo, como se indicó anteriormente, es:

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