[GIS] Display two generated tiles on one map using Openlayers

displayjavascriptopenlayers-2tilesweb-mapping

i have a multiple Geo-referenced tiff

I want to display Two TMS layer on one map.

in another way i want to display tow tailed tiff image in the same map like the picture bellow using Openlayers and without any cartography server .

i tried all what i can do but without any result,
I'm still working on it please I'm looking for somebody to help me

this is explanation (for problem ):

this is a screen shot from QGIS desktop (showing tow images in the same time).

PROBLEM

I'm working on a mobile application using cordova + OpenLayers-2.13.1
– the application must work off line no cartography server so i choose to use tiles, for this i used Maptiler 1.0 Beta 2 (open source)

i created tiles for each image :

this is the result :

each images was generated in a folder and has it code html+ JavaScript page for display

code source generated for the first page :

    <!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>MAP_1A_2_1.TIF</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='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1'></script>
            <script src="http://www.openlayers.org/api/2.7/OpenLayers.js" type="text/javascript"></script>
            <script type="text/javascript">
                var map;
                var mapBounds = new OpenLayers.Bounds( -8.32551889184, 32.8485573951, -8.27061152288, 32.8948926537);
                var mapMinZoom = 12;
                var mapMaxZoom = 20;
    //var mapexb =new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508.34);

                // 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)
                    };

    //               (203016.74715410196, 1894235.01319894, 3055035.146019727, 4007565.9708489403)


                map = new OpenLayers.Map('map', options);



                // create Virtual Earth layers
                OpenLayers.Layer.VirtualEarth.prototype.MAX_ZOOM_LEVEL=19;
                OpenLayers.Layer.VirtualEarth.prototype.RESOLUTIONS=OpenLayers.Layer.Google.prototype.RESOLUTIONS
                var veroad = new OpenLayers.Layer.VirtualEarth("Virtual Earth Roads",
                    {'type': VEMapStyle.Road, 'sphericalMercator': true, numZoomLevels: 20});
                var veaer = new OpenLayers.Layer.VirtualEarth("Virtual Earth Aerial",
                    {'type': VEMapStyle.Aerial, 'sphericalMercator': true, numZoomLevels: 20 });
                var vehyb = new OpenLayers.Layer.VirtualEarth("Virtual Earth Hybrid",
                    {'type': VEMapStyle.Hybrid, 'sphericalMercator': true});


                // 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", "",
                    {   // url: '', serviceVersion: '.', layername: '.',
                        type: 'png', getURL: overlay_getTileURL, alpha: true, 
                        isBaseLayer: false
                    });
                if (OpenLayers.Util.alphaHack() == false) { tmsoverlay.setOpacity(0.7); }

                map.addLayers([veaer,veroad,  vehyb, 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 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 (this.map.baseLayer.name == 'Virtual Earth Roads' || this.map.baseLayer.name == 'Virtual Earth Aerial' || this.map.baseLayer.name == 'Virtual Earth Hybrid') {
                   z = z + 1;
                }
                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="header"><h1>MAP_1A_2_1.TIF</h1></div>
            <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>
            <!-- LET THIS NOTE ABOUT AUTHOR AND PROJECT SOMEWHERE ON YOUR WEBSITE, OR AT LEAST IN THE COMMENT IN HTML. -->
            </div>
            <div id="map"></div>
            <script type="text/javascript" >resize()</script>
          </body>
        </html>

this is the second page :

<!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>MAP_1A_1_1.TIF</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='http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.1'></script>

            <script src="http://www.openlayers.org/api/2.7/OpenLayers.js" type="text/javascript"></script>
            <script type="text/javascript">
                var map;
                var mapBounds = new OpenLayers.Bounds( -8.37895410917, 32.8472818813, -8.32402054588, 32.8936399057);
                var mapMinZoom = 12;
                var mapMaxZoom = 18;

                // 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);


//{ -2969425.6743281255,  2411741.1161562973,  1090909.2674531247,  4322055.326717235}
                // create Virtual Earth layers
                OpenLayers.Layer.VirtualEarth.prototype.MAX_ZOOM_LEVEL=18;
                OpenLayers.Layer.VirtualEarth.prototype.RESOLUTIONS=OpenLayers.Layer.Google.prototype.RESOLUTIONS
                var veroad = new OpenLayers.Layer.VirtualEarth("Virtual Earth Roads",
                    {'type': VEMapStyle.Road, 'sphericalMercator': true, numZoomLevels: 20});
                var veaer = new OpenLayers.Layer.VirtualEarth("Virtual Earth Aerial",
                    {'type': VEMapStyle.Aerial, 'sphericalMercator': true, numZoomLevels: 20 });
                var vehyb = new OpenLayers.Layer.VirtualEarth("Virtual Earth Hybrid",
                    {'type': VEMapStyle.Hybrid, 'sphericalMercator': true});



                // 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", "",
                    {   // url: '', serviceVersion: '.', layername: '.',
                        type: 'png', getURL: overlay_getTileURL, alpha: true, 
                        isBaseLayer: false,
                        transparent:true,
                    });
                if (OpenLayers.Util.alphaHack() == false) { tmsoverlay.setOpacity(0.7); }

                map.addLayers([ veroad, veaer, vehyb, 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 (this.map.baseLayer.name == 'Virtual Earth Roads' || this.map.baseLayer.name == 'Virtual Earth Aerial' || this.map.baseLayer.name == 'Virtual Earth Hybrid') {
                   z = z + 1;
                }
                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="header"><h1>MAP_1A_1_1.TIF</h1></div>
            <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>
            <!-- LET THIS NOTE ABOUT AUTHOR AND PROJECT SOMEWHERE ON YOUR WEBSITE, OR AT LEAST IN THE COMMENT IN HTML. -->
            </div>
            <div id="map"></div>
            <script type="text/javascript" >resize()</script>
          </body>
        </html>

Download Sample Data

I'm Open if there is another way to do it

Best Answer

I don't have Maptiler 1.0 Beta 2 to test with, so I'm making a couple of assumptions:

You have tiles in the XYZ format and not the TMS format. I'm making this assumption because your screenshot shows "Google Maps Compatible" selected
You are using Openlayer 2.x

What I would do is to put the the two folders in one main folder such as:

Map
 MAP_1A_1_1
 MAP_1A_2_1
 index.html

Then in the OpenLayers Code, I will Add Both the XYZ Layers like this:

var layer1=new OpenLayers.Layer.XYZ(
            "MAP_1A_1_1", 
           "MAP_1A_1_1/${z}/${y}/${x}");

var layer2=new OpenLayers.Layer.XYZ(
            "MAP_1A_2_1", 
           "MAP_1A_2_1/${z}/${y}/${x}");

I would then add the two layers to the map as such: map.addLayers([layer1, layer2]);

And If you have a TMS tiles, then just use OpenLayers.Layer.TMS instead of OpenLayers.Layer.XYZ

this is the second page :

Best Answer

Related Solutions

[GIS] Problems with features, popups and strategy with OpenLayers

OpenLayers – Troubleshooting Wrong Tiles Generated in OpenLayers XYZ Layer

Related Question