<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Filter markers</title>
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<link
href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css"
rel="stylesheet"
/>
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#menu {
position: absolute;
background: #fff;
padding: 10px;
z-index: 1;
top: 10px;
left: 10px;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div id="menu">
<select id="category-select">
<option value="all">All</option>
<option value="A">Data Category A</option>
<option value="B">Data Category B</option>
<!-- Add more options as needed -->
</select>
</div>
<div id="map"></div>
<script>
// Initialize the map
let map = new maplibregl.Map({
container: "map",
style:
"https://api.baato.io/api/v1/styles/breeze?key=YOUR_BAATO_ACCESS_TOKEN", // use Baato style with your access token
center: [85.32966478286596, 27.767117959855653],
zoom: 12, // starting zoom
});
// GeoJSON data- This can be obtained from API calls or local JSON. Use simple data for now
let geojsonData = {
type: "FeatureCollection",
features: [
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [85.3248900418061, 27.775218979296984],
},
properties: {
title: "Marker 1",
category: "A",
},
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [85.33355708368313, 27.770581579637934],
},
properties: {
title: "Marker 2",
category: "A",
},
},
{
type: "Feature",
geometry: {
type: "Point",
coordinates: [85.32729817095844, 27.770407943085207],
},
properties: {
title: "Marker 3",
category: "B",
},
},
],
};
let markers = [];
// Function to create markers
function createMarkers(data) {
data.features.forEach(function (feature) {
let el = document.createElement("div");
el.className = "marker";
let marker = new maplibregl.Marker(el)
.setLngLat(feature.geometry.coordinates)
.setPopup(
new maplibregl.Popup({ offset: 25 }).setText(
feature.properties.title
)
)
.addTo(map);
marker.category = feature.properties.category;
markers.push(marker);
});
}
// Function to remove all markers
function removeMarkers() {
markers.forEach(function (marker) {
marker.remove();
});
markers = [];
}
// Function to update the filter
function updateFilter() {
const selectedCategory =
document.getElementById("category-select").value;
// Filter data based on data category
const filteredData = {
type: "FeatureCollection",
features: geojsonData.features.filter(function (feature) {
return (
selectedCategory === "all" ||
feature.properties.category === selectedCategory
);
}),
};
removeMarkers();
createMarkers(filteredData);
}
// Load the map and create markers
map.on("load", function () {
createMarkers(geojsonData);
// Update the filter when the dropdown changes
document
.getElementById("category-select")
.addEventListener("change", updateFilter);
});
</script>
</body>
</html>
Web
Filter markers
Filter map markers by category in the browser.
This example shows you a simple approach to filter markers based on data category. Note that this is a very basic implementation and may not suit for complex components. For more examples or details, please refer to Maplibre docs.