nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

boeskmgmoes

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?

Find more posts tagged with

Accepted answers

All comments

SimonLewis

I realise this is an old thread now, but it has been a very helpful guide to simulating a VectorTileServer ESRI service endpoint. Thanks all!

My question is whether any of these self hosted VectorTileServer end point have been successfully loaded into ArcGIS Pro as well as Arc JS API?

I have a correctly formatted VectorTileServer end point, but if I try and bring into ArcGIS Pro I just get a red exclamation mark rejection.

Thanks.

MarhensaAditya_Hadi

Thank you for this. This is perfect solution to self host vector tile *.MBTiles with MapBox / OpenMapTile styling, and simulate a VectorTileServer ESRI service endpoint.

Also I could imagine using custom stylized MapBox Studio vector basemap on ESRI environment (AGOL, ArcGIS Pro, ArcGIS API JS, etc), which is not possible by default, they only point out the raster WMTS endpoint for their service.

just one thing that I want to add is, how to redirect a directory to a JSON file:

https://www.web.site/labs/SimulatingService/VectorTileServer
into
https://www.web.site/labs/SimulatingService/VectorTileServer/index.json (a json that describing tileset mbtile/pbf/mvt, like this example)

https://www.web.site/labs/SimulatingService/VectorTileServer/resources/styles
into
https://www.web.site/labs/SimulatingService/VectorTileServer/resources/styles/index.json (json describing how to syle the vector, like this example)

I found out that simple Index.html redirect trick didn't work for me (using Apache, on Linux Debian 11)

But later I found that using .htaccess file could do it just fine. Just create .htaccess and put "DirectoryIndex index.json" inside that file, then put that .htaccess file into /SimulatingService/VectorTileServer and "DirectoryIndex root.json" .htaccess file into /SimulatingService/VectorTileServer/resources/styles

Just make sure that rewrite module (Linux= "a2enmod rewrite") is already on in the Apache2 web server, also some tweak about "AllowOverride All" in /etc/apache2/sites-available/000-default.conf and /etc/apache2/sites-available/000-default-le-ssl.conf, to really enabling .htaccess file to work on Apache2

Now, when the URL pointed to that folder, it will show the JSON file, instead redirecting it physically on address bar.

This screenshot, is tested on ArcGIS Online, using a test MBTile file consumed by tileserver-gl or simply a lightweight tileserver-php, that could provide tileset JSON with PBF endpoint for that MBTile file.

Thank you!

Screenshot 2022-09-30 205804.jpg

DavidHollema1

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.

MalcolmMeyer2

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
}
}

SudhirPonnappan1

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?

YohanBienvenue

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.

MalcolmMeyer2

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.

YohanBienvenue

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

Is the VectorTileLayer only accepting OSM pbf format?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.