filter geojson programmatically
<!DOCTYPE html>
<html>
<head>
<title>GeoJSON Example</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<style>
#wrapper {
margin: 0 auto;
width: 100%;
}
#panel{
float: left;
width: 100%;
height:50px;
background-color: #175B81;
color:white;
}
#map {
float: left;
width: 80%;
height:600px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="panel"><span class="p2"></span>
<select id="league" onchange="LeagueSelect()">
<option value="NL" >National</option>
<option value="AL" >American</option>
</select>
</div>
<div id="map"> </div>
</div>
<script>
var url = 'BaseBallFinal.json';
var map = L.map('map').setView([39.0, -98.26], 4);
var osm=new L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png',{
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'});
osm.addTo(map);
var myData = L.layerGroup([]);
var bbTeam = L.geoJSON(null, {
//onEachFeature: forEachFeature, //not used
pointToLayer: function(feature, latlng) {
return L.circleMarker(latlng, {
radius:6,
opacity: .5,
color:'green',
fillColor: 'green',
fillOpacity: 0.8
}).bindTooltip(feature.properties.Name);
}
});
// Get GeoJSON data and create features.
$.getJSON(url, function(data) {
bbTeam.addData(data);
});
myData.addLayer(bbTeam);
myData.addTo(map);
// Now working with filtered data...
function LeagueSelect() {
var choice = document.getElementById("league").value;
console.log(choice);
var theColor;
switch(choice) {
case 'NL':
theColor = 'blue'
break;
case 'AL':
theColor = 'red'
break;
default:
theColor = 'green'
}
myData.clearLayers();
map.removeLayer(myData);
bbTeam = L.geoJSON(null, {
//onEachFeature: forEachFeature, //not used
pointToLayer: function(feature, latlng) {
return L.circleMarker(latlng, {
radius:6,
opacity: .5,
color:theColor,
fillColor: theColor,
fillOpacity: 0.8
}).bindTooltip(feature.properties.Name);
},
filter: function(feature, layer) {
return (feature.properties.League == choice );
},
});
// Get GeoJSON data and create features.
$.getJSON(url, function(data) {
bbTeam.addData(data);
});
myData.addLayer(bbTeam);
myData.addTo(map);
}
</script>
</body>
</html>