Crea un controllo casella di controllo personalizzato Leaflet

Question

Voglio creare un controllo casella di controllo personalizzato che semplicemente imposterà un flag in jquery/javascript: se selezionato flag = 'clustered' o se non selezionato flag = 'unclustered'. Finora ho un controllo sulla mappa ma non è una casella di controllo e come ottengo lo stato della casella di controllo - se è selezionata/deselezionata.

codice:

function MapShowCommand() { 
    alert("checked/unchecked"); //set flag 
} 

L.Control.Command = L.Control.extend({ 
    options: { 
     position: 'topleft', 
    }, 

    onAdd: function (map) { 
     var controlDiv = L.DomUtil.create('div', 'leaflet-control-command'); 
     L.DomEvent 
      .addListener(controlDiv, 'click', L.DomEvent.stopPropagation) 
      .addListener(controlDiv, 'click', L.DomEvent.preventDefault) 
     .addListener(controlDiv, 'click', function() { MapShowCommand(); }); 

     var controlUI = L.DomUtil.create('div', 'leaflet-control-command-interior', controlDiv); 
     controlUI.title = 'Map Commands'; 
     return controlDiv; 
      } 
    }); 
var test = new L.Control.Command(); 
map.addControl(test); 

Answer 1

È necessario creare un elemento di modulo con un input type = "checkbox" nel vostro controlDiv.

// create the control 
var command = L.control({position: 'topright'}); 

command.onAdd = function (map) { 
    var div = L.DomUtil.create('div', 'command'); 

    div.innerHTML = '<form><input id="command" type="checkbox"/>command</form>'; 
    return div; 
}; 

command.addTo(map); 


// add the event handler 
function handleCommand() { 
    alert("Clicked, checked = " + this.checked); 
} 

document.getElementById ("command").addEventListener ("click", handleCommand, false); 

Lavori in questo jsfiddle http://jsfiddle.net/FranceImage/ao33674e/

Si può anche farlo nel modo Volantino lettura di questo per i suggerimenti: https://github.com/Leaflet/Leaflet/blob/master/src/control/Control.Layers.js