implemented a map zone selector based on squares

traque-front/components/admin/mapPicker.jsx

@@ -2,9 +2,12 @@
 import { useLocation } from "@/hook/useLocation";
 import { useEffect, useState } from "react";
 import "leaflet/dist/leaflet.css";
-import { Circle, MapContainer, Marker, Popup, TileLayer, useMap } from "react-leaflet";
+import L from "leaflet";
+import { Circle, LayersControl, MapContainer, Marker, Popup, TileLayer, useMap} from "react-leaflet";
 import { useMapCircleDraw } from "@/hook/mapDrawing";
 import useAdmin from "@/hook/useAdmin";
+import { MapGridZoneSelector } from "./mapZoneSelector.jsx";
+
 
 function MapPan(props) {
     const map = useMap();
@@ -36,7 +39,7 @@ function MapEventListener({ onClick, onMouseMove }) {
     return null;
 }
 
-const DEFAULT_ZOOM = 17;
+const DEFAULT_ZOOM = 13;
 export function CircularAreaPicker({ area, setArea, markerPosition, ...props }) {
     const location = useLocation(Infinity);
     const { handleClick, handleMouseMove, center, radius } = useMapCircleDraw(area, setArea);
@@ -58,38 +61,28 @@ export function CircularAreaPicker({ area, setArea, markerPosition, ...props })
             <MapEventListener onClick={handleClick} onMouseMove={handleMouseMove} />
         </MapContainer>)
 }
