[MAP] As a user, using the map, I want to switch between base/background map and displays/hide specific layers

[fe51]

Pitch

Depending on their usage, users may prefer different map backgrounds (base maps): OpenStreetMap (OSM), IGN or Satellite.

Also, some specific map layers may be useful for analyzing alerts or camera positions

What is done currently

In the app, maps are present in different pages :

• In the alerts page ( = /alert) : the map displays the position of cameras that detected the alert and a estimated position of the alert
  - From this page, by default, the map is small but there is a button to display the map in full size
• In the dashboard page ( = /dahsboard) : in the tab "Map" icon, the map displays the position of all the cameras of the current user
  • From this page, the map is big by default
• In the live streaming (hidden feature) : don't bother looking at this one

The focus here is on the map of the Alerts page and the Dashboard page

Currently, the map displays a single OpenStreetMap raster tile layer (Whether in the alert section, in full-screen mode or in dashboard page). See screens below

What has to be done

On the Alerts page (In full screen mode) and Dashboard camera page , add a layer control allowing users to :

• Switch between 3 base/background maps :
  • OSM (current one and the one to set as default)
  • IGN
  • Satellite
    -> see details about sources in guidelines section
• Enable or disable predefined overlay layer, especially : DFCI grid

On the Alerts page, layer management could be limiting outside of full screen mode and prevent proper viewing of the map information for the current alert. Therefore, do not offer this option when displaying the map in small size in the alert section -> to be discussed

On the other hand, if layer management is only offered in full screen mode, it would be good to keep the selected map background once the user exits full screen mode and returns to the alerts page → If this is too complicated at first, this functionality can be omitted.

• About design implementation of the layer “button/modal", it could look like the one on this website (with different sections : basemaps, layers) : https://rnb.beta.gouv.fr/carte?coords=48.35937%2C3.77967%2C6.04
  See scrennshots below

Tips - technical guidelines

• It might be relevant to perform updates in

  new-pyro-platform/src/components/Common/Map/TemplateMap.tsx

  Line 12 in 305f4f4

  export const TemplateMap = ({

• Data sources

  • OSM : keep the current one
  • IGN
    • an example for leaflet https://geoservices.ign.fr/documentation/services/utilisation-web/affichage-wmts/leaflet-et-wmts
    • LAYER : GEOGRAPHICALGRIDSYSTEMS.MAPS (maybe check in the csv here or the documentation here or look for example on the internet)
    • this URL is functionnal https://data.geopf.fr/annexes/ressources/vectorTiles/styles/PLAN.IGN/standard.json and its style can be easily custom with maputnik (see tutorial here)
    • attribution : © IGN
  • Satellite : you can choose any datasource which is open and available worldwide -> To be detailed
  • DFCI Grid : Same source as IGN but GEOGRAPHICALGRIDSYSTEM.DFCI layer

• The OSM basemap currently relies on raster tiles (PNG images) served from a standard tile server.
  If other layers are to be provided through vector tile services, it could be technically consistent and potentially beneficial to migrate the OSM basemap to a vector-tile source as well.

• A ressource from data.gouv about vector tile usage

Thanks a lot for your help 😸 ! Happy to discuss it !