Is it possible to render mapbox vector tiles (pbf) in Arcgis Javascript API 4.11

2058
6
07-02-2019 11:28 AM
boeskmgmoes
New Contributor II

This has been a question asked for the last two years without any updates. I just want to check in to see if there has been any changes regarding adding Mapbox vector tiles as a VectorTileLayer in Arcgis Javascript 4.x. If so, is there a code example we can follow?

Tags (4)
6 Replies
YohanBienvenue
Occasional Contributor II

I'd like to know this as well, but for the ArcGIS API 3.x

Is the VectorTileLayer only accepting OSM pbf format?

0 Kudos
MalcolmMeyer2
Occasional Contributor II

I would assume the answer is yes considering I am successfully rendering custom vector tiles in AGOL. The trick is to use the Esri VectorTileService json style schema to reference the tiles. If anyone is interested I can explain more.

0 Kudos
YohanBienvenue
Occasional Contributor II

Yeah I did it too a few weeks ago, in ArcGIS 3.29, using custom tiles generated using ST_asMVT in postgis. The only thing I couldn't do is display labels from attributes included in the tiles. I could be wrong, but I suspect the ArcGIS API fetches the required JavaScript code to render labels from the ArcGIS Enterprise server, using web workers. Which would explain why they say ArcGIS Enterprise is mandatory to use VectorTileLayer. I was able to replicate the json files for the service metadata and style, but not this.

0 Kudos
SudhirPonnappan1
New Contributor III

Malcolm Meyer‌ - I am looking at ways to pull in vector tiles that are not from ESRI vector tile service, but generated using Tippecanoe and hosted on Azure. Would you have some guidance or an example style file to share?

0 Kudos
MalcolmMeyer2
Occasional Contributor II

Briefly, you need to have three endpoints

  • your tile endpoint
  • A "/VectorTileServer/" endpoint, which needs to return a json like the one below (mine redirects the index.html to a json file)
  • A style endpoint which needs to return a valid Mapbox style (in this example also redirecting to a json style file)

Good luck! Report back with your results if you get it to work.

{
 "currentVersion": 10.7,
 "name": "Test",
 "capabilities": "TilesOnly, TileInfo", -I don 't know what these do and what other options there are
 "type": "flatVector", -Flat is what you want, ArcGIS Pro creates Indexed Tiles as well
 "defaultStyles": "../resources/styles", -Another endpoint
 "tiles": ["../{z}/{x}/{y}.mvt" - relative or hard link to tiles endpoint],
 "exportTilesAllowed": false,
 "tileInfo": {
   "rows": 512,
   "cols": 512,
   "dpi": 96,
   "format": "pbf",
 "spatialReference": {
   "wkid": 102100,
   "latestWkid": 3857
 }
},
  "maxzoom": 19,
  "resourceInfo": {
  "styleVersion": 8,
    "tileCompression": "gzip" - if you get weird errors check that your tiles are being gzipped
 }
}
0 Kudos
DavidHollema1
New Contributor

I have documented the process to consume Mapbox tiles generated with tippecanoe in the ESRI JavaScript API 4.x  - Vector Tiles on Google Cloud Storage: Web Clients. I pieced together bits from this thread and my own investigation. Thanks to all contributors on this thread.

I was not able to successfully configure a labeling layer for the contour line elevations. I tried following VectorTileLayer from JSON, which provides an example of labeling the continents, but was unsuccessful. The labels did not appear and worse, the layer from which the labels originated became hidden with it.

OpenLayers, on the other hand, supports labeling from the same vector tiles as well as simple identify based on mouse hover - Fairfield County Ohio contours on OpenLayers.

If anyone has additional leads on labeling (symbol type layer) or support for simple identify/popup, please share.