Leaflet Group Control

Question

Ich habe eine Broschüre Karte, die mehrere Schichten LayerGroup und LayerControl wie das Bild unten haben.

Ich frage mich, wie kann ich immer noch diese Schichten kontrollieren, aber die Steuerung bleibt nicht auf der Karte, aber außerhalb der Karte wie

Answer 1

Sie werden einfache Ereignis-Listener für die HTML erstellen müssen Elemente außerhalb der Karte, so dass sie die Leaflet-Ebenen im Inneren umschalten.

z.B. so etwas wie:

<label><input type='checkbox' id='bicycles-ctrl' value='1'>Bicycles</label> 

// Init the map and its layers as needed 
var map = L.map(...); 
var bicyclesLayer = L.geoJson(...); 


// Let's attach a DOM event handler, the Leaflet way: 
L.domEvent.on(

     // Whenever the 'bicycles-ctrl' DOM element... 
     document.getElementById('bicycles-ctrl')), 

     // ...dispatches a 'change' event... 
     'change', 

     // ...run this function 
     function(ev) { 
      // The 'target' property of the DOM event points to the instance 
      // of HTMLInputElement which dispatched the event 
      var input = ev.target; 

      // The 'value' property will be empty (falsy) if the checkbox is unchecked, 
      // or will have the contents of the 'value' HTML attribute (truthy) 
      // otherwise. 
      if (input.value) { 
       // If the checkbox is checked, display the leaflet layer 
       bicyclesLayer.addTo(map); 
      } else { 
       // If not, hide the leaflet layer 
       bicyclesLayer.remove(); 
      } 
     } 
); 

Die spezifischen Event-Handler auf Ihrem HTML-Markup abhängen und das Verhalten, das Sie erreichen wollen.