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