pmtiles

package.json

@@ -12,8 +12,8 @@
     "@headlessui/react": "^1.7.7",
     "@heroicons/react": "^2.0.13",
     "@tailwindcss/forms": "^0.5.3",
-    "mapbox-gl": "^2.11.1",
     "maplibre-gl": "^4.7.1",
+    "pmtiles": "^4.4.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-map-gl": "^7.1.9"
@@ -21,10 +21,10 @@
   "devDependencies": {
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
-    "@vitejs/plugin-react": "^3.0.0",
+    "@vitejs/plugin-react": "^6.0.1",
     "autoprefixer": "^10.4.13",
     "postcss": "^8.4.20",
     "tailwindcss": "^3.2.4",
-    "vite": "^4.0.0"
+    "vite": "^8.0.8"
   }
-}
+}

src/Countries.jsx

@@ -6,10 +6,11 @@ import {
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { Fragment, useRef, useState } from "react";
 
-import 'maplibre-gl/dist/maplibre-gl.css';
 import Map, { Layer, Popup, ScaleControl, Source } from "react-map-gl/maplibre";
+import basemap from "./assets/basemap.json";
 import mapstyle from "./countries.json";
 
+
 mapstyle.sources.remap.url = import.meta.env.MODE === "development" ? "http://localhost:8080/capabilities/remap.json" : mapstyle.sources.remap.url
 
 const paintedLayers = mapstyle.layers.reduce((acc, cur) => ({ ...acc, [cur.id]: cur }), {})
@@ -620,13 +621,15 @@ export default function Countries({ mapOptions, onMapOptionClick }) {
                       longitude: mapstyle.center[1],
                       zoom: mapstyle.zoom,
                     }}
+                    mapStyle={basemap}
                     minZoom={mapstyle.minZoom}
-                    maxZoom={mapstyle.maxZoom}
                     ref={mapRef}
                     interactiveLayerIds={["power_fact_mw"]}
                     onClick={handleClick}
                     onMouseEnter={handleMouseEnter}
                     onMouseLeave={handleMouseLeave}
+                    maxZoom={6}
+                    hash
                   >
 
                     {open && <Popup

src/Points.jsx

@@ -6,8 +6,8 @@ import {
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { Fragment, useRef, useState } from "react";
 
-import 'maplibre-gl/dist/maplibre-gl.css';
 import Map, { Layer, Popup, ScaleControl, Source } from "react-map-gl/maplibre";
+import basemap from "./assets/basemap.json";
 import mapstyle from "./points.json";
 
 mapstyle.sources.remap.url = import.meta.env.MODE === "development" ? "http://localhost:8080/capabilities/remap.json" : mapstyle.sources.remap.url
@@ -1096,12 +1096,15 @@ export default function Points({ mapOptions, onMapOptionClick }) {
                       longitude: mapstyle.center[1],
                       zoom: mapstyle.zoom,
                     }}
+                    mapStyle={basemap}
                     minZoom={mapstyle.minZoom}
                     ref={mapRef}
                     interactiveLayerIds={["Объекты"]}
                     onClick={handleClick}
                     onMouseEnter={handleMouseEnter}
                     onMouseLeave={handleMouseLeave}
+                    maxZoom={5.9}
+                    hash
                   >
 
                     {open && <Popup

src/Regions.jsx

@@ -6,8 +6,8 @@ import {
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import { Fragment, useRef, useState } from "react";
 
-import 'maplibre-gl/dist/maplibre-gl.css';
 import Map, { Layer, Popup, ScaleControl, Source } from "react-map-gl/maplibre";
+import basemap from "./assets/basemap.json";
 import mapstyle from "./regions.json";
 
 mapstyle.sources.remap.url = import.meta.env.MODE === "development" ? "http://localhost:8080/capabilities/remap.json" : mapstyle.sources.remap.url
@@ -674,12 +674,15 @@ export default function Regions({ mapOptions, onMapOptionClick }) {
                       longitude: mapstyle.center[1],
                       zoom: mapstyle.zoom,
                     }}
+                    mapStyle={basemap}
                     minZoom={mapstyle.minZoom}
                     ref={mapRef}
                     interactiveLayerIds={["power_fact_mw", "Регионы"]}
                     onClick={handleClick}
                     onMouseEnter={handleMouseEnter}
                     onMouseLeave={handleMouseLeave}
+                    maxZoom={6}
+                    hash
                   >
 
                     {open && <Popup

src/main.jsx

@@ -5,12 +5,19 @@ import Countries from './Countries';
 import Points from './Points';
 import Regions from './Regions';
 
+import maplibregl from 'maplibre-gl';
+import { Protocol } from "pmtiles";
+
+import 'maplibre-gl/dist/maplibre-gl.css';
+
 const initialMapOptions = [
   { name: "Объекты ВИЭ", current: true },
   { name: "Регионы РФ", current: false },
   { name: "Страны мира", current: false },
 ];
 
+let protocol = new Protocol();
+maplibregl.addProtocol("pmtiles", protocol.tile);
 
 
 function Maps() {

vite.config.js

@@ -1,5 +1,5 @@
-import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({