Select to view content in your preferred language

Using PMTiles as a basemap in the ArcGIS Maps SDK for JavaScript (no tile server)

327
0
3 weeks ago
Labels (1)
  • AI
adamsimple
Occasional Contributor

I attended a MapTime Seattle session on Thursday (April 9), where Stephanie May led a workshop on building standalone web maps with MapLibre and PMTiles. Everything is served from GitHub Pages. No server, no backend, no tile cache to manage. Just a static file and a map. I was kind of blown away by how simple and powerful it was.

I work in an Esri shop (King County GIS), so my first thought was "how do I bring this to our world?" PMTiles are amazing, but the ArcGIS Maps SDK doesn't natively support them. The workarounds I've seen involve standing up a tile server to translate PMTiles into z/x/y endpoints, which kind of defeats the whole point.

So I started brainstorming and built a library called FuseSimple. The idea is simple: MapLibre renders the PMTiles basemap on a hidden canvas underneath a transparent Esri MapView. Two engines, synced together, one map. Your Esri code doesn't change. Feature layers, widgets, popups, clustering, Arcade, StreamLayers, auth. It all just works on top of the PMTiles basemap.

 
javascript
const fuse = await FuseSimple.create({
  basemap: {
    engine: "maplibre",
    source: "/your-region.pmtiles"
  },
  operational: {
    engine: "esri",
    view: view  }
});

 

Alignment between Esri and MapLibre parcelsAlignment between Esri and MapLibre parcels

I put together three demos to push on different parts of the SDK and make sure things actually hold up:

All single-file HTML. View Source on any of them.

PMTiles basemap with live LA bus feedPMTiles basemap with live LA bus feed

Built on the 5.0 SDK, supports both the web component pattern and classic MapView. Still pre-1.0 (v0.14.1), so there are rough edges. Would love feedback from anyone who gives it a try.

Repo and docs: https://github.com/MapSimple-Org/FuseSimple-Public

0 Replies