From 8b6dea9964a5c665d50add831171370252223cff Mon Sep 17 00:00:00 2001
From: Gabriel Dehame <gabrieldehame@gmail.com>
Date: Tue, 24 Jan 2023 17:56:32 +0100
Subject: [PATCH] adaptation de la taille des logos avec le zoom

---
 src/Map.js | 60 ++++++++++++++++++++++++++++++++++++------------------
 1 file changed, 40 insertions(+), 20 deletions(-)

diff --git a/src/Map.js b/src/Map.js
index c817ecb..9c81538 100644
--- a/src/Map.js
+++ b/src/Map.js
@@ -13,6 +13,7 @@ import lift from "./lift.png";
 import request2 from "./M-GN1-2.json"
 import request3 from "./M-GN1-3.json"
 import request4 from "./M-GN1-4.json"
+import { useMapEvent, useMap } from 'react-leaflet/hooks'
 
 function polygonCenter(polygon) {
   let minX = -1;
@@ -62,6 +63,25 @@ function min_max(request) {
   return [minX, maxX, minY, maxY];
 }
 
+function Stairs({position, body})
+{
+  const map = useMap();
+  const [markerIcon, setMarkerIcon] = useState(new L.Icon({ iconUrl: stairs, iconSize: [40, 40] }));
+  const mmap = useMapEvent('zoomend', () => {console.log("ca zoom"); setMarkerIcon(new L.Icon({ iconUrl: stairs, iconSize: [40*Math.pow(2, map.getZoom() - 4), 40*Math.pow(2, map.getZoom() - 4)]}))});
+  return <Marker position={position} icon={markerIcon}>
+    {body}
+  </Marker>
+}
+
+function Lift({position, body})
+{
+  const map = useMap();
+  const [markerIcon, setMarkerIcon] = useState(new L.Icon({ iconUrl: lift, iconSize: [20, 20] }));
+  const mmap = useMapEvent('zoomend', () => {console.log("ca zoom"); setMarkerIcon(new L.Icon({ iconUrl: lift, iconSize: [20*Math.pow(2, map.getZoom() - 4), 20*Math.pow(2, map.getZoom() - 4)]}))});
+  return <Marker position={position} icon={markerIcon}>
+    {body}
+  </Marker>
+}
 
 function list_polygons(request, center, ratio, cb, selectedRoom) {
   console.log(selectedRoom);
@@ -77,31 +97,31 @@ function list_polygons(request, center, ratio, cb, selectedRoom) {
       if (k === "salle-M-GN1-X-aa" || k === "salle-M-GN1-X-ab" || k === "salle-M-GN1-X-ac" || k === "salle-M-GN1-X-ad") {
         return <Polygon positions={x} key={k + color} color={color} evenHandlers={{click: () => cb(k)}}>
           <Tooltip>{k}</Tooltip>
-          <Marker position={polygonCenter(x)} icon={new L.Icon({ iconUrl: stairs, iconSize: [40, 40] })}>
-            <Popup>
-              <li onClick={() => { console.log("escalier"); }}>
-                YAY
-              </li>
-              <li>
-                uéuéué
-              </li>
-            </Popup>
-          </Marker>
+          <Stairs position={polygonCenter(x)} body={<Popup>
+                                                      <li onClick={() => { console.log("escalier"); }}>
+                                                        YAY
+                                                      </li>
+                                                      <li>
+                                                        uéuéué
+                                                      </li>
+                                                    </Popup>
+                                                  }
+          />
         </Polygon>
       }
       else if (k === "salle-M-GN1-X-ag" || k === "salle-M-GN1-X-ah") {
         return <Polygon positions={x} key={k + color} color={color} evenHandlers={{click: () => cb(k)}}>
           <Tooltip>{k}</Tooltip>
-          <Marker position={polygonCenter(x)} icon={new L.Icon({ iconUrl: lift, iconSize: [20, 20] })}>
-            <Popup>
-              <li onClick={() => { console.log("ascenseur"); }}>
-                YAY
-              </li>
-              <li>
-                uéuéué
-              </li>
-            </Popup>
-          </Marker>
+          <Lift position={polygonCenter(x)} body={<Popup>
+                                                    <li onClick={() => { console.log("ascenseur"); }}>
+                                                      YAY
+                                                    </li>
+                                                    <li>
+                                                      uéuéué
+                                                    </li>
+                                                  </Popup>
+                                                 }
+          />
         </Polygon>
       }
       else {