MapLibre: Adding a vector layer from a local GeoJSON file

Adding a vector layer from a local GeoJSON with advanced search implementing drop-down select

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={["EsriSatellite", "CAWM"]}
>
  <VectorLayerLibre
    name="Sites"
    source={{
      path2data: {
        path: "/data/ksa.geojson"
      }
    }}
    checked={true}
    searchInFields={{
      "Item_Label": { label: "Label", values: ["KM 50", "KM 40", "KM 55"] },
      "Site_Name": "Site name",
      "Site_Description": "Site description"
    }}
    style={{
      id: "ksaSites",
      type: "circle",
      paint: {
        "circle-radius": 4,
        "circle-color": "#007cbf",
        "circle-stroke-width": 1.5,
        "circle-stroke-color": "#000000"
      },
    }}
    popupTemplate="<h4>${Site_Name}</h4><p>${Site_Description}</p><small>${Item_Label}</small>"
  />

</MapLibre>