fix: map display issue

netlify.toml

@@ -3,7 +3,7 @@
 
 base = "services/web/"
 publish = "build"
-command = "npm run build"
+command = "yarn run build"
 [[redirects]]
     from = "/*"
     to = "index.html"

services/web/package.json

@@ -25,7 +25,8 @@
     "react-scripts": "4.0.1",
     "react-swipeable-views": "^0.13.9",
     "react-swipeable-views-utils": "^0.14.0-alpha.0",
-    "web-vitals": "^0.2.4"
+    "web-vitals": "^0.2.4",
+    "worker-loader": "^3.0.8"
   },
   "scripts": {
     "start": "react-scripts start",

services/web/src/Components/Home/index.js

@@ -17,6 +17,7 @@ import {
 import DashboardIcon from "@material-ui/icons/Dashboard";
 import { Bar } from "react-chartjs-2";
 import ReactMapGL, { Marker, Popup } from "react-map-gl";
+import mapboxgl from "mapbox-gl";
 import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft";
 import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight";
 import SwipeableViews from "react-swipeable-views";
@@ -26,6 +27,9 @@ import clusters from "../../clusters.json";
 import { getRandomColor } from "../utils/randomColor";
 import { lightenDarkenColor } from "../utils/lightenColor";
 
+// eslint-disable-next-line import/no-webpack-loader-syntax
+mapboxgl.workerClass = require("worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker").default;
+
 const AutoPlaySwipeableViews = autoPlay(SwipeableViews);
 
 const useStyles = makeStyles((theme) => ({

services/web/src/Components/admin/AdminDashBoard/index.js

@@ -12,6 +12,7 @@ import {
   TextField,
 } from "@material-ui/core";
 import ReactMapGL, { Marker, Popup } from "react-map-gl";
+import mapboxgl from "mapbox-gl";
 import Menu from "@material-ui/core/Menu";
 import MenuItem from "@material-ui/core/MenuItem";
 import { Bar } from "react-chartjs-2";
@@ -22,6 +23,9 @@ import { vaccinationStateDetails } from "./vaccinationStateDetails";
 import { logout } from "../../utils/logout";
 import { refreshToken } from "../../utils/refreshToken";
 
+// eslint-disable-next-line import/no-webpack-loader-syntax
+mapboxgl.workerClass = require("worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker").default;
+
 const useStyles = makeStyles((theme) => ({
   submitBtn: {
     [theme.breakpoints.down("lg")]: {

services/web/src/Components/su/SUDashBoard/index.js

@@ -13,13 +13,17 @@ import {
 import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 import { AccessTokenContext } from "../../../Contexts/AccessToken";
 import ReactMapGL, { Marker, Popup } from "react-map-gl";
+import mapboxgl from "mapbox-gl";
 import { Bar } from "react-chartjs-2";
 import { ErrorMessage, Field, Form, Formik } from "formik";
 import { ErrorAlert } from "../../common/ErrorAlert";
 import { Alert } from "@material-ui/lab";
 import { isTokenExpired, refreshToken } from "../../utils/refreshToken";
 import { logout } from "../../utils/logout";
 
+// eslint-disable-next-line import/no-webpack-loader-syntax
+mapboxgl.workerClass = require("worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker").default;
+
 export const SUDashBoard = ({ history }) => {
   const {
     user: {

services/web/src/Components/su/ViewAdmin/index.js

@@ -13,6 +13,7 @@ import {
 } from "@material-ui/core";
 import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 import ReactMapGL, { Marker, Popup } from "react-map-gl";
+import mapboxgl from "mapbox-gl";
 import { Bar } from "react-chartjs-2";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import { useParams } from "react-router-dom";
@@ -22,6 +23,9 @@ import { refreshToken } from "../../utils/refreshToken";
 import { vaccinationStateDetails } from "../../admin/AdminDashBoard/vaccinationStateDetails";
 import { useQuery } from "../../hooks/useQuery";
 
+// eslint-disable-next-line import/no-webpack-loader-syntax
+mapboxgl.workerClass = require("worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker").default;
+
 const useStyles = makeStyles((theme) => ({
   submitBtn: {
     [theme.breakpoints.down("lg")]: {

services/web/src/Components/user/UserDashBoard/index.js

@@ -3,8 +3,12 @@ import { Button, Container, Typography } from "@material-ui/core";
 import { useContext, useEffect, useState } from "react";
 import { AccessTokenContext } from "../../../Contexts/AccessToken";
 import ReactMapGL, { Layer, Marker, Popup, Source } from "react-map-gl";
+import mapboxgl from "mapbox-gl";
 import { point, nearestPoint, featureCollection } from "@turf/turf";
 
+// eslint-disable-next-line import/no-webpack-loader-syntax
+mapboxgl.workerClass = require("worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker").default;
+
 export const UserDashBoard = ({ history }) => {
   const {
     user: {

services/web/yarn.lock

@@ -13413,6 +13413,14 @@ worker-farm@^1.7.0:
   dependencies:
     errno "~0.1.7"
 
+worker-loader@^3.0.8:
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/worker-loader/-/worker-loader-3.0.8.tgz#5fc5cda4a3d3163d9c274a4e3a811ce8b60dbb37"
+  integrity sha512-XQyQkIFeRVC7f7uRhFdNMe/iJOdO6zxAaR3EWbDp45v3mDhrTi+++oswKNxShUNjPC/1xUp5DB29YKLhFo129g==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
 worker-rpc@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/worker-rpc/-/worker-rpc-0.1.1.tgz#cb565bd6d7071a8f16660686051e969ad32f54d5"