Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Leaflet.js Tips, Step 4 (filter geojson markers)
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/v1.6.4/mapbox.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css">
#map {
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script type="text/javascript">
var mapboxTiles = L.tileLayer('https://{s}.tiles.mapbox.com/v3/examples.map-i87786ca/{z}/{x}/{y}.png', {
attribution: '<a href="http://www.mapbox.com/about/maps/" target="_blank">Terms &amp; Feedback</a>'
});
var map = L.map('map')
.addLayer(mapboxTiles)
.setView([42.444508, -76.499491], 12);
var promise = $.getJSON("businesses.json");
promise.then(function(data) {
var allbusinesses = L.geoJson(data);
// THIS IS NEW
var cafes = L.geoJson(data, {
filter: function(feature, layer) {
return feature.properties.BusType == "Cafe";
}
});
var others = L.geoJson(data, {
filter: function(feature, layer) {
return feature.properties.BusType != "Cafe";
}
});
map.fitBounds(allbusinesses.getBounds(), {
padding: [50, 50]
});
// THIS IS NEW
cafes.addTo(map)
others.addTo(map)
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.