Vector Tile basemaps in MapLibre

Question

Hello,

I'm trying to add a vector tile basemap other than the basemap styles service, which works fine.

I'd like to replace the basemap styles service with other vector tile basemap like OpenStreetMap (WGS84) or GB Cartographic .

To do this, I've tried getting the styles url by going to the tile service item in agol and clicking "View style". Then I paste that url in the CodePen snippet from the 'Display a map' tutorial, but get some errors in my console:

Can anybody advice how to add vector tile basemaps in MapLibre?

Many thanks in advance,

Diego

6TELOIV · Answer

Hi John! I think the issue isn't coming from that specific items configuration, but rather from the ArcGIS service itself. The same relative URL of "tile/{z}/{y}/{x}.pbf" is present responses from the vector tile service itself. It's present in the responses from this URL: https://basemaps.arcgis.com/arcgis/rest/services/World_Basemap_v2/VectorTileServer

This MapLibre issue has more information about the issue, but long story short, the relative URL is not specification compliant and should be an absolute URL.

I'm a bit of a noobie at this stuff, so let me know if there's something I'm missing here!

John-Foster · Answer

I was not able to get the GB Cartographic map to load in MapLibre, it appears the tile URL is incorrect and I can't figure out how to fix it. I suggest contacting the email that is provided on the item maybe you can work with them to resolve this issue? https://www.arcgis.com/home/item.html?id=a599af89dc6d4960ba558d54337df2ee

The URL is configured in the style JSON in the sources key - https://www.arcgis.com/sharing/rest/content/items/a599af89dc6d4960ba558d54337df2ee/resources/styles/root.json?f=pjson

DiegoDíazDoce · Answer

Hi John,

Thank you for taking the time to look into my question. I have some follow up questions if you don't mind:

Will the url from the code sample you pointed at (https://basemapstyles-api.arcgis.com/arcgis/rest/services/styles/v2/styles/items/${agolItemID}?token=${apiKey}) work with any vector tile as long as it's hosted in agol?

Is there a reason why it wouldn't work with my other example GB Cartographic  with id a599af89dc6d4960ba558d54337df2ee?

I'm getting the error below:

Someone pointed out that this could be due to a malformed url in the service

If that's the case, do you know where that url is configured? I'm hoping that I can ask the owner of the item to fix it.

Thanks again,

Diego