diff --git a/src/Map.js b/src/Map.js
index 477a564..b9a36be 100644
--- a/src/Map.js
+++ b/src/Map.js
@@ -12,65 +12,71 @@ import toilet from "./toilet.png"
 import { useMapEvent, useMap } from 'react-leaflet/hooks';
 import API_URL from './config';
 
-function Stairs({position, size, 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: size }));
-  useMapEvent('zoomend', () => {setMarkerIcon(new L.Icon({ iconUrl: stairs, iconSize: [40*Math.pow(2, map.getZoom() - 4), 40*Math.pow(2, map.getZoom() - 4)]}))});
+  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, size, 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: size }));
-  useMapEvent('zoomend', () => {setMarkerIcon(new L.Icon({ iconUrl: lift, iconSize: [20*Math.pow(2, map.getZoom() - 4), 20*Math.pow(2, map.getZoom() - 4)]}))});
+  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})
-{
+function Toilet({ position, size }) {
   // 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 }));
-  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}/>
+  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} />
 }
 
-function polygonCenter(polygon)
-{
+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;
   // We get the extremal coordinates
-  for (const ind in polygon)
-  {
+  for (const ind in polygon) {
     const pt = polygon[ind];
-    if (minX === -1 || minX > pt[0]) 
-    {
+    if (minX === -1 || minX > pt[0]) {
       minX = pt[0];
     }
-    if (minY === -1 || minY > pt[1]) 
-    {
+    if (minY === -1 || minY > pt[1]) {
       minY = pt[1];
     }
-    if (maxY === -1 || maxY < pt[1]) 
-    {
+    if (maxY === -1 || maxY < pt[1]) {
       maxY = pt[1];
     }
-    if (maxX === -1 || maxX < pt[0]) 
-    {
+    if (maxX === -1 || maxX < pt[0]) {
       maxX = pt[0];
     }
   }
@@ -78,8 +84,7 @@ function polygonCenter(polygon)
   return [(minX + maxX) / 2, (maxY + minY) / 2];
 }
 
-function logoSize(polygon)
-{
+function logoSize(polygon) {
   // function to calculate the size of a logo to display
   // on a room which edges are in polygon
   let minX = -1;
@@ -88,67 +93,54 @@ function logoSize(polygon)
   let maxY = -1;
   // We first calculate the maximal coordinates to then output
   // 75% the size of the room
-  for (const ind in polygon)
-  {
+  for (const ind in polygon) {
     const pt = polygon[ind];
-    if (minX === -1 || minX > pt[0]) 
-    {
+    if (minX === -1 || minX > pt[0]) {
       minX = pt[0];
     }
-    if (minY === -1 || minY > pt[1]) 
-    {
+    if (minY === -1 || minY > pt[1]) {
       minY = pt[1];
     }
-    if (maxY === -1 || maxY < pt[1]) 
-    {
+    if (maxY === -1 || maxY < pt[1]) {
       maxY = pt[1];
     }
-    if (maxX === -1 || maxX < pt[0]) 
-    {
+    if (maxX === -1 || maxX < pt[0]) {
       maxX = pt[0];
     }
   }
   // For some unknown reason we have to multiply by 10 otherwise
   // it's almost invisible
-  const x = 30*(maxX - minX)/4;
-  const y = 30*(maxY - minY)/4;
+  const x = 30 * (maxX - minX) / 4;
+  const y = 30 * (maxY - minY) / 4;
   // We return a square size to make it better looking so we
   // take the minimal size of border
-  if (x < y)
-  {
-    return [x,x];
+  if (x < y) {
+    return [x, x];
   }
-  return [y,y];
+  return [y, y];
 }
 
-function min_max(request)
-{
+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)
-  {
+  for (const ind in request) {
     const element = request[ind];
-    for (const index in element["surface"])
-    {
+    for (const index in element["surface"]) {
       const pt = element["surface"][index];
-      if (minX === -1 || minX > pt["x"]) 
-      {
+      if (minX === -1 || minX > pt["x"]) {
         minX = pt["x"];
       }
-      if (minY === -1 || minY > pt["y"]) 
-      {
+      if (minY === -1 || minY > pt["y"]) {
         minY = pt["y"];
       }
-      if (maxY === -1 || maxY < pt["y"]) 
-      {
+      if (maxY === -1 || maxY < pt["y"]) {
         maxY = pt["y"];
       }
-      if (maxX === -1 || maxX < pt["x"]) 
-      {
+      if (maxX === -1 || maxX < pt["x"]) {
         maxX = pt["x"];
       }
     }
@@ -156,38 +148,36 @@ function min_max(request)
   return [minX, maxX, minY, maxY];
 }
 
-function floorList(connectedFloors, callbackChangeFloor)
-{
+function floorList(connectedFloors, callbackChangeFloor) {
   // Returns under html format a list of floors connected
   // listed in connectedFloors
   // Auxiliary function used when creating a Lift/Stairs component
   let htmlFloorList = [];
-  for (const floor in connectedFloors)
-  {
-    htmlFloorList = [...htmlFloorList, <li key={floor} onClick={() => {callbackChangeFloor(connectedFloors[floor]["id"]);}}>
-                                        {connectedFloors[floor]["name"]}
-                                       </li>];
+  for (const floor in connectedFloors) {
+    htmlFloorList = [
+      ...htmlFloorList,
+      <li key={floor} onClick={() => {callbackChangeFloor(connectedFloors[floor]["id"]); }}>
+        {connectedFloors[floor]["name"]}
+      </li>
+    ];
   }
   return htmlFloorList;
 }
 
-function roomNameList(nameList)
-{
+function roomNameList(nameList) {
   // Returns under html format a list of room names
   // (without bullet points) listed in nameList
   // Auxiliary function used when creating a Room component
   let htmlNameList = [];
-  for (const ind in nameList)
-  {
+  for (const ind in nameList) {
     htmlNameList = [...htmlNameList, <div key={ind}>
-                                        {nameList[ind]}
-                                       </div>];
+      {nameList[ind]}
+    </div>];
   }
   return htmlNameList;
 }
 
-function newPolygon(element, positions, selectedRoom, callbackRoomSelected, callbackChangeFloor)
-{
+function newPolygon(element, positions, selectedRoom, callbackRoomSelected, callbackChangeFloor) {
   // Auxiliary function to return the appropriate polygon depending
   // on wether it is a room (R), a lift (L), a staircase (S), toilets (T) or corridor (C)
   // For all except corridors we put a Tooltip with the name of the room
@@ -195,64 +185,56 @@ function newPolygon(element, positions, selectedRoom, callbackRoomSelected, call
   // and for S or L, we add a Popup with the list of connected floors and possibility to load the
   // map of a connected floor
   const color = selectedRoom === element["id"] ? 'red' : 'grey';
-  if (element["type"] === "S")
-  {
+  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: () => callbackRoomSelected(element["id"])}}>
+    return <Polygon positions={positions} key={element["id"] + color} color={color} evenHandlers={{ click: () => callbackRoomSelected(element["id"]) }}>
       <Tooltip>{roomNameList(element["names"])}</Tooltip>
       <Stairs position={polygonCenter(positions)} size={logoSize(positions)} body={<Popup>
-                                                                                    {floorList(element["connectedFloors"], callbackChangeFloor)}
-                                                                                   </Popup>
-                                                                                  }
+        {floorList(element["connectedFloors"], callbackChangeFloor)}
+      </Popup>
+      }
       />
     </Polygon>
   }
-  else if (element["type"] === "L")
-  {
+  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: () => callbackRoomSelected(element["id"])}}>
+    return <Polygon positions={positions} key={element["id"] + color} color={color} evenHandlers={{ click: () => callbackRoomSelected(element["id"]) }}>
       <Tooltip>{roomNameList(element["names"])}</Tooltip>
       <Lift position={polygonCenter(positions)} size={logoSize(positions)} body={<Popup>
-                                                                                  {floorList(element["connectedFloors"], callbackChangeFloor)}
-                                                                                 </Popup>
-                                                                                }
+        {floorList(element["connectedFloors"], callbackChangeFloor)}
+      </Popup>
+      }
       />
     </Polygon>
   }
-  else if (element["type"] === "T")
-  {
-    return <Polygon positions={positions} key={element["id"] + color} color={color} evenHandlers={{click: () => callbackRoomSelected(element["id"])}}>
+  else if (element["type"] === "T") {
+    return <Polygon positions={positions} key={element["id"] + color} color={color} evenHandlers={{ click: () => callbackRoomSelected(element["id"]) }}>
       <Tooltip>{roomNameList(element["names"])}</Tooltip>
-      <Toilet position={polygonCenter(positions)} size={logoSize(positions)}/>
+      <Toilet position={polygonCenter(positions)} size={logoSize(positions)} />
     </Polygon>
   }
-  else if (element["type"] === "R")
-  {
+  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: () => callbackRoomSelected(element["id"])}}>
+    return <Polygon positions={positions} key={element["id"] + color} color={color} eventHandlers={{ click: () => callbackRoomSelected(element["id"]) }}>
       <Tooltip>{roomNameList(element["names"])}</Tooltip>
     </Polygon>
   }
-  else if (element["type"] === "C")
-  {
+  else if (element["type"] === "C") {
     // In this case it is a corridor
-    return <Polygon positions={positions} key={element["id"] + color} color={"peru"}/>
+    return <Polygon positions={positions} key={element["id"] + color} color={"peru"} />
   }
 }
 
-function list_polygons(request, center, callbackRoomSelected, selectedRoom, callbackChangeFloor)
-{
+function list_polygons(request, center, callbackRoomSelected, selectedRoom, callbackChangeFloor) {
   // 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)
   let polygons = [];
-  for (const ind in request)
-  {
+  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) => 
-    {
+    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
@@ -264,8 +246,7 @@ function list_polygons(request, center, callbackRoomSelected, selectedRoom, call
   return polygons;
 }
 
-function buildPols(request, callbackRoomSelected, selectedRoom, callbackChangeFloor)
-{
+function buildPols(request, callbackRoomSelected, selectedRoom, callbackChangeFloor) {
   // This function just calls the list_polygons one with appropriate parameters (precalculate center)
   const minMaxXY = min_max(request);
   const minX = minMaxXY[0];
@@ -277,8 +258,7 @@ function buildPols(request, callbackRoomSelected, selectedRoom, callbackChangeFl
   return polygons;
 }
 
-function Map({callbackRoomSelected, selectedRoom, floorID, callbackChangeFloor})
-{
+function Map({ callbackRoomSelected, selectedRoom, floorID, callbackChangeFloor }) {
   // 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
@@ -286,12 +266,11 @@ function Map({callbackRoomSelected, selectedRoom, floorID, callbackChangeFloor})
   const [floor, setFloor] = useState(null);
   const [error, setError] = useState(null);
   // We use the useEffect hook to fetch the data to build the Map
-  useEffect(() =>
-  {
-    fetch(API_URL + "get_floor/"+floorID)
-    .then(response => response.json())
-    .then(data => {setLoading(false); setFloor(data)})
-    .catch((error) => {setError("API unreachable");});
+  useEffect(() => {
+    fetch(API_URL + "get_floor/" + floorID)
+      .then(response => response.json())
+      .then(data => { setLoading(false); setFloor(data) })
+      .catch((error) => { setError("API unreachable"); });
   }, [floorID]);
   // We distinguish wether to print an error, a loading message
   // or the map if we got the answer
@@ -299,20 +278,17 @@ function Map({callbackRoomSelected, selectedRoom, floorID, callbackChangeFloor})
   const corner2 = L.latLng(50, 100);
   const bounds = L.latLngBounds(corner1, corner2);
 
-  if (error != null)
-  {
+  if (error != null) {
     return <MapContainer center={[0, 0]} zoom={4} scrollWheelZoom={true} style={{ flexGrow: '1' }} maxBounds={bounds} maxBoundsViscosity={1.0}>
-            <Popup position={[0,0]}>{error}</Popup>
-           </MapContainer>;
+      <Popup position={[0, 0]}>{error}</Popup>
+    </MapContainer>;
   }
-  else if (loading)
-  {
+  else if (loading) {
     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>;
+      <Popup position={[0, 0]}>Loading map</Popup>
+    </MapContainer>;
   }
-  else
-  {
+  else {
     const request = floor["places"];
     /*const createPolygons = React.useCallback((request, callbackRoomSelected, selectedRoom) => {
       return buildPols(request, callbackRoomSelected, selectedRoom);