Leaflet: Adding a Vector Layer with a Filter

Adding a vector layer with a dynamic filter

This example demonstrates how to add a GeoJSON layer to a Leaflet map and apply a filter to show only features that meet certain criteria.

Data from Kahramanmaraş Survey created by Elizabeth Carter and published on OpenContext add distributed with CC BY 4.0 International license.

import { MapLeaflet, VectorLayer } from "../../../modules/scms.js"

<MapLeaflet
  height="400px"
  baseLayers={["OSM"]}
>
  <VectorLayer
    name="Filtered Sites"
    source={{
      path2data: {
        path: "/data/ksa.geojson"
      }
    }}
    fitToContent={true}
    checked={true}
    filter={(feature) => feature.properties.Survey_Year === "1994"}
    popupTemplate="<p><strong>${Item_Label}</strong>. ${Site_Name} <br /> Survey years: ${Survey_Year}<br> Date: ${Early} — ${Late}</p>"
  />
</MapLeaflet>