Faltblatt: Wie verschiebe ich das Ebenensteuerungsmenü?

11

Dies mag eine dumme Frage sein, aber ich konnte keinen dokumentierten Weg finden, um dies zu erreichen.

Ich möchte das Ebenensteuerungsmenü frei positionieren, wahrscheinlich oben links neben der Standardschaltfläche zum Vergrößern / Verkleinern.

Meine Ebenensteuerung sieht folgendermaßen aus:

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

Wo endpointMarkerLayerund linkLineLayersind Schichten, die Marker bzw. Polylinien enthalten.

Gibt es eine Option, um anzugeben, wo das Menü angezeigt werden soll? Oder wie kann ich alternativ einen Verweis auf das DOM-Objekt des Steuermenüs erhalten, sodass ich ihm eine benutzerdefinierte Klasse zuweisen und die Positionierung in CSS überschreiben kann?

Fgysin setzt Monica wieder ein
quelle

Antworten:

14

Gemäß den hier beschriebenen Dokumenten können Sie die Position beim Erstellen des Ebenensteuerelements als Option übergeben.

Die verfügbaren Positionen sind hier aufgeführt

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
quelle
Wow, wie habe ich das vermisst? Ich
fühle mich
Ich fühle mich hier genauso ...
Stender
5

Kelsos Antwort ist richtig. Die Dokumentation (und API) ist jedoch etwas verwirrend. Um beispielsweise ein benutzerdefiniertes Infobox basierend auf diesem Beispiel zu erstellen: http://leafletjs.com/examples/choropleth.html können Sie Folgendes tun:

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

Die Optionen werden für das Steuerobjekt festgelegt. Man könnte also denken, dass Sie dies tun können, um ein Overlay-Steuerelement zu positionieren:

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

Der richtige Weg, dies zu tun, wie oben angegeben, ist:

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