> ## Documentation Index
> Fetch the complete documentation index at: https://docs.baato.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](https://maplibre.org/maplibre-gl-js/docs/).

```html theme={null}
<!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>
```
