I am wondering how I can add an event to checkbox in this case see the code down, I mean how I can make an event when I click one checkbox for example to show some information of the clicked checkbox in outside box. anybody have any idea!!
// Adding the map
L.mapbox.accessToken = 'XXXXXX';
var map = new L.Map('map')
.setView([39.767151, 34.872309], 14);
L.mapbox.styleLayer('mapbox://styles/mapbox/light-v9').addTo(map);
map.scrollWheelZoom.disable();
map.touchZoom.disable();
// map.doubleClickZoom.disable();
// map.boxZoom.disable();
// map.dragging.disable();
// map.options.maxZoom = 7;
// map.options.minZoom = 7;
// Add popup to marker : Click
var kovanLayer = L.mapbox.featureLayer(kovan)
.on('click', function (e) {
e.layer.bindPopup('<label>Location : </label><h1>' + e.layer.feature.properties.located + '</h1>' + '<br>',
{
maxWidth: 150,
minWidth: 150
});
}
)
.addTo(map);
kovanLayer.setGeoJSON(kovan);
// Find and store a variable reference to the list of filters.
var filters = document.getElementById('filters');
// Wait until the marker layer is loaded in order to build a list of possible
// types. If you are doing this with another featureLayer, you should change
// map.featureLayer to the variable you have assigned to your featureLayer.
var makeCheckboxes = function () {
// Collect the types of symbols in this layer. you can also just
// hardcode an array of types if you know what you want to filter on,
// like var types = ['foo', 'bar'];
var typesObj = {}, types = [];
kovanLayer.eachLayer(function (entity) {
typesObj[entity.feature.properties['Forces']] = false;
})
for (var k in typesObj) types.push(k);
var checkboxes = [];
// Create a filter interface.
for (var i = 0; i < types.length; i++) {
// Create an an input checkbox and label inside.
var item = filters.appendChild(document.createElement('div'));
var checkbox1 = item.appendChild(document.createElement('input'));
var label = item.appendChild(document.createElement('label'));
checkbox1.type = 'radio';
checkbox1.id = types[i];
checkbox1.name = 'optradio';
checkbox1.checked = false;
// create a label to the right of the checkbox with explanatory text
label.innerHTML = types[i] ;
label.setAttribute('for', types[i]);
// Whenever a person clicks on this checkbox, call the update().
checkbox1.addEventListener('change', update);
checkboxes.push(checkbox1);
}
// This function is called whenever someone clicks on a checkbox and changes
// the selection of markers to be displayed.
function update() {
var enabled = {};
// Run through each checkbox and record whether it is checked. If it is,
// add it to the object of types to display, otherwise do not.
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].checked) enabled[checkboxes[i].id] = true;
}
kovanLayer.setFilter(function (feature) {
// If this symbol is in the list, return true. if not, return false.
// The 'in' operator in javascript does exactly that: given a string
// or number, it says if that is in a object.
// 2 in { 2: true } // true
// 2 in { } // false
return (feature.properties['Forces'] in enabled);
});
}
}
makeCheckboxes()
<nav id='filters' class='filters'></nav><br>
strong text
Aucun commentaire:
Enregistrer un commentaire