Laboratory 2: Interact with smart building on a map
Online Spring School 2021
1. Introduction
In this laboratory, you will learn how to interact with a smart building through a map. You will also learn
how to store and query data from relational databases.
1.1. Database structure
During the entire series of laboratories, we will use a smart city as an example. The smart city is made of
buildings, each of which is made of rooms. The sample code provided with the laboratory sets up the
database with the following tables:
The buildings table:
•
•
•
Id (unique, type integer)
name (string)
geom (polygon geometry object).
The rooms table:
•
•
•
•
•
id (unique, integer)
name (string)
capacity (integer)
building_id (integer, foreign key refering to the building in which the room is located
geom (polygon geometry object)
The devices table:
•
•
•
•
id (unique, integer)
type (string)
geom (polygon geometry object)
value (string)
2. Set the buildings and rooms location
Building and rooms have a name and an id which was already populated in the previous sessions, but the
geom column is empty. Fill is with the position of the building.
To get the coordinates, use epsg.io with the Lambert 93 (EPSG:2154) projection and locate the points you
want on the map. The rooms must appear at the following positions (close to 845361, 6521801, the rooms
are in blue and building is in yellow):
•
•
•
•
•
•
Get the coordinates on the map and write them down
Create a file per room/building containing the position described as a GeoJSON Polygon
Add a route /building/geom in the JS code to UPDATE the geom property of a building
• use ST_GeomFromGeoJson and St_AsText to convert GeoJSON to PostGIS geometry objects format
Similarly, add a route /room/geom in the JS code to UPDATE the geom property of a room
Use these routes to insert the buildings and rooms polygons in the database
Check the data is correct by fetching the rooms and buildings
• Be careful, when you get the buildings, the positions should be projected by PostGIS into
lat/lon coordinates using EPSG:4326 since it is the default projection in Leaflet.
3. Display the buildings and rooms on the map
Now that the buildings and rooms are in the database, we are going to put them on a map.
•
•
Get all the rooms and buildings as GeoJSON using previously defined queries.
Then use the GeoJSON to display the rooms and buildings on a map.
o See the Leaflet documentation here : https://leafletjs.com/reference-1.7.1.html#geojson
and an example here : https://leafletjs.com/examples/geojson/
o Use different colors for rooms and buildings
o Check if the positions of the buildings and rooms on the map are as you expected
4. Set the devices location and display them on the map
•
•
•
•
As we previously defined a route to add the rooms’ location, define a route to create a device with
its position.
Then use it with insomnia to create devices:
o Create a lamp with status on or off
o Create a temperature sensor with the measured temperature (in degrees Celsius) as status
Get the device positions in the web app and display them on the map as points.
Add a pop-up to display additional data about a device (id, type, and status) when you click on it.
5. Update devices status
•
•
Add a route to edit a device status.
Use it to update the devices status and check if the new statuses are visible on the map.
6. Open Section
You can now improve the app as you wish. Several ideas are provided:
•
•
•
Use an icon to display each device, each type of device having a different icon
Fancy temperature devices
o Create one or several temperature devices in every room (store them in the devices)
o Create a route to update the value of a temperature device and use it through insomnia
to change the measured temperature (or create a form in the web app if you have time)
o Display a red icon when the temperature is above 30°C
o Display a blue icon when the temperature is below 15°C
o Display a green icon when the temperature is between 15°C and 30°C
Lamp scenario
o Create one or several lamps in every room (store them in the devices table)
o Display all lamps is the map
▪ Use a different icon depending if the lamp is on or off
o Create a route to set a lamp status
▪ When you click on a lamp, call this route to change toggle the status
o Update the page to see the change
o
Add buttons in the web app to turn on or off all the lamps in a room or a building. You will
need to create a new route which select only the lamps in a specified room or building.
o
•
When you click on the map, and not on a specific lamp, toggle all the lamps with are within
10 m of the clicked point.
Heater scenario
o Imagine clicking on the map is equivalent to placing a heater where you click.
o When you click on the map, the heater placed where you clicked increase the temperature
by 2 degrees in the 30 m around itself.
o At the same time, the temperature further away is lowered by 1 degree.
o Create a route to update the temperature measured by the devices
o Call this route on a click on the map
o Update the map after a click to see the evolution of the temperatures