diff --git a/src/common/MapGL.tsx b/src/common/MapGL.tsx
index bbeadb0..9cbb55a 100644
--- a/src/common/MapGL.tsx
+++ b/src/common/MapGL.tsx
@@ -3,7 +3,7 @@ import { Beenhere } from "@mui/icons-material";
 import { useThemeType } from "hooks";
 import moment from "moment";
 import React, { useEffect, useState } from "react";
-import Map, { Marker } from "react-map-gl/mapbox-legacy";
+import Map, { Marker } from "react-map-gl/mapbox";
 
 const MAPBOX_TOKEN = import.meta.env.VITE_MAPBOX_ACCESS_TOKEN;
 
diff --git a/src/maps/MapBase.tsx b/src/maps/MapBase.tsx
index 3ae82b0..fbd1057 100644
--- a/src/maps/MapBase.tsx
+++ b/src/maps/MapBase.tsx
@@ -33,7 +33,7 @@ import { GeometryMapping, shapeFromCoords } from "models/GeometryMapping";
 import { FeatureCollection, Feature } from "geojson";
 import DrawController from "./mapControllers/drawController";
 //import { Geometry } from "geojson";
-import Map, { MapRef, Marker, MarkerDragEvent } from "react-map-gl/mapbox-legacy";
+import Map, { MapRef, Marker, MarkerDragEvent } from "react-map-gl/mapbox";
 import { getDistanceUnit } from "utils";
 import { MapMouseEvent } from "mapbox-gl";
 import { makeStyles } from "@mui/styles";
diff --git a/src/maps/mapControllers/Geocoder.tsx b/src/maps/mapControllers/Geocoder.tsx
index 162bc97..00f1bc7 100644
--- a/src/maps/mapControllers/Geocoder.tsx
+++ b/src/maps/mapControllers/Geocoder.tsx
@@ -1,4 +1,4 @@
-import { ControlPosition, useMap } from "react-map-gl/mapbox-legacy";
+import { ControlPosition, useMap } from "react-map-gl/mapbox";
 import MapboxGeocoder, { Result } from "@mapbox/mapbox-gl-geocoder";
 import { useEffect, useState } from "react";
 
diff --git a/src/maps/mapControllers/drawController.tsx b/src/maps/mapControllers/drawController.tsx
index a173888..00e3a09 100644
--- a/src/maps/mapControllers/drawController.tsx
+++ b/src/maps/mapControllers/drawController.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useRef } from "react";
-import { useMap } from "react-map-gl/mapbox-legacy";
+import { useMap } from "react-map-gl/mapbox";
 import { FeatureCollection } from "geojson";
 import MapboxDraw from "@mapbox/mapbox-gl-draw";
 
diff --git a/src/maps/mapLayers/geoMapLayer.tsx b/src/maps/mapLayers/geoMapLayer.tsx
index 15157b2..5b90854 100644
--- a/src/maps/mapLayers/geoMapLayer.tsx
+++ b/src/maps/mapLayers/geoMapLayer.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from "react";
-import { Layer, Source } from "react-map-gl/mapbox-legacy";
+import { Layer, Source } from "react-map-gl/mapbox";
 import { FeatureCollection } from "geojson";
 
 interface Props {
diff --git a/src/maps/mapMarkers/Markers.tsx b/src/maps/mapMarkers/Markers.tsx
index 9c1024e..27cddd4 100644
--- a/src/maps/mapMarkers/Markers.tsx
+++ b/src/maps/mapMarkers/Markers.tsx
@@ -5,7 +5,7 @@ import { useMobile } from "hooks";
 import { clone } from "lodash";
 import { pond } from "protobuf-ts/pond";
 import React, { useCallback, useEffect, useState } from "react";
-import { Marker } from "react-map-gl/mapbox-legacy";
+import { Marker } from "react-map-gl/mapbox";
 
 //interface for markers
 export interface MarkerData {
diff --git a/tsconfig.app.json b/tsconfig.app.json
index b3a1d2e..d54ec98 100644
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -1,9 +1,9 @@
 {
   "compilerOptions": {
     "baseUrl": "src",
-    "target": "ES6",
+    "target": "ES2020",
     "useDefineForClassFields": true,
-    "lib": ["ES6", "DOM", "DOM.Iterable"],
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "module": "ESNext",
     "skipLibCheck": true,