Question

134

Create a Leaflet custom checkbox control

rated 0 times [ 141] [ 7] / answers: 1 / hits: 23002 / 10 Years ago, wed, september 10, 2014, 12:00:00

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.

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

brennonr

Add To Favorites

Follow

Total Points: 124

Total Questions: 101

Total Answers: 101

Location: Estonia

Member since Wed, Jun 8, 2022

2 Years ago

answered 10 Years ago mckenna · Accepted Answer

You have to create a form element with an 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 it the Leaflet way reading this for hints: https://github.com/Leaflet/Leaflet/blob/master/src/control/Control.Layers.js