[GIS] OpenLayers 3: Overlay a TMS layer on a OSM layer

openlayerstile-map-service

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>

Best Answer

Ok found out about it!

The extent and the center was mixed up...

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

Related Solutions

[GIS] GDAL TMS (WMS) mini driver

To avoid such problems with the file:// urls, I have set up a local apache server, so that I can access the tiles via http://localhost/.

This works for all use cases where online tiles are requested.

MS4W offers an apache installation, as well as OSGeo4W.

[GIS] Add TMS layer to OpenLayers

What you serve is not a TMS service acording to Openlayers specification. They expect a service which can be questioned for tiles similar to WMS.

Unfortunately, your tiles follw the OGC naming convention, and not OSM-like. See my answer here to number the tiles correctly:

GDAL2Tiles: MapTiles from BSB/KAP are Switched

EDIT

I finally managed to load the data into QGIS using the TileLayer Plugin. That allows to switch the layer numbering between OGC and OSM.

This is my entry in the config file:

khorog  khorog  http://humadat.alwaysdata.net/tms/khorog/tiles/{z}/{x}/{y}.jpg  0   12  16  -180    -85.0   180.0   85.0

Note that tabs have to be used as delimiters. And this is the result:

enter image description here

with OSM in the background and your tiles transparently overlayed (which Openlayers plugin will do not either).

Last Edit

I finally got success with your Maptiler tiles by using the Openlayers page that was created by Maptiler. They hacked the getURL to respect the inverse numbering:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html xmlns="http://www.w3.org/1999/xhtml>"
          <head>
            <title>khorog</title>
            <meta http-equiv='imagetoolbar' content='no'/>
            <style type="text/css"> v\:* {behavior:url(#default#VML);}
                html, body { overflow: hidden; padding: 0; height: 100%; width: 100%; font-family: 'Lucida Grande',Geneva,Arial,Verdana,sans-serif; }
                body { margin: 10px; background: #fff; }
                h1 { margin: 0; padding: 6px; border:0; font-size: 20pt; }
                #header { height: 43px; padding: 0; background-color: #eee; border: 1px solid #888; }
                #subheader { height: 12px; text-align: right; font-size: 10px; color: #555;}
                #map { height: 95%; border: 1px solid #888; }
            </style>
            <script src="OpenLayers.js" type="text/javascript"></script>
            <script type="text/javascript">
                var map;
                var mapBounds = new OpenLayers.Bounds( 71.5, 37.4, 71.6, 37.5);
                var mapMinZoom = 12;
                var mapMaxZoom = 20;

                // avoid pink tiles
                OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
                OpenLayers.Util.onImageLoadErrorColor = "transparent";

                function init(){
                var options = {
                    controls: [],
                    projection: new OpenLayers.Projection("EPSG:900913"),
                    displayProjection: new OpenLayers.Projection("EPSG:4326"),
                    units: "m",
                    maxResolution: 156543.0339,
                    maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508.34)
                    };
                map = new OpenLayers.Map('map', options);


                // create OSM/OAM layer
                var osm = new OpenLayers.Layer.TMS( "OpenStreetMap",
                    "http://tile.openstreetmap.org/",
                    { type: 'png', getURL: osm_getTileURL, displayOutsideMaxExtent: true, 
                      attribution: '<a href="http://www.openstreetmap.org/">OpenStreetMap</a>'} );


                // create TMS Overlay layer
                var tmsoverlay = new OpenLayers.Layer.TMS( "TMS Overlay", "http://humadat.alwaysdata.net/tms/khorog/tiles/",
                    {   // url: '', serviceVersion: '.', layername: '.',
                        type: 'jpg', getURL: overlay_getTileURL, alpha: true, 
                        isBaseLayer: false
                    });
                if (OpenLayers.Util.alphaHack() == false) { tmsoverlay.setOpacity(0.7); }

                map.addLayers([osm, tmsoverlay]);

                var switcherControl = new OpenLayers.Control.LayerSwitcher();
                map.addControl(switcherControl);
                switcherControl.maximizeControl();

                map.zoomToExtent( mapBounds.transform(map.displayProjection, map.projection ) );

                map.addControl(new OpenLayers.Control.PanZoomBar());
                map.addControl(new OpenLayers.Control.MousePosition());
                map.addControl(new OpenLayers.Control.MouseDefaults());
                map.addControl(new OpenLayers.Control.KeyboardDefaults());
            }

            function osm_getTileURL(bounds) {
                var res = this.map.getResolution();
                var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
                var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
                var z = this.map.getZoom();
                var limit = Math.pow(2, z);

                if (y < 0 || y >= limit) {
                    return "http://www.maptiler.org/img/none.png";
                } else {
                    x = ((x % limit) + limit) % limit;
                    return this.url + z + "/" + x + "/" + y + "." + this.type;
                }
            }

            function overlay_getTileURL(bounds) {
                var res = this.map.getResolution();
                var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
                var y = Math.round((bounds.bottom - this.tileOrigin.lat) / (res * this.tileSize.h));
                var z = this.map.getZoom();
                if (mapBounds.intersectsBounds( bounds ) && z >= mapMinZoom && z <= mapMaxZoom ) {
                   //console.log( this.url + z + "/" + x + "/" + y + "." + this.type);
                   return this.url + z + "/" + x + "/" + y + "." + this.type;
                } else {
                   return "http://www.maptiler.org/img/none.png";
                }
            }       

           function getWindowHeight() {
                if (self.innerHeight) return self.innerHeight;
                if (document.documentElement && document.documentElement.clientHeight)
                    return document.documentElement.clientHeight;
                if (document.body) return document.body.clientHeight;
                    return 0;
            }

            function getWindowWidth() {
                if (self.innerWidth) return self.innerWidth;
                if (document.documentElement && document.documentElement.clientWidth)
                    return document.documentElement.clientWidth;
                if (document.body) return document.body.clientWidth;
                    return 0;
            }

            function resize() {  
                var map = document.getElementById("map");  
                var header = document.getElementById("header");  
                var subheader = document.getElementById("subheader");  
                map.style.height = (getWindowHeight()-80) + "px";
                map.style.width = (getWindowWidth()-20) + "px";
                header.style.width = (getWindowWidth()-20) + "px";
                subheader.style.width = (getWindowWidth()-20) + "px";
                if (map.updateSize) { map.updateSize(); };
            } 

            onresize=function(){ resize(); };

            </script>
          </head>
          <body onload="init()">
            <div id="subheader">Generated by <a href="http://www.maptiler.org/">MapTiler</a>/<a href="http://www.klokan.cz/projects/gdal2tiles/">GDAL2Tiles</a>, Copyright &copy; 2008 <a href="http://www.klokan.cz/">Klokan Petr Pridal</a>,  <a href="http://www.gdal.org/">GDAL</a> &amp; <a href="http://www.osgeo.org/">OSGeo</a> <a href="http://code.google.com/soc/">GSoC</a>
            </div>
            <div id="map"></div>
            <script type="text/javascript" >resize()</script>
          </body>
        </html>

This works with all browsers.

Best Answer

Related Solutions

[GIS] GDAL TMS (WMS) mini driver

[GIS] Add TMS layer to OpenLayers

Related Question