Display Vector Tiles service with Esri JavaScript API

Alexandre Gauch

unread,

Jun 15, 2021, 3:51:51 AM6/15/21

to GeoAdminCh API

Hello,

I try to display the geo.admin.ch vector tile service with the Esri JavaScript API (4.19) but I get an error: "Unsupported vector tile raster layer".

Here is the sample code that I use:

<html>

<head>

<title>VectorTileLayer | Sample | ArcGIS API for JavaScript 4.19</title>

<style>

html,

body,

#viewDiv {

padding: 0;

margin: 0;

height: 100%;

width: 100%;

}

</style>

require(["esri/Map", "esri/views/MapView", "esri/layers/VectorTileLayer"], function(

Map,

MapView,

VectorTileLayer

) {

var map = new Map();

var view = new MapView({

container: "viewDiv",

map: map

});

var tileLayer = new VectorTileLayer({

url:

/*"https://jsapi.maps.arcgis.com/sharing/rest/content/items/75f4dfdff19e445395653121a95a85db/resources/styles/root.json"*/

"https://vectortiles.geo.admin.ch/styles/ch.swisstopo.leichte-basiskarte-imagery.vt/style.json"

});

map.add(tileLayer);

});

</script>

</head>

<body>

</body>

</html>

If I use a sample vector tile service from Esri (the commented url), it works fine.

Does anybody already used the Esri JavaScript API to display a geo.admin.ch vector tile service? Or do you have an idea of the problem?

Thanks for your help.

Alexandre

GeoAdminCh API

unread,

Jun 16, 2021, 4:33:37 AM6/16/21

to GeoAdminCh API

Hi

Maptiler did as part of thier research in the past a compatibility test.

The PBF MVTs were binary compatible. But JSON metadata and style syntax was slightly different.

Maptiler.ch had MapTiler Basic services (which are the same as we have ) running in ArcGIS Online as well as ArcGIS Pro and API. Check their old tweets.

Entire ESRI VT stack is in fact a modified fork of MapBox GL AFAIK

We will look into that... but we can't promise anything

Carine Burri

unread,

Jul 19, 2021, 10:09:32 AM7/19/21

to GeoAdminCh API

Hi,

When you say : "The PBF MVTs were binary compatible. But JSON metadata and style syntax was slightly different." Could you tell us between which tiles there is a difference?

Thanks for your help,

Kindly

Carine

Nicola Pfister

unread,

Jan 14, 2022, 5:51:32 AM1/14/22

to GeoAdminCh API

Our current project of the ASTRA is running into the same issue, trying to load the "Light Base Map" using the latest ArcGIS JS API. If I understand the issue correctly, it should be possible to take the Swisstopo Style JSON and change the format, so that it can be loaded. Could you provide more details as to how to achieve this. At the moment I'm struggling to figure out where exactly the differences are.

David...@swisstopo.ch

unread,

Jan 14, 2022, 7:39:51 AM1/14/22

to geoadm...@googlegroups.com

if it’s only a problem with raster vector-tiles:

remove raster VTs in the style (or via JS) and load alternative background. the swiss relief exists as WMTS:

https://wmts.geo.admin.ch/1.0.0/ch.swisstopo.leichte-basiskarte_reliefschattierung/default/{Time}/3857/{TileMatrix}/{TileCol}/{TileRow}.png

the worldwide relief is only available as raster Vectortiles via maptiler and you would have to ask maptiler.com if this is available in other formats.

--
You received this message because you are subscribed to the Google Groups "GeoAdminCh API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to geoadmin-api...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/geoadmin-api/b2b13ae2-4be6-4040-9524-da14825f9f68n%40googlegroups.com.

Nicola Pfister

unread,

Jan 17, 2022, 6:29:42 AM1/17/22

to GeoAdminCh API

Thank you, I was actually able to render the map in ArcGIS JS by removing the relief layer. I've created a minimal reproduction in codesandbox if anybody else is interested.

That brings me to two new questions:

The labels for mountain peaks seem to not be working. It's displaying what I assume to be a format string instead, maybe due to the height numbers. Do you have any idea why that might be? In the worst case, I could probably disable those labels by removing the layer from the styles.json, correct?
Does the Mapbox vector tiles service support WGS84 only? Our application is supposed to offer it's data mainly in LV95 which is why we chose it as the base coordinate system and are using WMTS services in LV95 as well. Depending on your feedback we might have to investigate into trying to do some transformation or switching to WGS84 altogether.

Thanks in advance for your feedback!

GeoAdminCh API

unread,

Jan 17, 2022, 12:17:33 PM1/17/22

to GeoAdminCh API

Regarding

"Does the Mapbox vector tiles service support WGS84 only? "

-> The MVT Service Standard does support Webmercator only -- we follow this standard. However there are workarounds https://www.arcgis.com/home/item.html?id=02a87fcb632449099bf53f904fd309b9 and https://labs.klokantech.com/swissvt/ and the corresponding source https://cloud.maptiler.com/tiles/v3-2056/

For the first question : we will look for the answer internally

Sebastian Denier

unread,

Jan 18, 2022, 6:06:24 AM1/18/22

to GeoAdminCh API

Regarding "The labels for mountain peaks seem to not be working"
-> it doesn't seem to be able to interpret the [format] expression used in the style.json for the peaks (it is used to label the name of the mountain peak bigger than the eleveation of the peak).
You can change the style.json and replace the "text-field" parameter with the following (mountain peak and elevation will be the same size however):

"text-field": [
"concat",
["get", "name:latin"],
"\n",
["get", "ele"]
],

for ("peaks_other", "peaks_rank3+", "peaks_rank2", "peaks_rank1")

but a smarter way than editing the style would be to do it with JS: override the text-field paramter for all peaks layers (in that way you do not have to worry about editing new style files in future updates).
see code:
https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-VectorTileLayer.html#setLayoutProperties

Reply all

Reply to author

Forward