Folleto: ¿Cómo mover el menú de control de capas?

11

Esta podría ser una pregunta tonta, pero no pude encontrar una forma documentada de lograrlo.

Me gustaría colocar libremente el menú de control de capas, probablemente en la parte superior izquierda cerca del botón predeterminado de acercar / alejar.

Mi control de capa se ve así:

// 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 endpointMarkerLayery linkLineLayerson capas que contienen marcadores y polilíneas respectivamente.

¿Hay una opción para especificar dónde debe aparecer el menú? O, alternativamente, ¿cómo puedo obtener una referencia al objcet DOM del menú de control, de modo que pueda asignarle una clase personalizada y anular el posicionamiento en CSS?

fgysin reinstalar a Monica
fuente

Respuestas:

14

De acuerdo con los documentos aquí , puede pasar la posición como una opción al crear el control de capa.

Las posiciones disponibles se detallan 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);
Kelso
fuente
Wow, cómo extrañé eso. Sintiéndose estúpido. ^^
fgysin reinstala a Monica el
Feeking de la misma manera aquí ...
Stender
5

La respuesta de Kelso es correcta. Sin embargo, la documentación (y API) es un poco confusa. Por ejemplo, para crear un cuadro de información personalizado, basado en este ejemplo: http://leafletjs.com/examples/choropleth.html 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. Entonces, uno puede pensar que puede hacer esto para colocar un control de superposición:

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

La forma correcta de hacer esto, como se indicó anteriormente, es:

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