I want to create an application using vector tile. I am using openlayers v.5 and geoserver 2.14.1 for this purpose. I have already rendered vector tiles, but not able to get bounding box of the vector tile. Here is my sample code:

      var gridsetName = 'EPSG:4326';

      var gridNames = ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18', 'EPSG:4326:19', 'EPSG:4326:20', 'EPSG:4326:21'];

       var baseUrl = 'http://localhost:8080/geoserver/gwc/service/wmts';
        var style = '';
        var format = 'application/vnd.mapbox-vector-tile';
        var infoFormat = 'text/html';
        var layerName = 'cite:OPE_MAP_SpatelSpeed';
        var projection = new ol.proj.Projection({
            code: 'EPSG:4326',
            units: 'degrees',
            axisOrientation: 'neu'

   function constructSource() {
            params = {
                'REQUEST': 'GetTile',
                'SERVICE': 'WMTS',
                'VERSION': '1.0.0',
                'LAYER': layerName,
                'STYLE': style,
                'TILEMATRIX': gridsetName + ':{z}',
                'TILEMATRIXSET': gridsetName,
                'FORMAT': format,
                'TILECOL': '{x}',
                'TILEROW': '{y}',
                'VIEWPARAMS': 'ispercent:1;R:0000FF;zoomlevel:' + getzoom() + '',

            var url = baseUrl + '?'
            for (var param in params) {
                url = url + param + '=' + params[param] + '&';

            url = url.slice(0, -1);

            var source = new ol.source.VectorTile({
                url: url,
                format: new ol.format.MVT({}),
                projection: projection,
                tileGrid: new ol.tilegrid.WMTS({
                    tileSize: [256, 256],
                    origin: [-180.0, 90.0],
                    resolutions: resolutions,
                    matrixIds: gridNames

                wrapX: true

            return source;

  var layer = new ol.layer.VectorTile({
            style: simpleStyle,
            source: constructSource()


sample request call using wmts service:'http://localhost:8080/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=cite:OPE_MAP_SpatelSpeed&STYLE=&TILEMATRIX=EPSG:4326:9&TILEMATRIXSET=EPSG:4326&FORMAT=application/vnd.mapbox-vector-tile&TILECOL=300&TILEROW=139&VIEWPARAMS=ispercent:1;R:0000FF;zoomlevel:7'.

My layer cite:OPE_MAP_SpatelSpeed is generated using SQL view of geoserver in which i have to pass few viewparams to fetch the data accordingly. e.g viewparam ='zoomlevel:4;func:1'

My problem is along with viewparams i have to pass bounding box of the requested tile. Does there is any way to get bounding box coordinates of the requested vector tile Or how can we calculate the bounding box on the basis of tile column and row number??

I have read about getTileCoord() function in openlayers but this function is not working in my case.

1 Answer 1


Try something like this to get the bounding box of the requested tile:

function tileExtent (tileXYZ, source) {
    var z = tileXYZ[0];
    var x = tileXYZ[1];
    var y = tileXYZ[2];
    var tileGrid = source.getTileGrid();
    var tileGridOrigin = tileGrid.getOrigin();
    var tileSizeAtResolution = tileGrid.getTileSize(z) * tileGrid.getResolution(z);
    return [
        tileGridOrigin[0] + tileSizeAtResolution * x,
        tileGridOrigin[1] + tileSizeAtResolution * y,
        tileGridOrigin[0] + tileSizeAtResolution * (x + 1),
        tileGridOrigin[1] + tileSizeAtResolution * (y + 1)
  • tileGrid already has a getTileCoordExtent() method which does that
    – Mike
    Commented Jan 28, 2019 at 9:43
  • Didn't check, sorry. This method was not there back in v3.x times.
    – Ulas
    Commented Jan 28, 2019 at 10:31
  • Yes, introduced in 3.12 Before that you had to do it the long way if you wanted to build a custom url for WMS tiles, etc.
    – Mike
    Commented Jan 28, 2019 at 10:39
  • It worked, Thanx !!! Commented Jan 28, 2019 at 11:02

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.