-export const EditMode = {
-    MIN: 0,
-    MAX: 1
-}
-export function ZonePicker({ minZone, setMinZone, maxZone, setMaxZone, editMode, ...props }) {
+
+//https://stackoverflow.com/questions/71231865/show-fixed-100-m-x-100-m-grid-on-lowest-zoom-level
+
+export function ZonePicker({ ...props }) {
     const location = useLocation(Infinity);
-    const { handleClick: maxClick, handleMouseMove: maxHover, center: maxCenter, radius: maxRadius } = useMapCircleDraw(minZone, setMinZone);
-    const { handleClick: minClick, handleMouseMove: minHover, center: minCenter, radius: minRadius } = useMapCircleDraw(maxZone, setMaxZone);
-    function handleClick(e) {
-        if (editMode == EditMode.MAX) {
-            maxClick(e);
-        } else {
-            minClick(e);
-        }
-    }
-    function handleMouseMove(e) {
-        if (editMode == EditMode.MAX) {
-            maxHover(e);
-        } else {
-            minHover(e);
-        }
-    }
+    const [coloredTiles, setColoredTiles] = useState([]);
+
+    useEffect(() => {
+        console.log(coloredTiles)
+    }, [coloredTiles]);
     return (
         <MapContainer  {...props} className='min-h-full w-full ' center={[0, 0]} zoom={0} scrollWheelZoom={true}>
             <TileLayer
                 attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                 url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
             />
-            {minCenter && minRadius && <Circle center={minCenter} radius={minRadius} color="blue" fillColor="blue" />}
-            {maxCenter && maxRadius && <Circle center={maxCenter} radius={maxRadius} color="red" fillColor="red" />}
             <MapPan center={location} zoom={DEFAULT_ZOOM} />
-            <MapEventListener onClick={handleClick} onMouseMove={handleMouseMove} />
+            <LayersControl>
+                <LayersControl.Overlay name="Grid" checked={true}>
+                    <MapGridZoneSelector onSelectedTile={setColoredTiles} tileSize={16}/>
+                </LayersControl.Overlay>
+            </LayersControl>
         </MapContainer>
     )
 }

traque-front/components/admin/mapZoneSelector.jsx

@@ -0,0 +1,29 @@
+import { useEffect, useState } from 'react';
+import { useLeafletContext } from '@react-leaflet/core';
+import { useMapGrid } from '@/hook/mapDrawing';
+import { latLngToTileNumber } from '../util/map';
+
+export function MapGridZoneSelector({ onSelectedTile, tileSize }) {
+    const [coloredTiles, setColoredTiles] = useState([]);
+    const { map } = useLeafletContext();
+
+    useEffect(() => {
+        map.on('click', (e) => {
+            const fractionalTileNumber = latLngToTileNumber(e.latlng, tileSize);
+            const tileNumber = new TileNumber(Math.floor(fractionalTileNumber.x), Math.floor(fractionalTileNumber.y));
+            if (coloredTiles.some(t => t.equals(tileNumber))) {
+                setColoredTiles(coloredTiles.filter(t => !t.equals(tileNumber)));
+            } else {
+                setColoredTiles([...coloredTiles, tileNumber]);
+            }
+        });
+    });
+
+    useEffect(() => {
+        onSelectedTile(coloredTiles);
+    }, [coloredTiles]);
+
+    useMapGrid(coloredTiles, tileSize);
+
+    return null;
+}

traque-front/components/admin/zoneSelector.jsx

@@ -5,57 +5,13 @@ import TextInput from "../util/textInput";
 import useAdmin from "@/hook/useAdmin";
 
 export function ZoneSelector() {
-    const [editMode, setEditMode] = useState(EditMode.MIN);
-    const [minZone, setMinZone] = useState(null);
-    const [maxZone, setMaxZone] = useState(null);
-    const [reductionCount, setReductionCount] = useState("");
-    const [reductionDuration, setReductionDuration] = useState("");
-    const [reductionInterval, setReductionInterval] = useState("");
-    const {zoneSettings, changeZoneSettings} = useAdmin();
-
-    useEffect(() => {
-        if (zoneSettings) {
-            setMinZone(zoneSettings.min);
-            setMaxZone(zoneSettings.max);
-            setReductionCount(zoneSettings.reductionCount.toString());
-            setReductionDuration(zoneSettings.reductionDuration.toString());
-            setReductionInterval(zoneSettings.reductionInterval.toString());
-        }
-    }, [zoneSettings]);
-
-    function handleSettingsSubmit() {
-        changeZoneSettings({min:minZone, max:maxZone, reductionCount: Number(reductionCount), reductionDuration: Number(reductionDuration), reductionInterval: Number(reductionInterval)});
-    }
 
     //When the user set one zone, switch to the other
-    useEffect(() => {
-        if(editMode == EditMode.MIN) {
-            setEditMode(EditMode.MAX);
-        }else {
-            setEditMode(EditMode.MIN);
-        }
-
-    }, [minZone, maxZone]);
-
     return <div className='w-2/5 h-full gap-1 bg-white p-10 flex flex-col text-center shadow-2xl overflow-y-scroll'>
         <h2 className="text-2xl">Edit zones</h2>
-        {editMode == EditMode.MIN && <RedButton onClick={() => setEditMode(EditMode.MAX)}>Edit end zone</RedButton>}
-        {editMode == EditMode.MAX && <BlueButton onClick={() => setEditMode(EditMode.MIN)}>Edit start zone</BlueButton>}
         <div className='h-96'>
-            <ZonePicker minZone={minZone} maxZone={maxZone} editMode={editMode} setMinZone={setMinZone} setMaxZone={setMaxZone} />
+            <ZonePicker />
         </div>
-        <div>
-            <p>Number of reductions</p>
-            <TextInput value={reductionCount} onChange={(e) => setReductionCount(e.target.value)}></TextInput>
-        </div>
-        <div>
-            <p>Duration of each reduction</p>
-            <TextInput value={reductionDuration} onChange={(e) => setReductionDuration(e.target.value)}></TextInput>
-        </div>
-        <div>
-            <p>Interval between reductions</p>
-            <TextInput value={reductionInterval} onChange={(e) => setReductionInterval(e.target.value)}></TextInput>
-        </div>
-        <GreenButton onClick={handleSettingsSubmit}>Apply</GreenButton>
+        <GreenButton >Apply</GreenButton>
     </div>
 }

traque-front/components/util/map.jsx

@@ -0,0 +1,20 @@
+export class TileNumber {
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+    }
+    equals(other) {
+        return this.x === other.x && this.y === other.y;
+    }
+}
+
+export function latLngToTileNumber(latLng, tileSize) {
+    const numTilesX = 2 ** tileSize;
+    const numTilesY = 2 ** tileSize;
+    const lngDegrees = latLng.lng;
+    const latRadians = latLng.lat * (Math.PI / 180);
+    return new L.Point(
+        numTilesX * ((lngDegrees + 180) / 360),
+        numTilesY * (1 - Math.log(Math.tan(latRadians) + 1 / Math.cos(latRadians)) / Math.PI) / 2
+    );
+}