Markers check that they belong to the current viewport to display.

src/components/map/CurrentLocation.tsx

@@ -1,11 +1,12 @@
 import { atom, useAtom } from 'jotai';
 import react from 'react';
 import Marker from './Marker';
-import { geoPoint, TileKeyObject } from './types';
+import { geoPoint, Rectangle, TileKeyObject } from './types';
 
 export interface CurrentLocationProperties {
   keyObject?: TileKeyObject;
   zoom?: number;
+  viewPort?: Rectangle;
 }
 
 const initialLocation: geoPoint | null = null;
@@ -33,6 +34,7 @@ export const CurrentLocation: react.FC<CurrentLocationProperties> = (
       }
       keyObject={props.keyObject}
       zoom={props.zoom}
+      viewPort={props.viewPort}
     />
   ) : null;
 };

src/components/map/Marker.tsx

@@ -15,6 +15,14 @@ export const Marker: react.FC<MarkerProperties> = (props: MarkerProperties) => {
 
   const x = lon2tile(props.coordinates.lon, props.keyObject.zoomLevel);
   const y = lat2tile(props.coordinates.lat, props.keyObject.zoomLevel);
+  if (props.viewPort === undefined) return null;
+  if (
+    x < props.viewPort.topLeft.x ||
+    x > props.viewPort.bottomRight.x ||
+    y < props.viewPort.topLeft.y ||
+    y > props.viewPort.bottomRight.y
+  )
+    return null;
   return (
     <g transform={`translate(${x}, ${y}) scale(${1 / props.zoom})`}>
       {props.icon}