WMS/WMTS Tile Service Integration?

[jfuehner]

Hi! I am new to harp and am looking at using it for integrating with a WMS or WMTS tile service. I thought perhaps this example was the correct route.

I can see tile network requests going out to the server and tiles being returned. However, nothing is rendered to the screen. The screen appears completely black? Additionally, the tileKey's level property for some reason starts at 5 when I would expect 0?

Any assistance would be great!

[nzjony]

As far as I'm aware, we don't support WMS or WMTS, though probably you could add support.

That example doesn't exist anymore, if you search on the master branch it is gone, do you mean instead: https://www.harp.gl/docs/master/examples/#datasource_here-webtile.html ?

I guess you need to checkout out the latest master and retry?

[nzjony]

What projection are you using? And what projection are the images in?

Do you have some repo I can try and debug? Or a screenshot at least?

[jfuehner]

@nzjony sorry about that, I should have provided more details...

The ESRI map service is projected in the spatial reference EPSG:4326. You can see the service description by browsing to:

https://services.arcgisonline.com/arcgis/rest/services/ESRI_Imagery_World_2D/MapServer

I mocked up a StackBlitz example of what I am seeing. In the example I am trying to use harp with deck.gl.

[nzjony]

@jfuehner , thanks for the update. It seems you need to find the correct tiling scheme, if I'm not mistaken, you can pass this into the DataSource constructor. Basically, it describes how the tiles are subdivided. It seems that it has some half quad tree subdivision scheme? Like: https://github.com/heremaps/harp.gl/blob/master/@here/harp-geoutils/lib/tiling/HalfQuadTreeSubdivisionScheme.ts

Or download the harp.gl code and search for TilingScheme.

I hope that helps.

[jfuehner]

@nzjony I tried simply passing the tilingScheme property as a part of the data source construction. However, that didn't seem to make a difference...

https://codesandbox.io/s/serverless-wildflower-7orbf

    const webTileDataSource = new WebTileDataSource({
      tilingScheme: halfQuadTreeSubdivisionScheme,
      dataProvider: {
        getTexture: context.getTexture,
      },
    });

Looking at the WebTileDataSource I only see a getter for the tiling scheme. In looking at the harp website CustomDataSource example I see where a tilingScheme is being passed to the constructor of a custom data source.

I'm wondering if perhaps I can't specify a tilingScheme with the WebTileDataSource but instead need to create a custom data source?

[nzjony]

Sorry, I was wrong, it seems that you need to override it:

I.e. create a class that extends from WebTileDataSource and override getTilingScheme

[jfuehner]

@nzjony hmm... extending the WebTileDataSource / getTilingScheme seems to get me a little farther. However, the halfQuadTreeSubdivisionScheme does not appear to expose/implement the getGeoBox (See error screen capture) function.

https://codesandbox.io/s/serverless-wildflower-7orbf

Do I need to implement my own titling scheme class?

[jfuehner]

@nzjony a little trial and error and was able to get the extended WebTileDataSource class to start rendering tiles...

class CustomWebTileDataSource extends WebTileDataSource {
  getTilingScheme() {
    return new TilingScheme(halfQuadTreeSubdivisionScheme, webMercatorProjection);
  }
}

However, they still appear incorrect. I assume it is due to the projection I've passed. I tried the other available projections I have found in the harp-geoutils/projection package. None seem to project the tiles correctly...

[nzjony]

Screen shot?

Yes, maybe you need to implement your own tiling scheme class to fit the way these are cut. I was hoping one of the existing ones would work... but obviously not.

[jfuehner]

@nzjony

Looking at the projection classes they seem a bit out of my depth. Ugh... Was hoping this was going to be easier.

[nzjony]

@jfuehner , I don't think the issue is the projection, I think it is the tiling scheme.

At least the images seem to be in equirectangular projection? You just need to know how to piece the tiles together.

Please send through another update and maybe I can look at it tomorrow.

[jfuehner]

@nzjony here is the CodeSandbox I have been working with...

https://codesandbox.io/s/serverless-wildflower-7orbf

OpenLayers actually has an example on using an ArcGIS tile service endpoint in EPSG:4326 projection. Looks like they set the maxResolution: 180 / 512. Not sure how this would translate to harp.

https://openlayers.org/en/latest/examples/xyz-esri-4326-512.html

If I try using the equirectangularProjection it looks like this.

When I zoom in the tiles go all out of whack...

The webMercatorProjection seems to be the closest.

[nzjony]

I checked this: https://gis.stackexchange.com/questions/387517/what-is-meant-with-epsg4326-projection

EPSG4326 isn't actually a projection, it is just a reference system. I guess that is why I was confused. But it seems if you just put the numbers onto a grid, you get something that looks Equirectangular, at least that is what the images look like, the tiles don't look like the mercator projection.

The screenshot you shared seems good, which tiling scheme do you use? I Think you just need to tweak the way the tiles are subdivided.

[nzjony]

I.e. at level 0, how many tiles are there in the X direction and in the Y direction?
At level 1, how many are there

And so on...

And make a class which captures this

I.e.

class CustomSubdivision implements SubdivisionScheme {
    getSubdivisionX(): number {
        return <what you found out above>;
    }

    getSubdivisionY(level: number): number {
        return <what you found out above>;
    }

    getLevelDimensionX(level: number): number {
         return <what you found out above>;
    }

    getLevelDimensionY(level: number): number {
        return <what you found out above>;
    }
}

[jfuehner]

@nzjony I created a custom implementation of the subdivision scheme. However, modifying the x/y subdivisions do not seem to be having the desired impact.

You can see a working copy here...

https://codesandbox.io/s/serverless-wildflower-7orbf

export class CustomSubdivisionScheme {
  getSubdivisionX() {
    return 2;
  }

  getSubdivisionY() {
    return 2;
  }

  getLevelDimensionX(level) {
    return 1 << level;
  }

  getLevelDimensionY(level) {
    return 1 << level;
  }
}

class CustomWebTileDataSource extends WebTileDataSource {
  getTilingScheme() {
    return new TilingScheme(
      new CustomSubdivisionScheme(),
      equirectangularProjection
    );
  }
}

[nzjony]

@jfuehner , according to: https://services.arcgisonline.com/arcgis/rest/services/ESRI_Imagery_World_2D/MapServer

The first level 0 has only 2 images, so getSubdivisionY should be like:

getSubdivisionY(level: number): number {
        return level === 0 ? 1 : 2;
    }

[nzjony]

Or... something like that, maybe it is subdivision X.