I am trying to implement an UTFGrid layer on my OL 7.5.2 map, according to this sample: https://openlayers.org/en/latest/examples/utfgrid.html.

However, when creating the layer, the placeholders in the URL are not resolved, causing an Error response from the server.

This is my basic layer implementation:

import TileLayer from 'ol/layer/Tile'
import UTFGrid from 'ol/source/UTFGrid'

const gridSource = new UTFGrid({

const gridLayer = new TileLayer({source: gridSource});

And this is the error from the server, showing that the {z}/{x}/{y} placeholders in the URl do not get resolved:

enter image description here

Other posts (Implementing UTFGRID with MapServer and OpenLayers?) say, that you should use ol.source.TileUTFGrid, which I cannot find on the OL documentation (I assume that's from an older version).

Also I read about TileJSON, which is also given as an option on the documentation (https://openlayers.org/en/latest/apidoc/module-ol_source_UTFGrid-UTFGrid.html) but I do not see how to configure this. On the given OL sample above, TileJSON is not used for the UTFGrid layer.

Any working examples or hints, what is missing on my implementation?

1 Answer 1


Apparently, it is necessary to configure the TileJson parameter, as shown in this example here, to get OL do the substitution.

const gridSource = new UTFGrid({
  "tileJSON": {
    "tilejson": "2.2.0",
    "grids": [ "https://api.inaturalist.org/v1/points/{z}/{x}/{y}.grid.json" ]

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.