feat: replace StaticMap By Maplibre

package.json

@@ -20,6 +20,12 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@deck.gl/core": "^8.9.32",
+    "@deck.gl/extensions": "^8.9.32",
+    "@deck.gl/geo-layers": "^8.9.32",
+    "@deck.gl/layers": "^8.9.32",
+    "@deck.gl/mesh-layers": "^8.9.32",
+    "@deck.gl/react": "^8.9.32",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.17",
@@ -29,18 +35,18 @@
     "@loaders.gl/i3s": "^4.0.0-beta.2",
     "@loaders.gl/loader-utils": "^4.0.0-beta.2",
     "@loaders.gl/tiles": "^4.0.0-beta.2",
-    "@luma.gl/core": "^8.5.14",
     "@math.gl/proj4": "^3.6.3",
     "@probe.gl/stats": "^4.0.4",
     "@reduxjs/toolkit": "^1.9.5",
-    "deck.gl": "^8.8.3",
+    "apache-arrow": "^13.0.0",
     "html2canvas": "^1.4.1",
+    "maplibre-gl": "^3.5.2",
     "normalize.css": "^8.0.1",
     "prop-types": "^15.8.1",
     "react": "^17.0.2",
     "react-color": "^2.19.3",
     "react-dom": "^17.0.2",
-    "react-map-gl": "^5.0.0",
+    "react-map-gl": "^7.1.6",
     "react-redux": "^8.1.1",
     "react-responsive": "^9.0.0-beta.8",
     "react-router-dom": "^6.2.1",

src/components/comparison/comparison-side/comparison-side.spec.tsx

@@ -18,6 +18,21 @@ import { MemoryUsagePanel } from "../../memory-usage-panel/memory-usage-panel";
 import { setupStore } from "../../../redux/store";
 import { setDragMode } from "../../../redux/slices/drag-mode-slice";
 
+jest.mock("@deck.gl/geo-layers", () => ({
+  load: jest.fn(),
+}));
+jest.mock("@deck.gl/layers", () => ({
+  load: jest.fn(),
+}));
+jest.mock("maplibre-gl", () => ({
+  load: jest.fn(),
+}));
+jest.mock("@loaders.gl/i3s", () => ({
+  load: jest.fn(),
+}));
+jest.mock("@loaders.gl/3d-tiles", () => ({
+  load: jest.fn(),
+}));
 jest.mock("@loaders.gl/core");
 jest.mock("../../deck-gl-wrapper/deck-gl-wrapper");
 jest.mock("../../main-tools-panel/main-tools-panel");

src/components/deck-gl-wrapper/deck-gl-wrapper.spec.tsx

@@ -18,10 +18,22 @@ jest.mock("@deck.gl/react", () => {
     return null;
   });
 });
+jest.mock("@deck.gl/geo-layers", () => ({
+  load: jest.fn(),
+}));
+jest.mock("@deck.gl/layers", () => ({
+  load: jest.fn(),
+}));
+jest.mock("maplibre-gl", () => ({
+  load: jest.fn(),
+}));
+jest.mock("@loaders.gl/i3s", () => ({
+  load: jest.fn(),
+}));
+jest.mock("@loaders.gl/3d-tiles", () => ({
+  load: jest.fn(),
+}));
 jest.mock("@deck.gl/core");
-jest.mock("@deck.gl/layers");
-jest.mock("@deck.gl/geo-layers");
-jest.mock("react-map-gl");
 jest.mock("../../utils/debug/build-minimap-data");
 jest.mock("../../utils/debug/texture-selector-utils");
 jest.mock("../../utils/debug/frustum-utils");
@@ -61,7 +73,7 @@ import { setupStore } from "../../redux/store";
 import { setColorsByAttrubute } from "../../redux/slices/colors-by-attribute-slice";
 import { setDragMode } from "../../redux/slices/drag-mode-slice";
 import { setDebugOptions } from "../../redux/slices/debug-options-slice";
