Change basemap; change start zoom

src/Map/Basemap.jsx

@@ -0,0 +1,17 @@
+import { Layer, Source } from "react-map-gl";
+
+const url =
+  "https://api.mapbox.com/styles/v1/ghermant/cla2nwk5f00el14nxvtjlsi6z/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoiZ2hlcm1hbnQiLCJhIjoiY2xhMm5zZ3ZrMDF4MDN2bzc5Yjd0ZjZ1dCJ9.fqnvrEqKKBoguR7R6DR7Yw";
+
+export const Basemap = () => {
+  return (
+    <Source type={"raster"} id={"basemap"} tiles={[url]} tileSize={256}>
+      <Layer
+        type={"raster"}
+        source={"basemap"}
+        id={"basemap-layer"}
+        paint={{}}
+      />
+    </Source>
+  );
+};

src/Map/MapComponent.jsx

@@ -5,20 +5,28 @@ import { Sidebar } from "../modules/Sidebar/Sidebar";
 import { pointLayer } from "./layers-config";
 import { Layers } from "./Layers";
 import { MapPopup } from "./Popup";
-import {
-  DPI,
-  Format,
-  MaplibreExportControl,
-  PageOrientation,
-  Size,
-} from "@watergis/maplibre-gl-export";
+import { MaplibreExportControl } from "@watergis/maplibre-gl-export";
+import { Basemap } from "./Basemap";
 
-const MAP_TILER_KEY = "hE7PBueqYiS7hKSYUXP9";
+// const MAP_TILER_KEY = "hE7PBueqYiS7hKSYUXP9";
 
 const ExportControl = (props) => {
-  useControl(() => new MaplibreExportControl(props), {
-    position: props.position,
-  });
+  const control = useRef(null);
+
+  useControl(
+    () => {
+      const controlInstance = new MaplibreExportControl(props);
+      control.current = controlInstance;
+      return controlInstance;
+    },
+    {
+      position: props.position,
+    }
+  );
+
+  // useEffect(() => {
+  //   console.log(control.current);
+  // }, []);
 
   return null;
 };
@@ -75,12 +83,12 @@ export const MapComponent = () => {
   return (
     <Map
       mapLib={maplibregl}
-      mapStyle={`https://api.maptiler.com/maps/voyager/style.json?key=${MAP_TILER_KEY}`}
+      // mapStyle={`https://api.maptiler.com/maps/voyager/style.json?key=${MAP_TILER_KEY}`}
       style={{ width: "100vw", height: "100vh" }}
       initialViewState={{
         latitude: 55.7558,
         longitude: 37.6173,
-        zoom: 10,
+        zoom: 9,
       }}
       ref={mapRef}
       interactiveLayerIds={[pointLayer.id, "grid3", "grid4", "grid5"]}
@@ -90,10 +98,10 @@ export const MapComponent = () => {
     >
       <ExportControl
         position="top-left"
-        PageSize={Size.A4}
-        PageOrientation={PageOrientation.Landscape}
-        Format={Format.PNG}
-        DPI={DPI[200]}
+        // PageSize={Size.A4}
+        // PageOrientation={PageOrientation.Landscape}
+        // Format={Format.PNG}
+        // DPI={DPI[200]}
         Crosshair={true}
         PrintableArea={true}
       />
@@ -109,6 +117,7 @@ export const MapComponent = () => {
         />
       )}
 
+      <Basemap />
       <Layers />
 
       <Sidebar />