JSON
geo

How to dock esri-hosted Vector Tiles to Maputnik

Background

I wanted to dock Esri-hosted Vector Tiles to Maputnik so that I can learn more about that vector tiles. I implemented this by modifying root.json. This practice is experimental.

640px-STS-76_docking_with_MIR.jpg

Steps

(1) Prepare an https server to host a style.json

Although Esri uses Mapbox Style Specifications, their root.json cannot directly be used by Maputnik because of slight difference. We need to host a modified version of root.json to a CORS-enabled https server.

In my case, I used the htdocs space of tile-block to host the file.

(2) Modify root.json and host it as style.json

Locate root.json and download it

You can find root.json at somewhere like https://{server}/arcgis/rest/services/Hosted/{t}/VectorTileServer/resources/styles/root.json. Save it as style.json

Modify sprite, glyphs, and sources

First, we need to modify the first ten lines that contain sprite, glyphs, and sources.

sprite

The original root.json reads:

"sprite": "../sprites/sprite",

This shall be modified as:

"sprite": "https:{server}/arcgis/rest/services/Hosted/{t}/VectorTileServer/resources/sprites/sprite",

glyphs

The original root.json reads:

"glyphs": "../fonts/{fontstack}/{range}.pbf",

This shall be modified as:

"glyphs": "https://{server}/arcgis/rest/services/Hosted/{t}/VectorTileServer/resources/fonts/{fontstack}/{range}.pbf", 

sources

The original root.json reads:

"sources": {
  "esri": {
    "type": "vector",
    "url": "../../"
  }
},

This shall be modified as:

"sources": {
  "esri": {
    "type": "vector",
    "tiles": ["https://{server}/arcgis/rest/services/Hosted/{t}/VectorTileServer/tile/{z}/{y}/{x}.pbf"]
  }
},

Please note that the key 'url' changed to 'tiles'. Also please note that the value for the 'tiles' key is an array.

In addition, please note that the template url contains {z}/{y}/{x}, not {z}/{x}/{y}.

Modify other small things

Sometimes you see several dialects of style.json which Maputnik cannot understand. You may need to fix them by trial and error. In many cases the error messages of Maputnik help.

In my case, I had to delete '#' from '#rgba(255,255,255,0.75)' to correct it to 'rgba(255,255,255,0.75)'.

(3) Host style.json

Upload your style.json at an https server.

(4) Open from Maputnik

You can open your style.json at https://maputnik.github.io/editor/?style={your-style-json-url}#{z}/{lat}/{lng}.

Enjoy!