Leaflet: Bagaimana cara memindahkan menu kontrol layer?

11

Ini mungkin pertanyaan konyol, tetapi saya tidak dapat menemukan cara yang terdokumentasi untuk mencapai ini.

Saya ingin secara bebas memposisikan menu kontrol lapisan, mungkin ke kiri atas dekat tombol zoom-in / out default.

Kontrol layer saya terlihat seperti ini:

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

Dimana endpointMarkerLayerdan linkLineLayermasing - masing layer mengandung marker dan polyline.

Apakah ada opsi untuk menentukan di mana menu akan muncul? Atau sebagai alternatif, bagaimana saya bisa mendapatkan referensi ke DOM-objcet dari menu kontrol, sehingga saya bisa menetapkannya sebagai kelas khusus dan mengabaikan pemosisian di CSS?

fgysin mengembalikan Monica
sumber

Jawaban:

14

Menurut dokumen di sini , Anda dapat meneruskan posisi sebagai opsi saat membuat kontrol lapisan.

Posisi yang tersedia diuraikan di sini

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
sumber
Wow, bagaimana saya bisa melewatkan itu. Merasa bodoh. ^^
fgysin mengembalikan Monica
Mengintip dengan cara yang sama di sini ...
Stender
5

Jawaban Kelso benar. Namun, dokumentasi (dan API) agak membingungkan. Misalnya, untuk membuat kotak info khusus, berdasarkan contoh ini: http://leafletjs.com/examples/choropleth.html Anda dapat melakukan ini:

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

Opsi diatur pada objek kontrol. Jadi orang mungkin berpikir Anda bisa melakukan ini untuk memposisikan kontrol overlay:

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

Cara yang benar untuk melakukan ini, sebagaimana dinyatakan di atas, adalah:

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