From 0f97be04999b214c7b5160f34f550bb8708ce479 Mon Sep 17 00:00:00 2001
From: Gabriel Dehame <gabrieldehame@gmail.com>
Date: Sat, 4 Mar 2023 19:57:17 +0100
Subject: [PATCH] nom plutot qu'id des salles et limite d'OOB

---
 src/Map.js | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/Map.js b/src/Map.js
index e9e51e9..c402409 100644
--- a/src/Map.js
+++ b/src/Map.js
@@ -178,7 +178,7 @@ function newPolygon(element, positions, selectedRoom, callbackRoomSelected, call
   {
     // 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: () => callbackRoomSelected(element["id"])}}>
-      <Tooltip>{element["id"]}</Tooltip>
+      <Tooltip>{element["name"]}</Tooltip>
       <Stairs position={polygonCenter(positions)} size={logoSize(positions)} body={<Popup>
                                                                                     {floorList(element["connectedFloors"], callbackChangeFloor)}
                                                                                    </Popup>
@@ -190,7 +190,7 @@ function newPolygon(element, positions, selectedRoom, callbackRoomSelected, call
   {
     // 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: () => callbackRoomSelected(element["id"])}}>
-      <Tooltip>{element["id"]}</Tooltip>
+      <Tooltip>{element["name"]}</Tooltip>
       <Lift position={polygonCenter(positions)} size={logoSize(positions)} body={<Popup>
                                                                                   {floorList(element["connectedFloors"], callbackChangeFloor)}
                                                                                  </Popup>
@@ -201,7 +201,7 @@ function newPolygon(element, positions, selectedRoom, callbackRoomSelected, call
   else if (element["type"] === "T")
   {
     return <Polygon positions={positions} key={element["id"] + color} color={color} evenHandlers={{click: () => callbackRoomSelected(element["id"])}}>
-      <Tooltip>{element["id"]}</Tooltip>
+      <Tooltip>{element["name"]}</Tooltip>
       <Toilet position={polygonCenter(positions)} size={logoSize(positions)}/>
     </Polygon>
   }
@@ -209,7 +209,7 @@ function newPolygon(element, positions, selectedRoom, callbackRoomSelected, call
   {
     // In this case it is a regular room
     return <Polygon positions={positions} key={element["id"] + color} color={color} eventHandlers={{click: () => callbackRoomSelected(element["id"])}}>
-      <Tooltip>{element["id"]}</Tooltip>
+      <Tooltip>{element["name"]}</Tooltip>
     </Polygon>
   }
   else if (element["type"] === "C")
@@ -277,15 +277,19 @@ function Map({callbackRoomSelected, selectedRoom, floorID, callbackChangeFloor})
   }, [floorID]);
   // We distinguish wether to print an error, a loading message
   // or the map if we got the answer
+  const corner1 = L.latLng(-50, -100);
+  const corner2 = L.latLng(50, 100);
+  const bounds = L.latLngBounds(corner1, corner2);
+
   if (error != null)
   {
-    return <MapContainer center={[0, 0]} zoom={4} scrollWheelZoom={true} style={{ flexGrow: '1' }}>
+    return <MapContainer center={[0, 0]} zoom={4} scrollWheelZoom={true} style={{ flexGrow: '1' }} maxBounds={bounds} maxBoundsViscosity={1.0}>
             <Popup position={[0,0]}>{error}</Popup>
            </MapContainer>;
   }
   else if (loading)
   {
-    return <MapContainer center={[0, 0]} zoom={4} scrollWheelZoom={true} style={{ flexGrow: '1' }}>
+    return <MapContainer center={[0, 0]} zoom={4} scrollWheelZoom={true} style={{ flexGrow: '1' }} maxBounds={bounds} maxBoundsViscosity={1.0}>
             <Popup position={[0,0]}>Loading map</Popup>
            </MapContainer>;
   }
@@ -298,7 +302,7 @@ function Map({callbackRoomSelected, selectedRoom, floorID, callbackChangeFloor})
     const polygons = createPolygons(request, callbackRoomSelected, selectedRoom);
     */
     const polygons = buildPols(request, callbackRoomSelected, selectedRoom, callbackChangeFloor);
-    return <MapContainer center={[0, 0]} zoom={4} scrollWheelZoom={true} style={{ flexGrow: '1' }}>
+    return <MapContainer center={[0, 0]} zoom={4} scrollWheelZoom={true} style={{ flexGrow: '1' }} maxBounds={bounds} maxBoundsViscosity={1.0}>
       {polygons}
     </MapContainer>
   }