Maplibre: Adding a vector layer from a Directus API with filter

Adding a vector layer from a Directus API with filter

Only Hellenistic and Roman sites are being displayed

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

import {
  MapLibre,
  VectorLayerLibre,
} from "../../../modules/scms.js"

<MapLibre
    center="37.00416,37.48551,9"
    baseLayers={["CAWM", "EsriSatellite"]}
  >

  <VectorLayerLibre
    name="Hellenistic and Roman Sites"
    source={{
      directus: {
        table: "scms_ksa",
        geoField: "geometry",
        queryString: "filter[Hellenistic_Roman][_eq]=true"
      }
    }}
    checked={true}
    fitToContent={true}
    type="geojson"
    searchInFields={{
      "Item_Label": "Label",
      "Site_Name": "Site name",
      "Site_Description": "Site description"
    }}
    style={{
      id: "ksa-directus",
      type: "circle",
      paint: {
        "circle-radius": 4,
        "circle-color": "#ff0000",
        "circle-stroke-width": 1.5,
        "circle-stroke-color": "#000000"
      },
    }}
    popupTemplate="<h4>${Site_Name}</h4>
        <p>${Site_Description}</p>
        <small>${Item_Label}</small>"
  />
</MapLibre>