Leaflet: Adding a vector layer from a local GeoJSON file, and styling it on the base of the attributes

Adding a vector layer from a local GeoJSON file, and styling it on the base of the attributes

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="Sites"
    source={{
      path2data: {
        path: "/data/ksa.geojson"
      }
    }}
    fitToContent={true}
    checked={true}
    popupTemplate="<p><strong>${Item_Label}</strong>. ${Site_Name} <br /> Date: ${Early} — ${Late}</p>"
    pointToLayer={
      (f, ll) => {
        return L.circleMarker(ll, {
          radius: 4,
          fillColor: !Object.hasOwn(f.properties, "Late") ? '#ebebeb' : (f.properties["Late"] < 0 ? "#FE04FC" : '#1B64F7'),
          color: "#000",
          weight: 1,
          opacity: 1,
          fillOpacity: 0.8
        });
      }}
  />
</MapLeaflet>