creation de Map2.js pour adapter à la nouvelle structure des réponses exemple: test.json

src/Map.js

@@ -73,7 +73,7 @@ function Stairs({position, body})
   // and the body of the popup of the stairs (list of floors accessible from that staircase)
   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)]}))});
+  const mmap = useMapEvent('zoomend', () => {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>
@@ -85,7 +85,7 @@ function Lift({position, body})
   // and the body of the popup of the lift (list of floors accessible from that lift)
   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)]}))});
+  const mmap = useMapEvent('zoomend', () => {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>
@@ -172,6 +172,8 @@ function buildPols(request, cb, selectedRoom)
 
 function Map({ callbackRoomSelected, selectedRoom })
 {
+  const request = new Request('https://encartes.aliens-lyon.fr/api/map/get_floor/47');
+  fetch(request).then((response) => {console.log(response)});
   // When the user selects a room on the map, call callbackRoomSelected.
   // The room that is currently selected is selectedRoom. It is null if no room
   // is selected

src/Map2.js

@@ -0,0 +1,198 @@
+import { MapContainer } from 'react-leaflet/MapContainer';
+import { Marker } from 'react-leaflet/Marker';
+import { Popup } from 'react-leaflet/Popup';
+import { Polygon } from 'react-leaflet/Polygon';
+import { LayersControl } from 'react-leaflet/LayersControl'
+import { LayerGroup } from 'react-leaflet/LayerGroup'
+import { Tooltip } from 'react-leaflet/Tooltip'
+import { useState } from "react";
+import React from 'react';
+import L from 'leaflet';
+import stairs from "./stairs.png";
+import lift from "./lift.png";
+import request from "./test.json"
+import { useMapEvent, useMap } from 'react-leaflet/hooks';
+
+function Stairs({position, body})
+{
+  // React class (in function form) to represent stairs, takes the position where to put the stairs logo
+  // and the body of the popup of the stairs (list of floors accessible from that staircase)
+  const map = useMap();
+  const [markerIcon, setMarkerIcon] = useState(new L.Icon({ iconUrl: stairs, iconSize: [40, 40] }));
+  const mmap = useMapEvent('zoomend', () => {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})
+{
+  // React class (in function form) to represent lifts, takes the position where to put the lift logo
+  // and the body of the popup of the lift (list of floors accessible from that lift)
+  const map = useMap();
+  const [markerIcon, setMarkerIcon] = useState(new L.Icon({ iconUrl: lift, iconSize: [20, 20] }));
+  const mmap = useMapEvent('zoomend', () => {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 polygonCenter(polygon)
+{
+  // Function to calculate the central point of a given polygon
+  let minX = -1;
+  let minY = -1;
+  let maxX = -1;
+  let maxY = -1;
+  polygon.forEach((pt) => {
+    if (minX === -1 || minX > pt[0]) {
+      minX = pt[0];
+    }
+    if (minY === -1 || minY > pt[1]) {
+      minY = pt[1];
+    }
+    if (maxY === -1 || maxY < pt[1]) {
+      maxY = pt[1];
+    }
+    if (maxX === -1 || maxX < pt[0]) {
+      maxX = pt[0];
+    }
+  })
+  return [(minX + maxX) / 2, (maxY + minY) / 2];
+}
+
+function min_max(request)
+{
+  // Function to calculate the minimal and maximal coordinates of all the points in a request
+  // (it being a list of polygons, a polygon being a list of points, a point being a list of 2 coordinates)
+  let minX = -1;
+  let minY = -1;
+  let maxX = -1;
+  let maxY = -1;
+  for (const ind in request)
+  {
+    const element = request[ind];
+    // element can be a room, a lift, a staircase or toilets
+    (element["surface"]).forEach((pt) => {
+      if (minX === -1 || minX > pt["x"]) {
+        minX = pt["x"];
+      }
+      if (minY === -1 || minY > pt["y"]) {
+        minY = pt["y"];
+      }
+      if (maxY === -1 || maxY < pt["y"]) {
+        maxY = pt["y"];
+      }
+      if (maxX === -1 || maxX < pt["x"]) {
+        maxX = pt["x"];
+      }
+    })
+  }
+  return [minX, maxX, minY, maxY];
+}
+
+function newPolygon(element, positions, selectedRoom, callback)
+{
+  // Auxiliary function to return the appropriate polygon depending
+  // on wether it is a room, a lift, a staircase or toilets
+  const color = selectedRoom === element["id"] ? 'red' : 'grey';
+  if (element["type"] === "S")
+  {
+    // In this case, the room is a staircase so we add a Stairs component
+    return <Polygon positions={positions} key={element["id"] + color} color={color} evenHandlers={{click: () => callback(element["id"])}}>
+      <Tooltip>{element["id"]}</Tooltip>
+      <Stairs position={polygonCenter(positions)} body={<Popup>
+                                                  <li onClick={() => { console.log("escalier"); }}>
+                                                    YAY
+                                                  </li>
+                                                  <li>
+                                                    uéuéué
+                                                  </li>
+                                                </Popup>
+                                              }
+      />
+    </Polygon>
+  }
+  else if (element["type"] === "L")
+  {
+    // In this case the room is a lift so we add a Lift component
+    return <Polygon positions={positions} key={element["id"] + color} color={color} evenHandlers={{click: () => callback(element["id"])}}>
+      <Tooltip>{element["id"]}</Tooltip>
+      <Lift position={polygonCenter(positions)} body={<Popup>
+                                                <li onClick={() => { console.log("ascenseur"); }}>
+                                                  YAY
+                                                </li>
+                                                <li>
+                                                  uéuéué
+                                                </li>
+                                              </Popup>
+                                             }
+      />
+    </Polygon>
+  }
+  else if (element["type"] === "R")
+  {
+    // In this case it is a regular room
+    return <Polygon positions={positions} key={element["id"] + color} color={color} eventHandlers={{click: () => callback(element["id"])}}>
+      <Tooltip>{element["id"]}</Tooltip>
+    </Polygon>
+  }
+}
+
+function list_polygons(request, center, callback, selectedRoom)
+{
+  // Main function to calculate the list of polygons (React components)
+  // Taking the request as parameter, the center of the points of the request
+  // and a callback (callback) to interact with the global web interface
+  // when a room is clicked (allowing the display of room informations)
+
+  console.log(selectedRoom);
+  let polygons = [];
+  for (const ind in request)
+  {
+    const element = request[ind];
+    // element can be a room, a lift, a staircase or toilets
+    const positions = (element["surface"]).map((pt) => {
+      // This function rotates and recenters de the map (should not be necessary once the real data are gathered)
+      // It also changes the objects into lists of two coordinates to make it accepted by the "positions" attribute of
+      // the "Polygon" react-leaflet component
+      return [-(pt["y"] - center[1]) / 25, (pt["x"] - center[0]) / 25];
+    });
+    const pol = newPolygon(element, positions, selectedRoom, callback);
+    polygons = [...polygons, pol];
+  }
+  return polygons;
+}
+
+function buildPols(request, callback, selectedRoom)
+{
+  // This function just calls the list_polygons one with appropriate parameters (precalculate ratio and center)
+  const minMaxXY = min_max(request);
+  const minX = minMaxXY[0];
+  const maxX = minMaxXY[1];
+  const minY = minMaxXY[2];
+  const maxY = minMaxXY[3];
+  const center = [(maxX + minX) / 2, (maxY + minY) / 2];
+  const ratio = Math.ceil(Math.max((maxY - minY) / 2284, (maxX - minX) / 135)); //A priori ca devrait être convenable mais là ca ne fonctionne pas, je pense que c'est pck le SVG n'utilise pas des coordonnées et ducoup y'a des trucs bizarre (notamment les étages 3 et 4 n'ont pas du tout la même longueur ni même largeur)
+  const polygons = list_polygons(request, center, ratio, callback, selectedRoom);
+  return polygons;
+}
+
+function Map({ callbackRoomSelected, selectedRoom })
+{
+  // When the user selects a room on the map, call callbackRoomSelected.
+  // The room that is currently selected is selectedRoom. It is null if no room
+  // is selected
+  console.log(request);
+  console.log(selectedRoom);
+  const createPolygons = React.useCallback((request, callbackRoomSelected, selectedRoom) => {
+    return buildPols(request, callbackRoomSelected, selectedRoom);
+  }, [request, callbackRoomSelected, selectedRoom]);
+
+  const polygons = createPolygons(request, callbackRoomSelected, selectedRoom);
+  return <MapContainer center={[0, 0]} zoom={4} scrollWheelZoom={true} style={{ flexGrow: '1' }}>
+    {polygons}
+  </MapContainer>
+}
+
+export default Map;