'How to Filter markers on Mapbox based on geojson information?
So, I want to try to create a nav/filter based on mapbox, which will filter pubs based on their type, either Independent or a Pub Chain. I added the pub type in the geojson, but how do I create a filter based on the information in the geojson?
I tried creating a filter based on this link https://docs.mapbox.com/mapbox-gl-js/example/filter-markers/ but it's more based on icons...
let filters = document.getElementById("filters");
let map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/jlsr10/ck029molz05p11cock35wlyy9',
center: [-0.133677, 51.526631],
zoom: 12
});
let geojson = {
"id": "places",
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"name": "The World's End",
"PubType": "Independent",
"times": "Monday-Thursday: 11.00-0.00" + "<br>" + "Friday-Saturday: 11.00-1.00" + "<br>" + "Sunday: 12.00-23.00"
},
"geometry": {
"type": "Point",
"coordinates": [
-0.14222681522369385,
51.53918203198429
]
}
},
{
"type": "Feature",
"properties": {
"name": "The Black Heart",
"PubType": "Independent",
"times": "Monday-Tuesday: 15.00-23.00" + "<br>" + "Wednesday-Thursday: 15.00-1.00" + "<br>" + "Friday-Saturday: 12.00-2.00" + "<br>" + "Sunday: 12.00-23.00"
},
"geometry": {
"type": "Point",
"coordinates": [
-0.141786,
51.539003
]
}
}
,{
"type": "Feature",
"properties": {
"name": "The Devonshire Arms",
"PubType": "Independent",
"times": "Monday-Wednesday: 14.00-0.00" + "<br>" + "Thursday: 14.00-1.00" + "<br>" + "Friday-Saturday: 14.00-2.00" + "<br>" + "Sunday: 14.00-0.00"
},
"geometry": {
"type": "Point",
"coordinates": [
-0.14223217964172363,
51.54096705495758
]
}
},
{
"type": "Feature",
"properties": {
"name": "The Unicorn",
"PubType": "Independent",
"times": "Monday-Thursday: 12.00-23.00" + "<br>" + "Friday-Saturday: 12.00-0.00" + "<br>" + "Sunday: 12.00-23.00"
},
"geometry": {
"type": "Point",
"coordinates": [
-0.12938976287841797,
51.54885034693916
]
}
},
{
"type": "Feature",
"properties": {
"name": "Garlic and Shots",
"PubType": "Independent",
"times": "Monday-Thursday: 17.00-0.00" + "<br>" + "Friday-Saturday: 16.00-1.00" + "<br>" + "Sunday: 17.00-23.30"
},
"geometry": {
"type": "Point",
"coordinates": [
-0.13152748346328735,
51.51379710359405
]
}
},
{
"type": "Feature",
"properties": {
"name": "Crobar",
"PubType": "Independent",
"times": "Monday-Saturday: 16.00-3.00" + "<br>" + "Sunday: Closed"
},
"geometry": {
"type": "Point",
"coordinates": [
-0.1302802562713623,
51.51482699380818
]
}
},
{
"type": "Feature",
"properties": {
"name": "Slim Jim's Liquor Store",
"PubType": "Independent",
"times": "Monday-Wednesday: 17.00-2.00" + "<br>" + "Thursday: 14.00-1.00" + "<br>" + "Friday-Saturday: 14.00-2.00" + "<br>" + "Sunday: 14.00-0.00"
},
"geometry": {
"type": "Point",
"coordinates": [
-0.10267496109008789,
51.53812099449894
]
}
},
{
"type": "Feature",
"properties": {
"name": "Aces and Eights Saloon Bar",
"PubType": "Independent",
"times": "Monday-Thursday: 16.00-1.00" + "<br>" + "Friday-Saturday: 16.00-2.30" + "<br>" + "Sunday: 16.00-1.00"
},
"geometry": {
"type": "Point",
"coordinates": [
-0.1383929,
51.556696
]
}
},
{
"type": "Feature",
"properties": {
"name": "Ace Cafe",
"PubType": "Independent",
"times": "Monday-Thursday: 7.00-22.30" + "<br>" + "Friday-Saturday: 7.00-11.00" + "<br>" + "Sunday: 7.00-10.30"
},
"geometry": {
"type": "Point",
"coordinates": [
-0.277751, 51.541419
]
}
},
{
"type": "Feature",
"properties": {
"name": "Brewdog",
"PubType": "Pub Chain",
"times": "Monday-Thursday: 12.00-23.30" + "<br>" + "Friday-Saturday: 12.00-0.00" + "<br>" + "Sunday: 12.00-10.30"
},
"geometry": {
"type": "Point",
"coordinates": [
-0.140905, 51.538394
]
}
},
{
"type": "Feature",
"properties": {
"name": "The Draft House",
"PubType": "Pub Chain",
"times": "Monday-Wednesday: 12.00-23.00" + "<br>" + "Thursday: 12.00-0.00" + "<br>" + "Friday-Saturday: 12.00-1.00" + "<br>" + "Sunday: 12.00-10.30"
},
"geometry": {
"type": "Point",
"coordinates": [
-0.138385, 51.541540
]
}
},
{
"type": "Feature",
"properties": {
"name": "The Draft House",
"PubType": "Pub Chain",
"times": "Monday-Thursday: 12.00-23.00" + "<br>" + "Friday-Saturday: 12.00-0.00" + "<br>" + "Sunday: Closed"
},
"geometry": {
"type": "Point",
"coordinates": [
-0.135732, 51.519278
]
}
}
]
};
// add markers to map
geojson.features.forEach(function(marker) {
// create a DOM element for the marker
let el = document.createElement('div');
el.className = 'marker';
// add marker to map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup({offset: 25})
.setHTML('<h3>' + marker.properties.name + '</h3>' + '<h4>Opening Times</h4>' +'<p>'+ marker.properties.times +'</p>'))
.addTo(map);
});```
I would like the filter to filter Independent pubs, and pub chain pubs for the user.
Solution 1:[1]
Instead of adding markers, then removing and re-adding markers on filter change, consider adding a layer and updating it's source.
Add a geojson layer:
map.addLayer({
id: "places",
type: "symbol",
source: {
type: "geojson",
data: geojson
},
layout: {
"icon-image": "bar-15",
"icon-size": 1.25,
"icon-allow-overlap": true,
}
});
And then filter and update source:
const filterElem = document.getElementById('pubTypeFilter');
filterElem.onchange = () => {
const pubType = filterElem.value;
if (pubType) {
const newGeoJSON = {...geojson };
newGeoJSON.features = geojson.features.filter(feature => feature.properties.PubType === pubType);
map.getSource('places').setData(newGeoJSON);
}
};
Here's a codepen that does that: https://codepen.io/manishraj/full/BaBrJwr
Solution 2:[2]
You can use map.setFilter
map.setFilter('places', ['==', 'PubType', 'Independent']);
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Manish |
| Solution 2 | ???? |