Forum Discussion
Create tilelayer using a GDAL Tiler tilematrix set
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
});
- 4451Sep 01, 2025Copper Contributor
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
- 4451Aug 08, 2025Copper Contributor
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