Create tilelayer using a GDAL Tiler tilematrix set

I'm porting an application from Bing maps which used many tilesets generated using the GDAL tiler. In the Bing Maps API these layers needed a custom url which modified the y component. So where A...

Kidd_Ip

MVP

Aug 07, 2025

How about this, to modify the tile URL dynamically to match the GDAL Tiler’s tilematrix set:

const map = new atlas.Map('myMap', {
  center: [0, 0],
  zoom: 2,
  authOptions: {
    authType: 'subscriptionKey',
    subscriptionKey: '<Your Azure Maps Key>'
  },
  transformRequest: function (url, resourceType) {
    if (resourceType === 'Tile') {
      const regex = /{x}|{y}|{z}/g;
      return {
        url: url.replace(regex, function (match) {
          switch (match) {
            case '{x}': return '{x}';
            case '{y}': return '{yflip}'; // We'll replace this manually below
            case '{z}': return '{z}';
          }
        })
      };
    }
    return { url };
  }
});

// Add tile layer with custom URL
const tileLayer = new atlas.layer.TileLayer({
  tileUrl: 'https://yourserver.com/tiles/{z}/{x}/{yflip}.png',
  tileSize: 256
});
map.layers.add(tileLayer);

// Replace {yflip} with flipped Y value
map.events.add('render', () => {
  const zoom = map.getCamera().zoom;
  const ymax = 1 << Math.floor(zoom);
  // You’ll need to intercept tile requests and replace {yflip} with ymax - y - 1
});

4451

Copper Contributor

Sep 01, 2025

Hi again, I'm afraid I can't get this code to work as so I'm trying another approach of making a script to rename the png files. I need to do the reverse of the code below. A code snippet would be very much appreciated.

zoom = map.getCamera().zoom;

ymax = 1 << Math.floor(zoom);

// You’ll need to intercept tile requests and replace {yflip} with ymax - y - 1

Thanks,

Steve

Forum Discussion

Create tilelayer using a GDAL Tiler tilematrix set

Resources