-import { addBaseMap } from "../../redux/slices/base-maps-slice"
+import { addBaseMap } from "../../redux/slices/base-maps-slice";
 
 const simpleCallbackMock = jest.fn().mockImplementation(() => {
   /* Do Nothing */
@@ -336,7 +348,11 @@ describe("Deck.gl I3S map component", () => {
 
     it("Should render pickable with auto highlighting", () => {
       const store = setupStore();
-      callRender(renderWithProvider, { pickable: true, autoHighlight: true }, store);
+      callRender(
+        renderWithProvider,
+        { pickable: true, autoHighlight: true },
+        store
+      );
       const { pickable, autoHighlight } = Tile3DLayer.mock.lastCall[0];
       expect(pickable).toBe(true);
       expect(autoHighlight).toBe(true);
@@ -509,8 +525,7 @@ describe("Deck.gl I3S map component", () => {
 
   describe("Render TerrainLayer", () => {
     const store = setupStore();
-    store.dispatch(
-      addBaseMap({ id: "Terrain", mapUrl: "", name: "Terrain" }));
+    store.dispatch(addBaseMap({ id: "Terrain", mapUrl: "", name: "Terrain" }));
     it("Should render terrain", () => {
       callRender(renderWithProvider, undefined, store);
       expect(TerrainLayer).toHaveBeenCalled();
@@ -519,7 +534,8 @@ describe("Deck.gl I3S map component", () => {
     it("Should call onTerrainTileLoad", () => {
       const store = setupStore();
       store.dispatch(
-        addBaseMap({ id: "Terrain", mapUrl: "", name: "Terrain" }));
+        addBaseMap({ id: "Terrain", mapUrl: "", name: "Terrain" })
+      );
       const { rerender } = callRender(renderWithProvider, undefined, store);
       const { onTileLoad } = TerrainLayer.mock.lastCall[0];
       const terrainTile = {

src/components/deck-gl-wrapper/deck-gl-wrapper.tsx

@@ -1,3 +1,4 @@
+import { Map as MaplibreMap } from "react-map-gl/maplibre";
 import DeckGL from "@deck.gl/react";
 import { LineLayer, ScatterplotLayer } from "@deck.gl/layers";
 import { TerrainLayer, Tile3DLayer } from "@deck.gl/geo-layers";
@@ -14,7 +15,6 @@ import {
   View,
 } from "@deck.gl/core";
 import { useEffect, useMemo, useState, useRef } from "react";
-import { StaticMap } from "react-map-gl";
 import { CONTRAST_MAP_STYLES } from "../../constants/map-styles";
 import {
   NormalsDebugData,
@@ -58,7 +58,10 @@ import {
   selectBoundingVolumeColorMode,
   selectBoundingVolumeType,
 } from "../../redux/slices/debug-options-slice";
-import { selectBaseMaps, selectSelectedBaseMapId } from "../../redux/slices/base-maps-slice";
+import {
+  selectBaseMaps,
+  selectSelectedBaseMapId,
+} from "../../redux/slices/base-maps-slice";
 
 const TRANSITION_DURAITON = 4000;
 const INITIAL_VIEW_STATE = {
@@ -212,8 +215,8 @@ export const DeckGlWrapper = ({
   const baseMaps = useAppSelector(selectBaseMaps);
   const selectedBaseMapId = useAppSelector(selectSelectedBaseMapId);
   const selectedBaseMap = baseMaps.find((map) => map.id === selectedBaseMapId);
-  const showTerrain=selectedBaseMap?.id === "Terrain";
-  const mapStyle=selectedBaseMap?.mapUrl;
+  const showTerrain = selectedBaseMap?.id === "Terrain";
+  const mapStyle = selectedBaseMap?.mapUrl;
   const VIEWS = useMemo(
     () => [
       new MapView({
@@ -761,21 +764,11 @@ export const DeckGlWrapper = ({
         currentViewport = viewport;
       }}
       {!showTerrain && (
-        <StaticMap
-          reuseMaps
-          mapStyle={mapStyle}
-          preventStyleDiffing
-          preserveDrawingBuffer
-        />
+        <MaplibreMap mapStyle={mapStyle} terrain={undefined}></MaplibreMap>
       )}
       {mapStyle && (
         <View id="minimap">
-          <StaticMap
-            reuseMaps
-            mapStyle={CONTRAST_MAP_STYLES[mapStyle]}
-            preventStyleDiffing
-            preserveDrawingBuffer
-          />
+          <MaplibreMap mapStyle={CONTRAST_MAP_STYLES[mapStyle]}></MaplibreMap>
         </View>
       )}
     </DeckGL>

src/components/layers-panel/layers-panel.spec.tsx

@@ -12,14 +12,11 @@ import { LayerSettingsPanel } from "./layer-settings-panel";
 import { load } from "@loaders.gl/core";
 import { PageId } from "../../types";
 import { setupStore } from "../../redux/store";
-import {
-  selectSelectedBaseMapId,
-} from "../../redux/slices/base-maps-slice";
+import { selectSelectedBaseMapId } from "../../redux/slices/base-maps-slice";
 
 jest.mock("@loaders.gl/core", () => ({
   load: jest.fn(),
 }));
-
 jest.mock("@loaders.gl/i3s", () => ({
   ArcGisWebSceneLoader: jest.fn(),
 }));
@@ -277,7 +274,7 @@ describe("Layers Panel", () => {
     });
 
     const state = store.getState();
-    const baseMapId =   selectSelectedBaseMapId(state);
+    const baseMapId = selectSelectedBaseMapId(state);
     expect(baseMapId).toEqual("https://test-base-map.url");
   });
 

src/pages/dashboard/dashboard.tsx

@@ -1,5 +1,5 @@
+import { Map as MaplibreMap } from "react-map-gl/maplibre";
 import { useState, useCallback } from "react";
-import { StaticMap } from "react-map-gl";
 import DeckGL from "@deck.gl/react";
 import { Tile3DLayer } from "@deck.gl/geo-layers";
 import { I3SLoader } from "@loaders.gl/i3s";
@@ -149,7 +149,7 @@ const Title = styled.div<LayoutProps>`
     desktop: "73px",
     tablet: "73px",
     mobile: "45px",
-  })};  
+  })};
 `;
 
 const GreenText = styled.span`
@@ -179,7 +179,7 @@ const IphoneImage = styled.img`
   left: 1670px;
   z-index: 4;
   width: 198px;
- 
+
   @media (max-width: 1670px) {
     left: calc(100% - 184px);
   }
@@ -310,7 +310,7 @@ export const Dashboard = () => {
 
   return (
     <DashboardContainer id="dashboard-container" layout={layout}>
-      <DeckWithTitleWrapper  layout={layout}>
+      <DeckWithTitleWrapper layout={layout}>
         <Title id="dashboard-title" layout={layout}>
           Explore and Debug I3S Data with one
           <GreenText id="green-text"> Simple and Easy-to-Use Tool</GreenText>
@@ -322,7 +322,7 @@ export const Dashboard = () => {
           layers={[tile3DLayer]}
           initialViewState={viewState}
         >
-          <StaticMap mapStyle={DEFAULT_MAP_STYLE} />
+          <MaplibreMap mapStyle={DEFAULT_MAP_STYLE}></MaplibreMap>
         </DeckGL>
       </DeckWithTitleWrapper>
       <Wrapper id="tools-wrapper" layout={layout}>
@@ -333,17 +333,13 @@ export const Dashboard = () => {
             src={AppShowcase}
           />
         )}
-        {layout === Layout.Desktop &&
-          (
-            <>
-              <MacImage id="mac-image" src={Mac} />
-              <IphoneImage id="iphone-image" src={Iphone} />
-            </>
-          )}
-        <ToolsContainer
-          id="tools-description-container"
-          layout={layout}
-        >
+        {layout === Layout.Desktop && (
+          <>
+            <MacImage id="mac-image" src={Mac} />
+            <IphoneImage id="iphone-image" src={Iphone} />
+          </>
+        )}
+        <ToolsContainer id="tools-description-container" layout={layout}>
           <ToolsItem id="tools-item-viewer" layout={layout}>
             <ViewerImage />
             <ToolItemDescription layout={layout}>

src/redux/slices/attribute-stats-map-slice.spec.ts

@@ -7,6 +7,9 @@ import {
 import { StatsInfo } from "@loaders.gl/i3s";
 
 jest.mock("@loaders.gl/core");
+jest.mock("@loaders.gl/i3s", () => ({
+  load: jest.fn(),
+}));
 
 describe("slice: attribute-stats-map", () => {
   it("Selector should return the initial state", () => {

src/redux/slices/base-maps-slice.spec.ts

@@ -9,6 +9,10 @@ import reducer, {
   deleteBaseMaps,
 } from "./base-maps-slice";
 
+jest.mock("@loaders.gl/i3s", () => ({
+  load: jest.fn(),
+}));
+
 describe("slice: base-maps", () => {
   it("Reducer should return the initial state", () => {
     expect(reducer(undefined, { type: undefined })).toEqual({

src/redux/slices/colors-by-attribute-slice.ts

@@ -2,6 +2,10 @@ import { PayloadAction, createSlice } from "@reduxjs/toolkit";
 import { ColorsByAttribute } from "../../types";
 import { RootState } from "../store";
 
+jest.mock("@loaders.gl/i3s", () => ({
+  load: jest.fn(),
+}));
+
 // Define a type for the slice state
 export interface ColorsByAttributeState {
   /** Values of color properties responsible for colorizig by attributes */

src/redux/slices/drag-mode-slice.spec.ts

@@ -5,7 +5,9 @@ import reducer, {
   selectDragMode,
   setDragMode,
 } from "./drag-mode-slice";
-
+jest.mock("@loaders.gl/i3s", () => ({
+  load: jest.fn(),
+}));
 describe("slice: drag-mode", () => {
   it("Reducer should return the initial state", () => {
     expect(reducer(undefined, { type: undefined })).toEqual({

src/redux/slices/flattened-sublayers-slice.spec.ts

@@ -25,6 +25,9 @@ import {
 } from "./test-data/fluttened-sublayers-slice-test-data";
 
 jest.mock("@loaders.gl/core");
+jest.mock("@loaders.gl/i3s", () => ({
+  load: jest.fn(),
+}));
 
 const previousState: flattenedSublayersState = {
   single: {

src/redux/slices/uv-debug-texture-slice.spec.ts

@@ -7,6 +7,9 @@ import {
 import { ImageLoader } from "@loaders.gl/images";
 
 jest.mock("@loaders.gl/core");
+jest.mock("@loaders.gl/i3s", () => ({
+  load: jest.fn(),
+}));
 
 const imageStubObject = { width: 1024, height: 1024, data: new ArrayBuffer(0) };