bugfixes

- fix parkingdetails not showing if coordinates are not valid
- fix unique key warnings in ParkingViewServices

src/components/ParkingOnTheMap.tsx

@@ -76,10 +76,16 @@ function ParkingOnTheMap({ parking }) {
     if (stateMap) return;
 
     // Get coords from parking variable
-    const coords = parking.Coordinaten
+    let coords = parking.Coordinaten
       ? parking.Coordinaten.split(",").map((coord: any) => Number(coord))
       : null; // I.e.: 52.508011,5.473280;
 
+    if (coords[0] < -90 || coords[0] > 90 || coords[1] < -180 || coords[1] > 180) {
+      console.log("***** invalid coordinates for parking", parking.Title, coords);
+      coords = [52.508011, 5.47328];
+      return;
+    }
+
     // otherwise, create a map instance
     const mapboxMap = new maplibregl.Map({
       container: node,

src/components/parking/ParkingViewServices.tsx

@@ -8,35 +8,35 @@ import {
 } from "~/utils/parkings";
 
 const ParkingViewServices = ({ parkingdata }: { parkingdata: any }) => {
-  const [allServices, setAllServices ] = React.useState<ServiceType[]>([]); 
+  const [allServices, setAllServices] = React.useState<ServiceType[]>([]);
 
   // Set 'allServices' variable in local state
   React.useEffect(() => {
     (async () => {
       const result = await getAllServices();
       setAllServices(result);
     })();
-  },[])
+  }, [])
 
   const serviceIsActive = (ID: string): boolean => {
-    for(const x of parkingdata.fietsenstallingen_services) {
-      if(x.services.ID===ID) { 
+    for (const x of parkingdata.fietsenstallingen_services) {
+      if (x.services.ID === ID) {
         return true;
       }
     }
 
     return false;
   }
 
-  if(parkingdata.fietsenstallingen_services===null||parkingdata.fietsenstallingen_services===undefined) {
+  if (parkingdata.fietsenstallingen_services === null || parkingdata.fietsenstallingen_services === undefined) {
     return null
   }
 
   return <>
     <SectionBlock heading="Services">
-      <div className="flex-1">
+      <div className="flex-1" key={'services' + parkingdata.ID}>
         {allServices && allServices.map(service => {
-          if(! serviceIsActive(service.ID)) return <></>
+          if (!serviceIsActive(service.ID)) return null;
           return (
             <div key={service.ID}>
               {service.Name}