Merge pull request #279 from dhmit/main-map-fix

Switch to Stadia Maps with API key

frontend/components/ParisMap.js

@@ -16,6 +16,15 @@ 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;
+
+
+function getTilesUrl() {
+    if (!API_KEY) {
+        return "http://stamen-tiles-a.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.png";
+    }
+    return `https://tiles.stadiamaps.com/tiles/stamen_toner_lite/{z}/{x}/{y}.png?api_key=${API_KEY}`;
+}
 
 class ParisMap extends React.Component {
     constructor(props) {
@@ -93,7 +102,7 @@ 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={getTilesUrl()}
                     />
 
                     {Object.keys(this.props.layers)

package.json

@@ -16,6 +16,7 @@
         "bootstrap": "^5.2.0",
         "buffer": "^6.0.3",
         "css-loader": "^6.7.1",
+        "dotenv-webpack": "^8.0.1",
         "file-loader": "6.2.0",
         "fs": "^0.0.1-security",
         "i18next": "^23.7.16",

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: [