Zone creation UI preparation

2026-07-23 04:26:57 +00:00 · 2024-04-10 14:59:58 +02:00
parent 1aba39b0e9
commit 6a3b58f02d
12 changed files with 442 additions and 42 deletions
@@ -0,0 +1,88 @@
+import * as React from "react";
+
+import type { FeatureCollection } from "geojson";
+import L, { LatLngLiteral } from "leaflet";
+import "leaflet-defaulticon-compatibility";
+import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";
+import "leaflet-draw/dist/leaflet.draw.css";
+import "leaflet/dist/leaflet.css";
+import {
+  FeatureGroup,
+  MapContainer,
+  TileLayer,
+  ZoomControl,
+} from "react-leaflet";
+import { EditControl } from "react-leaflet-draw";
+
+import MapEvents from "../MapEvents";
+
+const center: LatLngLiteral = { lat: 47.0844, lng: 2.3964 };
+
+export type ZoneEditorProps = {
+  value: FeatureCollection;
+  onChange: (geoJson: FeatureCollection) => void;
+};
+
+export const ZoneEditor = ({ value, onChange }: ZoneEditorProps) => {
+  const ref = React.useRef<L.FeatureGroup>(null);
+
+  React.useEffect(() => {
+    if (ref.current?.getLayers().length === 0 && value) {
+      L.geoJSON(value).eachLayer((layer) => {
+        if (
+          layer instanceof L.Polyline ||
+          layer instanceof L.Polygon ||
+          layer instanceof L.Marker
+        ) {
+          if (layer?.feature?.properties.radius && ref.current) {
+            new L.Circle(layer.feature.geometry.coordinates.slice().reverse(), {
+              radius: layer.feature?.properties.radius,
+            }).addTo(ref.current);
+          } else {
+            ref.current?.addLayer(layer);
+          }
+        }
+      });
+    }
+  }, [value]);
+
+  const handleChange = () => {
+    const geoJson = ref.current?.toGeoJSON();
+    if (geoJson?.type === "FeatureCollection") {
+      onChange(geoJson);
+    }
+  };
+
+  return (
+    <MapContainer
+      center={center}
+      zoom={5}
+      style={{ height: "600px", flexGrow: 1 }}
+    >
+      <MapEvents />
+      <TileLayer
+        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+      />
+
+      <FeatureGroup ref={ref}>
+        <EditControl
+          position="topright"
+          onEdited={handleChange}
+          onCreated={handleChange}
+          onDeleted={handleChange}
+          draw={{
+            rectangle: false,
+            circle: true,
+            polyline: false,
+            polygon: true,
+            marker: false,
+            circlemarker: false,
+          }}
+        />
+      </FeatureGroup>
+    </MapContainer>
+  );
+};
+
+export default ZoneEditor;