Utilisation de l'api pour le tracage de la map

src/App.js

@@ -91,7 +91,7 @@ export default function App() {
   return <>
     <TopBar />
     <div style={{ flexGrow: '1', display: 'flex', flexDirection: 'line', flexWrap: 'nowrap' }}>
-      <Map callbackRoomSelected={setSelectedRoom} selectedRoom={selectedRoom}/>
+      <Map callbackRoomSelected={setSelectedRoom} selectedRoom={selectedRoom} floorID={69}/>
       <RoomResearch callbackRoomSelected={setSelectedRoom}/>
     </div>
   </>

src/Map.js

@@ -5,13 +5,12 @@ 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 { useState, useEffect } from "react";
 import React from 'react';
 import L from 'leaflet';
 import stairs from "./stairs.png";
 import lift from "./lift.png";
 import toilet from "./toilet.png"
-import request from "./test.json"
 import { useMapEvent, useMap } from 'react-leaflet/hooks';
 
 function Stairs({position, size, body})
@@ -146,8 +145,7 @@ 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")
-  if (element["id"] === 512 || element["id"] === 517 || element["id"] === 514 || element["id"] === 518)
+  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"])}}>
@@ -164,8 +162,7 @@ function newPolygon(element, positions, selectedRoom, callback)
       />
     </Polygon>
   }
-  //else if (element["type"] === "L")
-  else if (element["id"] === 524 || element["id"] === 523)
+  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"])}}>
@@ -182,8 +179,7 @@ function newPolygon(element, positions, selectedRoom, callback)
       />
     </Polygon>
   }
-  //else if (element["type"] === "T")
-  else if (element["id"] === 379)
+  else if (element["type"] === "T")
   {
     return <Polygon positions={positions} key={element["id"] + color} color={color} evenHandlers={{click: () => callback(element["id"])}}>
       <Tooltip>{element["id"]}</Tooltip>
@@ -214,8 +210,6 @@ function list_polygons(request, center, callback, selectedRoom)
   // 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)
   {
@@ -246,21 +240,35 @@ function buildPols(request, callback, selectedRoom)
   return polygons;
 }
 
-function Map({ callbackRoomSelected, selectedRoom })
+function Map({callbackRoomSelected, selectedRoom, floorID})
 {
   // 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>
+  const [loading, setLoading] = useState(true);
+  const [floor, setFloor] = useState(null);
+  useEffect(() =>
+  {
+    fetch("https://encartes.aliens-lyon.fr/api/map/get_floor/"+floorID).then(response => response.json()).then(data => {setLoading(false); setFloor(data)});
+  }, []);
+  if (loading)
+  {
+    return <MapContainer center={[0, 0]} zoom={4} scrollWheelZoom={true} style={{ flexGrow: '1' }}>
+    </MapContainer>
+  }
+  else
+  {
+    const request = floor["places"];
+    /*const createPolygons = React.useCallback((request, callbackRoomSelected, selectedRoom) => {
+      return buildPols(request, callbackRoomSelected, selectedRoom);
+    }, [request, callbackRoomSelected, selectedRoom]);
+    const polygons = createPolygons(request, callbackRoomSelected, selectedRoom);
+    */
+    const polygons = buildPols(request, callbackRoomSelected, selectedRoom);
+    return <MapContainer center={[0, 0]} zoom={4} scrollWheelZoom={true} style={{ flexGrow: '1' }}>
+      {polygons}
+    </MapContainer>
+  }
 }
 
 export default Map;