Use Maplibre GL JS addProtocol to support PMTiles

[tordans]

Today I added PMTiles to my React Map GL Project.
Docs: https://protomaps.com/docs/frontends/maplibre

I did not find anything on how to do this in React Map GL, yet, we might as well use this as a starting point.

Since the implementation was not super straight forward (yet), I wonder if a dedicated Example would be welcome?

Here is what I have

• Those scripts take .geojson files and create and upload .pmtiles using Felt's Tippecanoe
  • https://github.com/FixMyBerlin/atlas-app/tree/develop/datasets
• The addProtocol needs to be called on maplibregl directly, which was unexpected; I did this in onLoad which might not be ideal(?)
  • https://github.com/FixMyBerlin/atlas-app/blob/develop/src/components/MapInterface/Map/Map.tsx#L57-L63
• I could not just add the layers directly (nothing showed…), but had to add a pmTilesProtocolReady guard; This feels hacky as well, open to suggestions
  • https://github.com/FixMyBerlin/atlas-app/blob/develop/src/components/MapInterface/Map/SourcesAndLayers/SourcesLayerDatasets.tsx#L13-L18

---

See also protomaps/PMTiles#163

[bdon]

What happens if you call addProtocol in useEffect with [] (fired once on component mount)? Does that remove the need for pmTilesProtocolReady ?

[bdon]

@tordans to answer more directly - you shouldn't need the pmtilesProtocolReady guard, because installing the pmtiles protocol is not bound to any existing Map instance, it's global to the instance of maplibre (a singleton per runtime). So you should addProtocol in a hook that is guaranteed to fire before the Map instance is created, like useEffect with [] as @TimMcCauley described. Let me know if that makes sense.

[tordans]

I can confirm that the useEffect solution works just as good. I used it in https://github.com/tordans/berlin-bikenetwork-monitoring/blob/0704fe8a517e75669154e1bf2a9e5ec0ca810da8/src/components/Map/Map.tsx#L11-L17

I will test out why I thought I needed it in the radverkehrsatlas.de repo and likely migrate to the useEffect as well.

The useEffect has the advantage of adding a cleanup function, which is always good…

[TimMcCauley]

Thank you @tordans for bringing this up. I ran into the same issue and can share this logic which works ok for me now.

import React, { useState } from 'react'
import { Map as Mapgl, Marker } from 'react-map-gl';
import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
import * as pmtiles from 'pmtiles'
import { protomaps_themes_base } from './protomaps_themes.js'

function App() {

  const [pmTilesReady, setPmTilesReady] = useState(false)

  const isLoaded = (e) => {
    const protocol = new pmtiles.Protocol()
    maplibregl.addProtocol('pmtiles', protocol.tile)
    setPmTilesReady(true)
  }

  const mapStyle = {
    version: 8,
    glyphs: 'https://cdn.protomaps.com/fonts/pbf/{fontstack}/{range}.pbf',
    sources: {
        protomaps: {
            type: "vector",
            url: "pmtiles://add_your_url_here",
        }
    },
    layers: protomaps_themes_base.default("protomaps","light")
  }


  return (
    <div className="App">  
      <Mapgl
        initialViewState={{
          latitude: 51.509865,
          longitude: -0.118092,
          zoom: 14
        }}
        mapLib={maplibregl}
        onLoad={isLoaded}
        style={{width: '100vw', height: '100vh'}}
        mapStyle={pmTilesReady ? mapStyle: undefined}
      >
      </Mapgl>
    </div>
  );
}

export default App;

[TimMcCauley]

@bdon to answer your question, yes, it does work with the useEffect hook, too. Do you see any advantages?

import React, { useState, useEffect } from 'react'
import { Map as Mapgl, Marker } from 'react-map-gl';
import maplibregl from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
import * as pmtiles from 'pmtiles'
import { protomaps_themes_base } from './protomaps_themes.js'

function App() {

  const [pmTilesReady, setPmTilesReady] = useState(false)

  useEffect(() => {
    const protocol = new pmtiles.Protocol()
    maplibregl.addProtocol('pmtiles', protocol.tile)
    setPmTilesReady(true)
  }, []);

  const mapStyle = {
    version:8,
    glyphs:'https://cdn.protomaps.com/fonts/pbf/{fontstack}/{range}.pbf',
    sources: {
        protomaps: {
            type: "vector",
            url: "pmtiles://your_url_here",
        }
    },
    layers: protomaps_themes_base.default("protomaps","light")
  }

  return (
    <div className="App">  
      <Mapgl
        initialViewState={{
          latitude: 51.509865,
          longitude: -0.118092,
          zoom: 14
        }}
        mapLib={maplibregl}
        style={{width: '100vw', height: '100vh'}}
        mapStyle={pmTilesReady ? mapStyle: undefined}
      >
      </Mapgl>
    </div>
  );
}

export default App;

[bdon]

I think this is a preferable way to do it because addProtocol is global to the maplibre reference and not any particular map instance. One limitation of this (and addProtocol in general) is that you are re-initializing every time the hook is fired, which I don't think is a memory leak since addProtocol is keyed by pmtiles and will just overwrite, but you could be losing the cache every time the component is mounted.

I think that could negatively affect applications that have multiple map components mounting/remounting within a browser session. It could be safest to isolate addProtocol to a central single place in those apps.