Hello ESRI folks!
Question: Does the Kotlin & iOS SDK (also web SDK) support match statements in JSON stylesheets to represent multiple fill colors for a vector tile layer?
Context:
Our team is migrating from using MapBox to render vector tiles produced by pg_tileserve for our Android & iOS to the ESRI SDKs. We're having trouble with the SDKs rendering layers that have fill-color stylesheet specifications.
Current Solution:
Our current solution is leveraging the ArcGISVectorTiledLayer to read the stylesheets for vector tile layers.
fun LayerDescriptor.toArcGISLayer(): ArcGISLayer {
return when (layerCase) {
LayerDescriptor.LayerCase.VECTOR_LAYER -> {
ArcGISVectorTiledLayer(vectorLayer.stylesheetJsonUrl).apply {
name = layerName
}
}
Supporting Details:
Here's the stylesheet JSON that corresponds to the screenshots below.
{
"layers": [
{
"id": "Severe Fire Danger Index",
"layout": {
"visibility": "visible"
},
"paint": {
"fill-color": [
"match",
[
"get",
"sfdi_value"
],
"LOW",
"rgba(42 ,131, 187, 1)",
"MODERATE",
"rgba(171, 221 ,164, 1)",
"HIGH",
"rgba(253, 254 ,190,1)",
"VERY HIGH",
"rgba(253 ,174, 97,1)",
"SEVERE",
"rgba(215, 25, 27,1)",
"rgba(0, 0, 255, 0.5)"
],
"fill-opacity": 0.7
},
"source": "sfdi",
"source-layer": "public.sfdi_ignis_zone",
"type": "fill"
}
],
"sources": {
"sfdi": {
"maxZoom": 14,
"minZoom": 0,
"tiles": [
"https://ourtileserveraddress/public.sfdi_ignis_zone/{z}/{x}/{y}.pbf"
],
"type": "vector",
"volatile": true
}
},
"version": "8"
}
Attaching a screenshots of what the tiles should look like...
This is how it currently renders in the Android emulator...
@IgnisDev - the Kotlin & Swift SDKs don't support match statements in JSON stylesheets and there is no plan to support them in the future.
In terms of solutions/workarounds, you might want to look at the tile spec that Esri supports, using:
- Esri's vector basemaps
- the Esri Vector Tile Style Editor