Switch to Stadia Maps with API key

frontend/components/ParisMap.js

@@ -17,6 +17,7 @@ export const MAPSQUARE_HEIGHT = 0.0022358;
 // Default latitude and longitude values for the center of the map
 export const DEFAULT_MAP_CENTER_LAT = 48.858859;
 export const DEFAULT_MAP_CENTER_LNG = 2.3470599;
+const API_KEY = process.env.REACT_APP_STADIA_API_KEY;
 
 export class ParisMap extends React.Component {
     constructor(props) {
@@ -87,7 +88,7 @@ export class ParisMap extends React.Component {
                         // Retrieves Map image
 
                         // HOT option
-                        url="http://stamen-tiles-a.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png"
+                        url={`https://tiles.stadiamaps.com/tiles/stamen_toner_lite/{z}/{x}/{y}.png?api_key=${API_KEY}`}
                     />
 
                     {Object.keys(this.props.layers)

package.json

@@ -15,6 +15,7 @@
         "babel-loader": "^8.2.5",
         "bootstrap": "^5.2.0",
         "css-loader": "^6.7.1",
+        "dotenv-webpack": "^8.0.1",
         "file-loader": "6.2.0",
         "leaflet": "^1.8.0",
         "mini-css-extract-plugin": "^2.6.1",

webpack.config.js

@@ -3,6 +3,7 @@ const BundleTracker = require("webpack-bundle-tracker");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const ESLintPlugin = require("eslint-webpack-plugin");
 const TerserPlugin = require("terser-webpack-plugin");
+const Dotenv = require('dotenv-webpack');
 
 module.exports = {
     context: __dirname,
@@ -17,7 +18,11 @@ module.exports = {
     plugins: [
         new BundleTracker({filename: "./webpack-stats.json"}),
         new MiniCssExtractPlugin({filename: "[name].bundle.css"}),
-        new ESLintPlugin()
+        new ESLintPlugin(),
+        new Dotenv({
+            path: './.env', // Path to .env file (this is the default)
+            safe: true, // load .env.example (defaults to "false" which does not use dotenv-safe)
+        })
     ],
     module: {
         rules: [