samedi 6 mai 2017

How to add event to filtered checkbox on mapbox

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