fix: refactor marker validation logic and improve marker rendering in MarkerMap

Author: graffkevin

package.json

@@ -16,7 +16,7 @@
     }
   },
   "scripts": {
-    "example": "bunx vite",
+    "example": "vite --config vite.config.example.ts",
     "build": "bunx tsc && bunx vite build",
     "lint": "bunx biome check --diagnostic-level=error . && bunx tsc --noEmit --incremental",
     "lint:fix": "bunx biome check . --write",

src/Features/Bounds/FitsBounds.tsx

@@ -3,6 +3,7 @@ import type { Feature, FeatureCollection, GeoJsonProperties, Geometry } from "ge
 import mapboxgl from "mapbox-gl";
 import { useEffect, useMemo, useRef } from "react";
 import { useMap } from "react-map-gl";
+import isValidMarker from "@/types/isValidMarker.ts";
 import { MarkerProps } from "@/types/MarkerProps";
 
 interface FitBoundsProps {
@@ -22,8 +23,6 @@ const serializeKey = (key: unknown): string => {
   return JSON.stringify(key);
 };
 
-const isValidMarker = (m: MarkerProps): m is MarkerProps & { lng: number; lat: number } => Number.isFinite(m.lng) && Number.isFinite(m.lat);
-
 const extractCoordsFromFeatures = (input?: FeatureCollection<Geometry> | Feature<Geometry> | Feature<Geometry>[]): [number, number][] => {
   if (!input) {
     return [];

src/Features/MarkerMap/MarkerMap.tsx

@@ -9,6 +9,7 @@ import FitBounds from "@/Features/Bounds/FitsBounds";
 import useMarkerMap from "@/Features/MarkerMap/useMarkerMap.ts";
 import DefaultMarker from "@/Features/Markers/DefaultMarkers";
 import RenderFeatures from "@/Features/RenderFeature/RenderFeature.tsx";
+import isValidMarker from "@/types/isValidMarker.ts";
 import { MarkerMapProps } from "@/types/MarkerMapProps";
 
 const MarkerMap = ({
@@ -104,11 +105,11 @@ const MarkerMap = ({
             onMapClick?.(e.lngLat.lng, e.lngLat.lat);
           }}
         >
-          {markers.map((m) => (
+          {markers.filter(isValidMarker).map((m) => (
             <Marker
               key={m.id}
-              longitude={isNumber(m.lng) ? m.lng : undefined}
-              latitude={isNumber(m.lat) ? m.lat : undefined}
+              longitude={m.lng}
+              latitude={m.lat}
               anchor="bottom"
               onClick={(e) => {
                 e.originalEvent.stopPropagation();

src/types/isValidMarker.ts

@@ -0,0 +1,7 @@
+import type { MarkerProps } from "@/types/MarkerProps";
+
+const isValidMarker = (m: MarkerProps): m is MarkerProps & { lng: number; lat: number } => {
+  return Number.isFinite(m.lng) && Number.isFinite(m.lat);
+};
+
+export default isValidMarker;