fix: only display marker when coords exist (#1074)

components/map/check-lat-lng.ts

@@ -0,0 +1,27 @@
+import { LngLatLike } from 'maplibre-gl';
+
+export function checkLatLng(
+  latitude: string,
+  longitude: string
+): LngLatLike | null {
+  try {
+    const lat = parseFloat(latitude);
+    const lng = parseFloat(longitude);
+    if (
+      isNaN(lat) ||
+      isNaN(lng) ||
+      lat < -90 ||
+      lat > 90 ||
+      lng < -180 ||
+      lng > 180
+    ) {
+      throw new Error('Invalid coords');
+    }
+
+    return {
+      lat,
+      lng,
+    };
+  } catch {}
+  return null;
+}

components/map/map-etablissement.tsx

@@ -4,34 +4,12 @@
 import constants from '#models/constants';
 import { IEtablissement } from '#models/core/types';
 import { formatSiret } from '#utils/helpers';
-import maplibregl, { LngLatLike, Map } from 'maplibre-gl';
+import maplibregl, { Map } from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { useEffect, useRef } from 'react';
+import { checkLatLng } from './check-lat-lng';
 import './map.css';
 
-function checkLatLng(latitude: string, longitude: string): LngLatLike | null {
-  try {
-    const lat = parseFloat(latitude);
-    const lng = parseFloat(longitude);
-    if (
-      isNaN(lat) ||
-      isNaN(lng) ||
-      lat < -90 ||
-      lat > 90 ||
-      lng < -180 ||
-      lng > 180
-    ) {
-      throw new Error('Invalid coords');
-    }
-
-    return {
-      lat,
-      lng,
-    };
-  } catch {}
-  return null;
-}
-
 export function MapEtablissement({
   etablissement,
 }: {

components/map/map-results.tsx

@@ -7,6 +7,7 @@ import { formatIntFr, formatSiret } from '#utils/helpers';
 import maplibregl, { Map } from 'maplibre-gl';
 import 'maplibre-gl/dist/maplibre-gl.css';
 import { useEffect, useRef } from 'react';
+import { checkLatLng } from './check-lat-lng';
 import './map.css';
 
 export default function MapWithResults({
@@ -35,42 +36,52 @@ export default function MapWithResults({
     });
 
     results.results.forEach((result) => {
-      var popup = new maplibregl.Popup({ offset: 25 }).setHTML(
-        `<div><strong><a href="/entreprise/${result.chemin}">${formatIntFr(
-          result.siren
-        )}</a></strong><br/>${result.nomComplet}<br/>📍${
-          result.siege.adresse
-        }</div>`
+      const coordsSiege = checkLatLng(
+        result.siege.latitude,
+        result.siege.longitude
       );
 
-      new maplibregl.Marker({ color: constants.colors.frBlue })
-        //@ts-ignore
-        .setLngLat([result.siege.longitude, result.siege.latitude])
-        .setPopup(popup)
-        //@ts-ignore
-        .addTo(map.current);
+      if (coordsSiege) {
+        const popup = new maplibregl.Popup({ offset: 25 }).setHTML(
+          `<div><strong><a href="/entreprise/${result.chemin}">${formatIntFr(
+            result.siren
+          )}</a></strong><br/>${result.nomComplet}<br/>📍${
+            result.siege.adresse
+          }</div>`
+        );
+
+        new maplibregl.Marker({ color: constants.colors.frBlue })
+          //@ts-ignore
+          .setLngLat([result.siege.longitude, result.siege.latitude])
+          .setPopup(popup)
+          //@ts-ignore
+          .addTo(map.current);
+      }
 
       result.matchingEtablissements.forEach((match) => {
         if (match.estSiege) {
           return null;
         }
 
-        var popup = new maplibregl.Popup({ offset: 25 }).setHTML(
-          `<div><strong><a href="/etablissement/${match.siret}">${formatSiret(
-            match.siret
-          )}</a></strong><br/>Etablissement secondaire de <a href="/entreprise/${
-            match.siren
-          }">${result.nomComplet}</a><br/>📍${match.adresse}</div>`
-        );
+        const coordsEtab = checkLatLng(match.latitude, match.longitude);
+        if (coordsEtab) {
+          var popup = new maplibregl.Popup({ offset: 25 }).setHTML(
+            `<div><strong><a href="/etablissement/${match.siret}">${formatSiret(
+              match.siret
+            )}</a></strong><br/>Etablissement secondaire de <a href="/entreprise/${
+              match.siren
+            }">${result.nomComplet}</a><br/>📍${match.adresse}</div>`
+          );
 
-        new maplibregl.Marker({
-          color: shouldColorZipCode ? 'yellow' : constants.colors.pastelBlue,
-        })
-          //@ts-ignore
-          .setLngLat([match.longitude, match.latitude])
-          .setPopup(popup)
-          //@ts-ignore
-          .addTo(map.current);
+          new maplibregl.Marker({
+            color: shouldColorZipCode ? 'yellow' : constants.colors.pastelBlue,
+          })
+            //@ts-ignore
+            .setLngLat([match.longitude, match.latitude])
+            .setPopup(popup)
+            //@ts-ignore
+            .addTo(map.current);
+        }
       });
     });
   }, [results, shouldColorZipCode]);