I would like to use VectorTiles using ArcGIS .NET map for .NET MAUI.
Before I was using MapboxSDK and run into some issues related to migration from Xamarin to MAUI and I am testing alternatives.
So what I have in code:
- For passing our endpoint requied header
AuthenticationManager.Current.ChallengeHandler = new ChallengeHandler(async (CredentialRequestInfo info) =>
{
if (info.ServiceUri.Host == "myhost.com")
{
return await Task.FromResult<TokenCredential>(null);
}
return null;
});
ArcGISHttpClientHandler.HttpRequestBegin += (sender, message) =>
{
if (message.RequestUri.Host == "myhost.com")
{
message.Headers.Add(_tokenHeader, _token);
}
};
- For consuming endpoint
var vectorTiledLayer = new ArcGISVectorTiledLayer(new Uri(url));
map.OperationalLayers.Add(vectorTiledLayer);
Now let's see waht's url, it's:
https://myhost.com/api/geoserver/collections/customstyle/style.json?filter=uuid='e3acb89b'
let's call it [A], then we got response:
{{
"version": 8,
"name": "customstyle-style",
"sources": {
"customstyle": {
"type": "vector",
"url": "[B]"
}
},
"layers": [
{
"id": "Off",
"type": "fill",
"source": "customstyle",
"source-layer": "customstyle",
"filter": [
"all",
[
"==",
"class_id",
0
]
],
"paint": {
"fill-color": "#E2E2E2",
"fill-outline-color": "#E2E2E2"
}
},
{
"id": "On",
"type": "fill",
"source": "customstyle",
"source-layer": "customstyle",
"filter": [
"all",
[
"==",
"class_id",
1
]
],
"paint": {
"fill-color": "#2166AC",
"fill-outline-color": "#2166AC"
}
}
]
}}
Inside [B] there's URL
https://myhost.com/api/geoserver/collections/customstyle/tilejson.json?filter=uuid='e3acb89b'&f=json&returnAdvancedSymbols=true
which returns
{
"tilejson": "3.0.0",
"tiles": [
"[C]"
],
"vector_layers": [
{
"id": "customstyle",
"fields": {
"gid": "ID",
"uuid": "Layer uuid",
"class_id": "Class id"
}
}
]
}
Inside [C] there's URL:
https://myhost.com/api/geoserver/collections/customstyle/tiles/{z}/{x}/{y}?filter=uuid='e3acb89b'
which gets: response.mvt, which is our tile for z x y
What service type is your service? Do you have the ArcGIS JSON service descriptor metadata available at that endpoint? Ie what does 'tilesUrl + "?f=json"' return? Or are you using the URL of your vector style sheet?
Also see https://developers.arcgis.com/net/api-reference/api/net/Esri.ArcGISRuntime/Esri.ArcGISRuntime.Mappin...
I've updated my question with providing more information about what's in our endpoint responses.
For the tiles themselves yes, but we need a way to understand the tiles first, and that's where the service metadata comes in.
Here's a good thread on how someone accomplished it: https://community.esri.com/t5/arcgis-javascript-maps-sdk-questions/is-it-possible-to-render-mapbox-v...
And some more doc on vector tile services: https://developers.arcgis.com/documentation/mapping-apis-and-services/data-hosting/vector-tile-servi...
So - we have endpoint that's working with Mapbox Vector Tiles.
1. I setup authentication (our endpoint needs header with special token), then on Get it returns stuff.
AuthenticationManager.Current.ChallengeHandler = new ChallengeHandler(async (CredentialRequestInfo info) =>
{
if (info.ServiceUri.Host == "myhost.com")
{
return await Task.FromResult<TokenCredential>(null);
}
return null;
});
ArcGISHttpClientHandler.HttpRequestBegin += (sender, message) =>
{
if (message.RequestUri.Host == "myhost.com")
{
message.Headers.Add(_tokenHeader, _token);
}
};
2. I tried following code (naive version that it will just works)
var vectorTiledLayer = new ArcGISVectorTiledLayer(new Uri(url));
map.OperationalLayers.Add(vectorTiledLayer);
Now what's about our endpoint
https://myhost.com/api/geoserver/collections/customstyle/style.json?filter=uuid='e3acb89b'
let's call it [A], then we got response
{{
"version": 8,
"name": "customstyle-style",
"sources": {
"customstyle": {
"type": "vector",
"url": "[B]"
}
},
"layers": [
{
"id": "Off",
"type": "fill",
"source": "customstyle",
"source-layer": "customstyle",
"filter": [
"all",
[
"==",
"class_id",
0
]
],
"paint": {
"fill-color": "#E2E2E2",
"fill-outline-color": "#E2E2E2"
}
},
{
"id": "On",
"type": "fill",
"source": "customstyle",
"source-layer": "customstyle",
"filter": [
"all",
[
"==",
"class_id",
1
]
],
"paint": {
"fill-color": "#2166AC",
"fill-outline-color": "#2166AC"
}
}
]
}}
Inside [B] there's URL
https://myhost.com/api/geoserver/collections/customstyle/tilejson.json?filter=uuid='e3acb89b'&f=json&returnAdvancedSymbols=true
and it returns:
{
"tilejson": "3.0.0",
"tiles": [
"[C]"
],
"vector_layers": [
{
"id": "customstyle",
"fields": {
"gid": "ID",
"uuid": "Layer uuid",
"class_id": "Class id"
}
}
]
}
Inside [C] there's URL:
https://myhost.com/api/geoserver/collections/customstyle/tiles/{z}/{x}/{y}?filter=uuid='e3acb89b'
which gets: response.mvt, which is our tile for z x y
Now I wonder how exactly I suppose to consume it or if it's not possible in current endpoint setup and we need to enhance our endpoint somehow?