Merge pull request #31 from azra-l/fix-map-bug

Fix map bug

react-app/package.json

@@ -22,7 +22,8 @@
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "styled-components": "^5.3.5",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "worker-loader": "^3.0.8"
   },
   "scripts": {
     "start": "react-scripts start",

react-app/src/routes/detailed-results/detailed-results.jsx

@@ -7,9 +7,16 @@ import { BsCalendarFill } from "react-icons/bs";
 import { MdLocationPin } from "react-icons/md";
 import { GoLinkExternal } from "react-icons/go";
 import Map, { Marker } from "react-map-gl";
+import mapboxgl from "mapbox-gl";
 import "mapbox-gl/dist/mapbox-gl.css";
+
 import { apiBaseUrl, appBaseUrl } from "../../utilities/base-url";
 
+// Temp bug fix: https://github.com/visgl/react-map-gl/issues/1266#issuecomment-753686953
+// eslint-disable-next-line import/no-webpack-loader-syntax
+mapboxgl.workerClass = require("worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker").default;
+
+
 export default function DetailedResults() {
   const location = useLocation();
   const festival = location.state;