upgrade vector basemap to tiles v3, styles v2 [#49] (#257)

app/package-lock.json

@@ -18,9 +18,9 @@
         "d3-path": "^3.0.1",
         "d3-scale-chromatic": "^3.0.0",
         "fflate": "^0.7.3",
-        "maplibre-gl": "^3.0.0",
+        "maplibre-gl": "3.3.1",
         "pbf": "^3.2.1",
-        "protomaps-themes-base": "1.2.0",
+        "protomaps-themes-base": "2.0.0-alpha.1",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
         "react-dropzone": "^14.1.1",
@@ -675,7 +675,7 @@
     "node_modules/@mapbox/jsonlint-lines-primitives": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
-      "integrity": "sha1-zlblOfg1UrWNENZy6k1vya3HsjQ=",
+      "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==",
       "engines": {
         "node": ">= 0.6"
       }
@@ -712,14 +712,12 @@
       }
     },
     "node_modules/@maplibre/maplibre-gl-style-spec": {
-      "version": "19.2.0",
+      "version": "19.3.1",
-      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-19.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-19.3.1.tgz",
-      "integrity": "sha512-RQcFaiOqSSqxCHpcQw9tPvMK4fK36Czzm0GNgRum0Q+AcLchtYSshRDz8+0gfQqb1gxGBMXayJc+t/xmFeXSdg==",
+      "integrity": "sha512-ss5+b3/a8I1wD5PYmAYPYxg0Nag0cxvw4GGOnQroTP59sobTPI3KeHP9OjUr/es7uNtYEodr54fgoEnCBF6gaQ==",
       "dependencies": {
         "@mapbox/jsonlint-lines-primitives": "~2.0.2",
-        "@mapbox/point-geometry": "^0.1.0",
         "@mapbox/unitbezier": "^0.0.1",
-        "@types/mapbox__point-geometry": "^0.1.2",
         "json-stringify-pretty-compact": "^3.0.0",
         "minimist": "^1.2.8",
         "rw": "^1.3.3",
@@ -1495,6 +1493,14 @@
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
       "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
     },
+    "node_modules/@types/supercluster": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-7.1.1.tgz",
+      "integrity": "sha512-dNK02GO1UApgo+1KpY4jOfm3uWb2eBCMB/VMM2y8cMoF49FiqVVcOawEg19wxYcaX7SvEs370incOuFtFGrVLg==",
+      "dependencies": {
+        "@types/geojson": "*"
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-1.3.1.tgz",
@@ -2605,9 +2611,9 @@
       }
     },
     "node_modules/maplibre-gl": {
-      "version": "3.0.0",
+      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-3.3.1.tgz",
-      "integrity": "sha512-Yvtd36FJQWYymVNRG0Wv4uJfhvlVRR9GZQEBtMbubdH5NUOKqxt8A/OKVtzGPM+MVedTicg56pVxlRq643Hjuw==",
+      "integrity": "sha512-SfRq9bT68GytDzCOG0IoTGg2rASbgdYunW/6xhnp55QuLmwG1M/YOlXxqHaphwia7kZbMvBOocvY0fp5yfTjZA==",
       "dependencies": {
         "@mapbox/geojson-rewind": "^0.5.2",
         "@mapbox/jsonlint-lines-primitives": "^2.0.2",
@@ -2616,11 +2622,12 @@
         "@mapbox/unitbezier": "^0.0.1",
         "@mapbox/vector-tile": "^1.3.1",
         "@mapbox/whoots-js": "^3.1.0",
-        "@maplibre/maplibre-gl-style-spec": "^19.2.0",
+        "@maplibre/maplibre-gl-style-spec": "^19.3.0",
         "@types/geojson": "^7946.0.10",
         "@types/mapbox__point-geometry": "^0.1.2",
         "@types/mapbox__vector-tile": "^1.3.0",
         "@types/pbf": "^3.0.2",
+        "@types/supercluster": "^7.1.0",
         "earcut": "^2.2.4",
         "geojson-vt": "^3.2.1",
         "gl-matrix": "^3.4.3",
@@ -2839,9 +2846,9 @@
       "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw=="
     },
     "node_modules/protomaps-themes-base": {
-      "version": "1.2.0",
+      "version": "2.0.0-alpha.1",
-      "resolved": "https://registry.npmjs.org/protomaps-themes-base/-/protomaps-themes-base-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/protomaps-themes-base/-/protomaps-themes-base-2.0.0-alpha.1.tgz",
-      "integrity": "sha512-SktPnoJBhcbilzXBQYBVhnvFa5x34JHXc/9ZVpTvUGqHDkxtlExrQSwSuAmfoLOCE6/FueXJDDk+EuSjDCefKA=="
+      "integrity": "sha512-eGAiUpBPAohnMvEHoF7NRWp7YuTNk/JsAVJ4733jqNw+/EF6Q5TMjqCOZScG3YSri5NStJg+9Upb95M2AQ3pjw=="
     },
     "node_modules/quickselect": {
       "version": "2.0.0",

app/package.json

@@ -20,9 +20,9 @@
     "d3-path": "^3.0.1",
     "d3-scale-chromatic": "^3.0.0",
     "fflate": "^0.7.3",
-    "maplibre-gl": "^3.0.0",
+    "maplibre-gl": "3.3.1",
     "pbf": "^3.2.1",
-    "protomaps-themes-base": "1.2.0",
+    "protomaps-themes-base": "2.0.0-alpha.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-dropzone": "^14.1.1",

app/src/MaplibreMap.tsx

@@ -197,7 +197,7 @@ const rasterStyle = async (file: PMTiles): Promise<any> => {
       basemap: {
         type: "vector",
         tiles: [
-          "https://api.protomaps.com/tiles/v2/{z}/{x}/{y}.pbf?key=1003762824b9687f",
+          "https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f",
         ],
         maxzoom: 14,
       },
@@ -310,7 +310,7 @@ const vectorStyle = async (file: PMTiles): Promise<any> => {
         basemap: {
           type: "vector",
           tiles: [
-            "https://api.protomaps.com/tiles/v2/{z}/{x}/{y}.pbf?key=1003762824b9687f",
+            "https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=1003762824b9687f",
           ],
           maxzoom: 14,
           bounds: bounds,