2

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 ):

enter image description here

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 :

enter image description here

this is the result :

enter image description here

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

enter image description here

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

Improve this question
5
  • 3
    I'm still unclear about your exact problem. Is the white border around the images you problem?
    – Devdatta Tengshe
    Oct 10, 2015 at 4:11
  • @DevdattaTengshe thank you for your comment. so the first image is a screen shot from QGIS desktop and i want to do the same thing using Openlayers. for example i have tow tailed image (tiff) and i want to show them in the same map like the first image using openlayers and without any cartography server
    – Mounaim
    Oct 13, 2015 at 1:46
  • Is it an option for you to combine the two tiffs into a vrt before tiling the whole in one go?
    – AndreJ
    Oct 13, 2015 at 5:46
  • @AndreJ thank you for your comment , no cause if i want to add another one i have to combine all again and create tiles
    – Mounaim
    Oct 13, 2015 at 17:16
  • @DevdattaTengshe i added sample Data
    – Mounaim
    Oct 14, 2015 at 13:34

4 Answers 4

Reset to default
4
+25

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

  1. 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
  2. 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

Improve this answer
5
  • 1
    This makes it slightly harder to update in the future than just a merge of the .tif files; but otherwise the most sensible solution, +1
    – alphabetasoup
    Oct 14, 2015 at 8:15
  • Why is this hard to update?
    – Devdatta Tengshe
    Oct 14, 2015 at 8:19
  • 1
    Well, it's unlikely, but if you have fifty .tif layers, I think it'd be better just to combine them into one image before touching any client JS.
    – alphabetasoup
    Oct 14, 2015 at 8:21
  • i added sample Data
    – Mounaim
    Oct 14, 2015 at 13:34
  • i tested this solution but without any result
    – Mounaim
    Oct 19, 2015 at 9:19
1

I don't know your detail requirement but one other way to fullfill this by putting two map in parallel load as below.

<div id="mapTile1"></div> <div id="mapTile2"></div>

& use base map as clone so one movement operation also affect other one....

Improve this answer
1
  • the problem is that i want to display multi tailed tiff in the same map like the first screen shot taken from QGIS Desktop using only openlayer and without Cartography server for exemple each tailed tiff will be in a different overlay layer .. i wrote a sample from only tow images to simplify the problem but my goal is to show multiple tailed tiff in the same map
    – Mounaim
    Oct 13, 2015 at 2:01
1

Have you considered just merging the .geotiff files into one (and then doing what you have already done)? GDAL has the ability to do this:

gdal_merge.py image1.tif image2.tif -o merged.tif

If you're concerned about the need to add more .geotiff files, then you could write a bash script to merge all .tif files in a directory, and then run your MapTiler process. Then it'd just be a matter of dropping more images into that directory and running the script to update. Let me know if you want/need help with that part.

Improve this answer
2
  • no cause if i want to add another one i have to merge all again and create tiles , I'm looking for solution that i can add folder tile and add the layer in the code
    – Mounaim
    Oct 14, 2015 at 11:10
  • I don't think there is a solution that will just allow you to specify a folder in your JS just once. IMO this is the nearest to what you want.
    – alphabetasoup
    Oct 14, 2015 at 18:04
0

There is the QTiles-plugin, which will create map tiles from your current qgis project.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.