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

<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>

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