title: Create a Leaflet custom checkbox control
body: <p>I want to create a custom checkbox control which will simply set a flag in jquery/javascript: if checked the flag = 'clustered' or if unchecked flag = 'unclustered'. So far I have a control on the map but its not a checkbox and how do i get the state of the checkbox - if its checked/unchecked.</p>
  
  <p>code:</p>
  
  <pre><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);
  </code></pre>