Forum Discussion

steve-smith's avatar
steve-smith
Copper Contributor
Aug 04, 2025

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 Azure Maps uses the the option tileUrl:url  I need something like ...

This works in Bing .....

uriConstructor:function(coord){  // coord is a PyramidTileId with : z,y,zoom,pixwidth,pixheight.
 var ymax=1<<coord.zoom;
 var y=ymax-coord.y-1;
 return url.replace('{x}',coord.x).replace('{y}',y).replace('{z}',coord.zoom);
 }
 
 
I do so hope there is someone out there with some cool code to get me out of a very tight spot.
 
Thanks
 
Steve

3 Replies

Sort By
  • Kidd_Ip's avatar
    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's avatar
      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

    • 4451's avatar
      4451
      Copper Contributor
      Aug 08, 2025

      Thank you Kid_Ip, this looks exactly what I need.

      Just one question, and forgive me for being slow, I have just inhereted and old Bing maps project and trying to get my head into the code.

      Could you explain how I might complete the code at ..

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

      Does the render event fire for each tile request and the event object supplies a url I need to alter ?

      Or is there an undocumented method in the API I could use to get all the tiles in the current render and allow me to do a .replace() on the urls ?

       

      Also, I assume the above code would only transform urls where {yflip} is used instead of {y} ?

       

      Thanks again,

       

      Steve

Resources