Z,X,Y Vector tiles on Maui .NET project / ArcGISVectorTiledLayer

[jm2024]

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

[dotMorten_esri]

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

[jm2024]

I've updated my question with providing more information about what's in our endpoint responses.

[GKmieliauskas]

Hi,

I think, tiles Uri must end with ".pbf":

Vector Tile—ArcGIS REST APIs | ArcGIS Developers

[dotMorten_esri]

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

[jm2024]

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?