diff --git a/src/Map.js b/src/Map.js
index d955779..097146e 100644
--- a/src/Map.js
+++ b/src/Map.js
@@ -5,6 +5,7 @@ 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 request2 from "./M-GN1-2.json"
@@ -45,7 +46,7 @@ function min_max(request)
   return [minX, maxX, minY, maxY];
 }
 
-function list_polygons(request, center, ratio, ind)
+function list_polygons(request, center, ratio, ind, cb)
 {
   let polygons = [];
   //let tarace = 0;
@@ -66,13 +67,13 @@ function list_polygons(request, center, ratio, ind)
           return [(z[1]-center[1])/25, (z[0]-center[0])/25];
         }
       })
-    })).map((x) => {return <Polygon positions={x} key={k} pathOptions={{color: 'grey'}}><Popup>Popup</Popup></Polygon>})];
+    })).map((x) => {return <Polygon positions={x} key={k} pathOptions={{color: 'grey'}} onClick={() => cb(k)}><Tooltip>{k}</Tooltip></Polygon>})];
 //    })).map((x) => {tarace = tarace+1; return <Polygon positions={x} key={k} pathOptions={{color: 'grey'}}><Tooltip permanent direction={tarace % 2 === 0 ? "bottom" : "top"}>{k}</Tooltip><Popup>Popup</Popup></Polygon>})];
   }
   return polygons;
 }
 
-function layers_list(requestList)
+function layers_list(requestList, cb)
 {
   let layers = [];
   requestList.forEach( (request, ind) =>
@@ -87,17 +88,20 @@ function layers_list(requestList)
 //    console.log((maxY-minY)/2284);
 //    console.log((maxX-minX)/135);
 //    console.log(ratio);
-    const polygons = list_polygons(request, center, ratio, ind);
-    layers = [...layers, <LayersControl.BaseLayer checked={ind === 1 ? true : false} name={"Etage "+String(ind+2)} key={ind}><LayerGroup> {polygons} </LayerGroup></LayersControl.BaseLayer>];
+    const polygons = list_polygons(request, center, ratio, ind, cb);
+    layers = [...layers, <LayersControl.BaseLayer checked={ind === 1 ? true : false} name={"Floor "+String(ind+2)} key={ind}><LayerGroup> {polygons} </LayerGroup></LayersControl.BaseLayer>];
   })
   return layers;
 }
 
-function Map()
+function Map({callbackRoomSelected, selectedRoom})
 {
-  const buildLayers = React.useCallback((request2, request3, request4) => {
-    return layers_list([request2, request3, request4]);
-    }, [request2, request3, request4]);
+  // 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
+  const buildLayers = React.useCallback((request2, request3, request4, callbackRoomSelected) => {
+    return layers_list([request2, request3, request4], callbackRoomSelected);
+  }, [request2, request3, request4, callbackRoomSelected]);
 
   const layers = buildLayers(request2, request3, request4);
   return <MapContainer center={[0,0]} zoom={4} scrollWheelZoom={true} style={{flexGrow: '1'}}>