dimanche 26 novembre 2017

js leaflet checkbox show/hide markers

i'm making an interactive map using leaflet, and json to pick up data from the database. The map show sport centers, and i made a checkbox to filter them by their category. Basically i want that when you flag a category, all markers that don't belong to that category are hidden. I leave my complete js file, i hop that someone can helm pe, i'm a little newbie. Thanx

$(function(){

var mymap = L.map('mapid').setView([41.8919300, 12.5113300], 13);
var popup = L.popup();

L.tileLayer('http://ift.tt/1u1XPt9', { attribution: 'Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox', maxZoom: 18, id: 'mapbox.streets', accessToken: 'your.mapbox.access.token' }).addTo(mymap);

$.getJSON(
    "http://ift.tt/2Bg8WZ7",
    function(data) {

        var attivitas = {},
            markers = [];

        data.result.records.forEach(function(record) {

            var lat = record.lat
            var lon = record.lon


            if(lat&&lon){

                record["ATTIVITA"].split(",").forEach(function(attivita) {
                    attivitas[attivita] = (attivitas[attivita] || 0) + 1;
                });

                markers.push({
                    attivita: record["ATTIVITA"],
                    marker: L.marker([lat,lon])
                        .bindTooltip(
                            "<p>" + record["DENOMINAZIONE IMPIANTO SPORTIVO"] + "</p>" +
                            "<p>" + record["ATTIVITA"] + "</p>"
                        )
                        .addTo(mymap)
                });
            }




        });

        console.log(attivitas, d3.entries(attivitas));

        var divs = d3.select("#attivitas").selectAll("div")
            .data(d3.entries(attivitas).sort(function(a,b) { return a.value - b.value; }).reverse())
            .enter()
            .append("div");

        divs.append("input")
            .attr("type","radio")
            .attr("class","attivita")
            .attr("name", "attivita")
            .on("click", function(d) {
                console.log(d, markers);
            });

        divs.append("label")
            .attr("for", function(d){
                return d.key.toLowerCase();
            })
            .text(function(d){
                return d.key + " ("+d.value+")";
            });


    }
);

}); //




Aucun commentaire:

Enregistrer un commentaire