M README.md → README.md

@@ -31,6 +31,20 @@ [Create a mapbox account](https://account.mapbox.com/auth/signup/) if you don't have any and [generate your token for free](https://docs.mapbox.com/help/getting-started/access-tokens/#:~:text=You%20can%20find%20your%20access,using%20the%20Mapbox%20Tokens%20API.).
 
 There is no need to setup a payment method as long as you don't exceed [the temporary geocoding api free rate ](https://www.mapbox.com/pricing#temporary-geocoding-api), but if you do so, the app will still work and geocoding will simply disable till the end of the ongoing month.
 
+Copy the mapbox token in the .env file as a value for "MAPBOX_TOKEN" variable to start using geocoding and map features;
+
+#### Tiles server
+
+You can use the TOKEN_FREE_TILES variables in the .env file to setup a tiles server used by the map features. By default, we use the [© OpenStreetMap ](https://www.openstreetmap.org/copyright) test server. 
+
+Make sure to respect the copyrights of the tiles server you setup, or those from [© OpenStreetMap ](https://www.openstreetmap.org/copyright) if you keep the default settings.
+
+> :warning: Be aware that some services might require a token to use their tiles server.
+>
+> We don't have yet developed a way to obfuscate this token from the users.
+
+> :warning: This means anyone accessing the application will be able to use this token on your behalf, which exposes you to substantial risks (financial, legal, reputational, operational) that may affect you and the disponibility of the service.
+
 ### Installing
 
 Clone the repo locally:
@@ -83,10 +97,6 @@ yarn dev
 ```
 
 The frontend is now accessible on http://localhost:3000
-
-#### Geocoding in development (optional)
-
-Copy your Mapbox token in your .env file under MAPBOX_TOKEN variable and run the app again.
 
 ### Backend
 

M frontend/.env.example → frontend/.env.example

@@ -18,4 +18,8 @@ 
 MAPBOX_TOKEN=
 MAPBOX_URL=https://api.mapbox.com/
 
+#TOKEN_FREE_TILES_URL=https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
+#TOKEN_FREE_TILES_LAYER_ATTRIBUTION=© <a target="_blank" href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors;
+
 # FALLBACK_LANGUAGE=en
+

M frontend/containers/Map/Map.tsx → frontend/containers/Map/Map.tsx

@@ -4,9 +4,13 @@ import MapWrapper from './MapWrapper';
 import useMapStore from '../../stores/useMapStore';
 import Bounds from './Bounds';
 
-const DEV_TILES_URL =
-  process.env.DEV_TILES_URL ||
+const TOKEN_FREE_TILES_URL =
+  process.env.TOKEN_FREE_TILES_URL ||
   'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
+
+  const TOKEN_FREE_TILES_LAYER_ATTRIBUTION = 
+  process.env.TOKEN_FREE_TILES_LAYER_ATTRIBUTION ||
+  '© <a target="_blank" href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
 
 const Map = () => {
   const markers = useMapStore(s => s.markers);
@@ -15,7 +19,7 @@ return (
     <MapWrapper>
       <MapContainer style={{height: '100%', width: '100%'}} zoomControl={false}>
         <Bounds />
-        <TileLayer key="tiles" url={DEV_TILES_URL} />
+        <TileLayer key="tiles" url={TOKEN_FREE_TILES_URL} attribution={TOKEN_FREE_TILES_LAYER_ATTRIBUTION}/>
         <MapController />
         {markers}
       </MapContainer>

M frontend/public/leaflet_reset.css → frontend/public/leaflet_reset.css

@@ -24,6 +24,11 @@ .leaflet-container a {
     color: inherit;
 }
 
+.leaflet-control-attribution a {
+    color:blue;
+    text-decoration: underline;
+}
+
 .leaflet-popup-content p {
     margin: 0;
 }