Use GeometryList component instead of GeoJSON

Georiviere · Aug 1, 2023 · b1fa082 · b1fa082
1 parent d4b4ece
commit b1fa082
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 62 deletions.
diff --git a/src/components/map/geojson.tsx b/src/components/map/geojson.tsx
@@ -1,68 +1,15 @@
 import { useMemo } from 'react';
 import { useSearchParams } from 'next/navigation';
 import { Layer } from '@/api/settings';
-import { useMapContext } from '@/context/map';
-import { Feature } from 'geojson';
-import L, { Icon, LatLng, Layer as LeafletLayer } from 'leaflet';
-import { renderToStaticMarkup } from 'react-dom/server';
-import { GeoJSON } from 'react-leaflet';
 
-import { Icons } from '@/components/icons';
-import { DefaultMarker } from '@/components/map/default-marker';
-import Popup from '@/components/map/popup';
+import { GeometryList } from '@/components/map/geometry-list';
 
 type Props = {
   layer: Layer;
 };
 
 export default function GeoJson({ layer }: Props) {
   const searchParams = useSearchParams();
-  const { layers } = useMapContext();
-
-  const onEachFeaturehandler = (
-    feature: Feature,
-    layer: LeafletLayer,
-    type: string,
-  ) => {
-    const { properties } = feature;
-
-    if (properties === null || !properties.name) {
-      return;
-    }
-
-    if (properties.name) {
-      layer.bindTooltip(properties.name);
-    }
-
-    if (layers === null || layers.length === 0) {
-      return;
-    }
-
-    if ('url' in (layers.find(item => item.type === type) || {})) {
-      layer.bindPopup(
-        renderToStaticMarkup(
-          <Popup
-            name={properties.name}
-            description={properties.description}
-            attachments={properties.attachments}
-            type={type}
-            id={properties.id}
-            params={searchParams}
-          />,
-        ),
-        { offset: [4, -14] },
-      );
-    }
-  };
-
-  const pointToLayerHandler = (feature: Feature, latlng: LatLng) => {
-    const icon =
-      feature.properties?.type?.pictogram ??
-      renderToStaticMarkup(<Icons.info fill="white" />);
-    return L.marker(latlng, {
-      icon: DefaultMarker(icon, 1) as Icon,
-    });
-  };
 
   const data = useMemo(() => {
     const searchText = searchParams.get('text');
@@ -85,11 +32,10 @@ export default function GeoJson({ layer }: Props) {
   }
 
   return (
-    <GeoJSON
-      data={data}
-      style={layer.options.style}
-      onEachFeature={(...args) => onEachFeaturehandler(...args, layer.type)}
-      pointToLayer={pointToLayerHandler}
+    <GeometryList
+      contents={data.features}
+      layer={layer}
+      options={layer.options}
     />
   );
 }
diff --git a/src/components/map/popup.tsx b/src/components/map/popup.tsx
@@ -1,6 +1,6 @@
-import { URLSearchParams } from 'url';
 import Image from 'next/image';
 import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
 
 import {
   Card,
@@ -12,7 +12,6 @@ import {
 
 type Props = {
   name: string;
-  params: URLSearchParams;
   description: string;
   attachments?: { thumbnail: string }[];
   type: string;
@@ -21,12 +20,12 @@ type Props = {
 
 export default function Popup({
   attachments,
-  params,
   name,
   description,
   type,
   id,
 }: Props) {
+  const params = useSearchParams();
   return (
     <Card className="group relative border-0">
       {attachments?.[0]?.thumbnail && (