utilisation de l'étage 3 plutot que du 2 pour l'exemple et ajout de taille de logo relative à la taille du polygone pour généraliser

src/Map2.js

@@ -10,33 +10,46 @@ 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, body})
+function Stairs({position, size, 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 [markerIcon, setMarkerIcon] = useState(new L.Icon({ iconUrl: stairs, iconSize: size }));
   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})
+function Lift({position, size, 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 [markerIcon, setMarkerIcon] = useState(new L.Icon({ iconUrl: lift, iconSize: size }));
   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 Toilet({position, size, 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: toilet, iconSize: size }));
+  const mmap = useMapEvent('zoomend', () => {setMarkerIcon(new L.Icon({ iconUrl: toilet, 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
@@ -61,6 +74,35 @@ function polygonCenter(polygon)
   return [(minX + maxX) / 2, (maxY + minY) / 2];
 }
 
+function logoSize(polygon)
+{
+  // function to calculate the size of a logo to display
+  // on a room which edges are in polygon
+  let minX = -1;
+  let minY = -1;
+  let maxX = -1;
+  let maxY = -1;
+  // We first calculate the maximal coordinates to then output
+  // 75% the size of the room
+  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];
+    }
+  })
+  // For some unknown reason we have to multiply by 10 otherwise
+  // it's almost invisible
+  return [30*(maxX - minX)/4, 30*(maxY - minY)/4];
+}
+
 function min_max(request)
 {
   // Function to calculate the minimal and maximal coordinates of all the points in a request
@@ -96,12 +138,13 @@ 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["type"] === "S")
+  if (element["id"] === 512 || element["id"] === 517 || element["id"] === 514 || element["id"] === 518)
   {
     // 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>
+      <Stairs position={polygonCenter(positions)} size={logoSize(positions)} body={<Popup>
                                                   <li onClick={() => { console.log("escalier"); }}>
                                                     YAY
                                                   </li>
@@ -113,12 +156,13 @@ function newPolygon(element, positions, selectedRoom, callback)
       />
     </Polygon>
   }
-  else if (element["type"] === "L")
+  //else if (element["type"] === "L")
+  else if (element["id"] === 524 || element["id"] === 523)
   {
     // 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>
+      <Lift position={polygonCenter(positions)} size={logoSize(positions)} body={<Popup>
                                                 <li onClick={() => { console.log("ascenseur"); }}>
                                                   YAY
                                                 </li>
@@ -130,6 +174,23 @@ function newPolygon(element, positions, selectedRoom, callback)
       />
     </Polygon>
   }
+  //else if (element["type"] === "T")
+  else if (element["id"] === 379)
+  {
+    return <Polygon positions={positions} key={element["id"] + color} color={color} evenHandlers={{click: () => callback(element["id"])}}>
+      <Tooltip>{element["id"]}</Tooltip>
+      <Toilet position={polygonCenter(positions)} size={logoSize(positions)} body={<Popup>
+                                                <li onClick={() => { console.log("toilettes"); }}>
+                                                  YAY
+                                                </li>
+                                                <li>
+                                                  uéuéué
+                                                </li>
+                                              </Popup>
+                                             }
+      />
+    </Polygon>
+  }
   else if (element["type"] === "R")
   {
     // In this case it is a regular room
@@ -166,15 +227,14 @@ function list_polygons(request, center, callback, selectedRoom)
 
 function buildPols(request, callback, selectedRoom)
 {
-  // This function just calls the list_polygons one with appropriate parameters (precalculate ratio and center)
+  // This function just calls the list_polygons one with appropriate parameters (precalculate 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);
+  const polygons = list_polygons(request, center, callback, selectedRoom);
   return polygons;
 }