Add PMTiles support

maplibre · Sep 19, 2024 · d9c69f3 · d9c69f3
1 parent 0f1000c
commit d9c69f3
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 0 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -57,6 +57,7 @@
     "maputnik-design": "github:maputnik/design#172b06c",
     "ol": "^6.14.1",
     "ol-mapbox-style": "^7.1.1",
+    "pmtiles": "^3.0.6",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-accessible-accordion": "^5.0.0",

diff --git a/src/components/MapMaplibreGl.tsx b/src/components/MapMaplibreGl.tsx
@@ -12,6 +12,7 @@ import 'maplibre-gl/dist/maplibre-gl.css'
 import '../maplibregl.css'
 import '../libs/maplibre-rtl'
 import MaplibreGeocoder, { MaplibreGeocoderApi, MaplibreGeocoderApiConfig } from '@maplibre/maplibre-gl-geocoder';
+import { Protocol } from 'pmtiles';
 import '@maplibre/maplibre-gl-geocoder/dist/maplibre-gl-geocoder.css';
 import { withTranslation, WithTranslation } from 'react-i18next'
 import i18next from 'i18next'
@@ -137,6 +138,9 @@ class MapMaplibreGlInternal extends React.Component<MapMaplibreGlInternalProps,
   }
 
   componentDidMount() {
+    let protocol = new Protocol();
+    MapLibreGl.addProtocol("pmtiles", protocol.tile);
+
     const mapOpts = {
       ...this.props.options,
       container: this.container!,