swap basemap and sources to mvt endpoint

districtr · Sep 20, 2024 · d5646b9 · d5646b9
1 parent 6972c9d
commit d5646b9
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 12 deletions.
diff --git a/app/src/app/components/Map.tsx b/app/src/app/components/Map.tsx
@@ -4,7 +4,6 @@ import maplibregl, {
   MapLayerTouchEvent,
 } from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
-import { Protocol } from "pmtiles";
 import type { MutableRefObject } from "react";
 import React, { useEffect, useRef, useState } from "react";
 import { MAP_OPTIONS } from "../constants/configuration";
@@ -76,14 +75,6 @@ export const MapComponent: React.FC = () => {
     queryFn: mapDocument ? () => getZonePopulations(mapDocument) : skipToken,
   });
 
-  useEffect(() => {
-    let protocol = new Protocol();
-    maplibregl.addProtocol("pmtiles", protocol.tile);
-    return () => {
-      maplibregl.removeProtocol("pmtiles");
-    };
-  }, []);
-
   useEffect(() => {
     const document_id = searchParams.get("document_id");
     if (document_id && !useMapStore.getState().mapDocument) {

diff --git a/app/src/app/constants/configuration.ts b/app/src/app/constants/configuration.ts
@@ -11,11 +11,15 @@ export const BASEMAP_STYLE: StyleSpecification = {
       type: "vector",
       attribution:
         '<a href="https://github.com/protomaps/basemaps">Protomaps</a> © <a href="https://openstreetmap.org">OpenStreetMap</a>',
-      url: `pmtiles://${process.env.NEXT_PUBLIC_S3_BUCKET_URL}/basemaps/20240325.pmtiles`,
+      tiles: [
+        `${window.location.origin}/api/tiles/${encodeURIComponent("basemaps/20240325.pmtiles")}/{z}/{x}/{y}`
+      ]
     },
     counties: {
       type: "vector",
-      url: `pmtiles://${process.env.NEXT_PUBLIC_S3_BUCKET_URL}/basemaps/tiger/tiger2023/tl_2023_us_county_full.pmtiles`,
+      tiles: [
+        `${window.location.origin}/api/tiles/${encodeURIComponent("basemaps/tiger/tiger2023/tl_2023_us_county_full.pmtiles")}/{z}/{x}/{y}`
+      ]
     },
   },
   layers: BASEMAP_LAYERS,

diff --git a/app/src/app/constants/sources.ts b/app/src/app/constants/sources.ts
@@ -3,9 +3,11 @@ import { VectorSourceSpecification } from "maplibre-gl";
 export function getBlocksSource(
   layer_subpath: string
 ): VectorSourceSpecification {
+  const zxyUrl = `${window.location.origin}/api/tiles/${encodeURIComponent(layer_subpath)}/{z}/{x}/{y}`
+
   return {
     type: "vector",
-    url: `pmtiles://${process.env.NEXT_PUBLIC_S3_BUCKET_URL}/${layer_subpath}`,
+    tiles: [zxyUrl],
     promoteId: "path",
   };
 }