TileMatrixSets

[rbudhu]

Hello:

I'm trying to run the examples at: https://developmentseed.org/titiler/examples/notebooks/Working_with_nonWebMercatorTMS/ to render a EPSG:4326 (WorldCRS84Quad) map, but it does not seem to be working. The map output is always blank (even for the other projections).

In addition, I have tried to implement the following code using OpenLayers which correctly displays a COG when using EPSG:3857 basemap, tile matrix set, and projection, but gives "Tile is outside bounds" errors when switching to EPSG:4326 basemap, tile matrix set, and projection.

Any help would be appreciated. Thanks!

import './style.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import XYZ from 'ol/source/XYZ';

import {fromLonLat} from 'ol/proj';

import TileWMS from 'ol/source/TileWMS';

var scope = { url: "", metadata: {}, config: {} }

const tilejson_endpoint = ""
const metadata_endpoint = ""


const layers = [
  new TileLayer({
    source: new TileWMS({
      url: 'https://ahocevar.com/geoserver/wms',
      params: {
        'LAYERS': 'ne:NE1_HR_LC_SR_W_DR',
        'TILED': true,
      },
    }),
  }),
];

const map = new Map({
  target: 'map',
    layers: layers,
  view: new View({
      center: [99.7709369, 40.4011025],
      zoom: 11,
      projection: 'EPSG:4326'
  })
});

scope.url = "<url>"


const r = 3;
const g = 2;
const b = 1;

let params = {
    url: scope.url,
    resampling_method: "bilinear",
    bidx: `${r},${g},${b}`
}
let url_params = Object.keys(params).map(i => `${i}=${params[i]}`).join('&')


fetch(`http://HOST/cog/metadata?url=${scope.url}&pMin=0&pMax=100&max_size=256`)
    .then(res => {
        if (res.ok) return res.json()
        throw new Error('Network response was not ok.')
    })
    .then(data => {
        scope.metadata.statistics = data.statistics
        Object.entries(scope.metadata.statistics).forEach(entry => {
            scope.config[entry[0]] = { "min": entry[1].percentiles[0], "max": entry[1].percentiles[1] }
        })

        const r_rescale = `${scope.config[r].min},${scope.config[r].max}`
        const g_rescale = `${scope.config[g].min},${scope.config[g].max}`
        const b_rescale = `${scope.config[b].min},${scope.config[b].max}`
        const rescale_params = [r_rescale, g_rescale, b_rescale].map(i => `rescale=${i}`).join('&')
        url_params += `&${rescale_params}`

        let url = `http://HOST/cog/WorldCRS84Quad/tilejson.json?${url_params}`
        return fetch(url)
    })
    .then((res) => {
        if (res.ok) {
            return res.json()
        }
        throw new Error('Tile network response was not ok.')
    })
    .then(tileJSON => {
        const tileURL =`${tileJSON.tiles}&${url_params.toString()}`
        const layer = new TileLayer({
            source: new XYZ({
                url: tileURL
 })
        });
        map.addLayer(layer);
    });

[vincentsarago]

Hi @rbudhu sorry for the really late reply. I'm just working on it now and it seems that once again the TMS document (used to specify the tile bounds) is wrong and has inverted axis (as what we found for vincentsarago/TileMatrixSets#1)

[vincentsarago]

This is now fixed in 0.4 (using new morecantile developmentseed/morecantile#71)

[rbudhu]

Hi Vincent:

I'm not sure this entirely fixed the problem with map projections or I'm just doing something totally wrong. I downloaded the Dubai WGS84 DEM from here: http://demo.planetobserver.com/PlanetDEM_1s_Dubai.zip and tried to load it onto a Leaflet WGS84 basemap. TiTiler reports that the tiles are out of bounds.

And here's my Jupyter notebook code:

import json
import ssl
import certifi
import httpx

from ipyleaflet import (
    Map,
    basemaps,
    basemap_to_tiles,
    TileLayer,
    WMSLayer,
    GeoJSON,
    projections
)

titiler_endpoint = <endpoint>
url = <URL to WGS84 GeoTiff>

context = ssl.create_default_context()
context.load_verify_locations(cafile=certifi.where())

r = httpx.get(
    f"{titiler_endpoint}/cog/WorldCRS84Quad/tilejson.json", params = {"url": url}
).json()

m = Map(center=(0, 0), zoom=4, basemap=basemap_to_tiles(basemaps.Esri.WorldStreetMap), crs=projections.EPSG4326)

layer = TileLayer(url=r["tiles"][0], opacity=1)
m.add_layer(layer)
m

[vincentsarago]

It works fine for me

import json

import httpx

from ipyleaflet import (
    Map,
    basemaps,
    basemap_to_tiles,
    TileLayer,
    WMSLayer,
    GeoJSON,
    projections
)

titiler_endpoint = "http://127.0.0.1:8000"
url = "PlanetDEM_1s_Dubai_COG.tif"


r = httpx.get(
    f"{titiler_endpoint}/cog/WorldCRS84Quad/tilejson.json", params = {"url": url, "rescale": "0,250", "colormap_name": "terrain"}
).json()

m = Map(center=(25.585314404900345, 55.2255678580203), zoom=8, crs=projections.EPSG4326)

basemap = TileLayer(url="https://tile.gbif.org/4326/omt/{z}/{x}/{y}@1x.png?style=gbif-classic", opacity=1)
m.add_layer(basemap)


layer = TileLayer(url=r["tiles"][0], opacity=1)
m.add_layer(layer)
m

Notes:

• the default basemap in ipyleaflet are in EPSG:3857 projection (so you can't use them with crs=projections.EPSG4326
• The DEM has to be rescaled to a visual values (using min/max of the data, by default titiler will rescale using min/max of the datatype): "rescale": "0,250", "colormap_name": "terrain" (I'm adding a colormap for fun)