1

I'm a bit at a loss of configuring OpenLayers 3 to display a generated TMS layer (in 3857) on top of an OSM layer. You can see the parameters of the TMS layer here.

This is what I have so far, but that's not doing much...

Anyone knows what wrong?

Here is a jsfiddle of it: https://jsfiddle.net/pieterdhondt/4snbzL1r/

<div id="map" class="map"></div>
<script type="text/javascript">
    var tms_resolutions_3857_tynset = [5.8135986328125, 2.90679931640625, 1.45339965820313, 0.726699829101563, 0.363349914550781, 0.181674957275391, 0.0908374786376953, 0.0454187393188477];
    var extent_3857_tynset = [8923848.54918488, 1199098.1904393, 8924597.49205864, 1199956.06726346];

    var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            new ol.layer.Tile({
                preload: 1,
                source: new ol.source.TileImage({
                    crossOrigin: null,
                    extent: extent_3857_tynset,
                    tileGrid: new ol.tilegrid.TileGrid({
                        extent: extent_3857_tynset,
                        origin: [extent_3857_tynset[0], extent_3857_tynset[1]],
                        resolutions: tms_resolutions_3857_tynset
                    }),
                    tileUrlFunction: function (coordinate) {

                        if (coordinate === null) return undefined;

                        // TMS Style URL
                        var z = coordinate[0];
                        var x = coordinate[1];
                        var y = coordinate[2];
                        var url = 'https://quadridcmmaps.blob.core.windows.net/tynset/' + z + '/' + x + '/' + y + '.png';
                        return url;
                    }
                })
            })
        ],
        target: 'map',
        view: new ol.View({
            center: [1200512.8002755763, 8925231.712804087],
            zoom: 14
        })
    });
</script>

2 Answers 2

1

Ok found out about it!

The extent and the center was mixed up...

Here's a working fiddle: https://jsfiddle.net/4snbzL1r/2/ :)

1

This should already be too late, but for anyone (like me) coming across this question, please check the below JSFiddle for avoiding a tileUrlFunction and go with a simpler way of just providing the url format.

https://jsfiddle.net/4snbzL1r/6/

Just provide the "url" option instead of tileUrlFunction like:

url: 'https://quadridcmmaps.blob.core.windows.net/tynset/{z}/{x}/{-y}.png'

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.