Create a custom Flyers checkbox

Question

I want to create a custom checkbox control that simply sets a flag in jquery / javascript: if flag = 'clustered' is checked or if unchecked flag = 'unclustered'. So far I have a control on the map, but this is not a checkbox and how can I get the status of the checkbox - if it is checked or not checked.

the code:

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

You need to create a form element with input type = "checkbox" in your 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); 

Works in this jsfiddle http://jsfiddle.net/FranceImage/ao33674e/

You can also do this in the Leaflet to read this for tips: https://github.com/Leaflet/Leaflet/blob/master/src/control/Control.Layers.js