[GIS] Display local tiles with OpenLayers that are generated by MapTiler from a (.tif) georeferenced image

androidjavascriptmaptileropenlayers-2tiles

I'm working on a mobile app and trying to use my locally stored tiles that I generate using MapTiler software. after tiling my image.tif I have many folders of png images and two other files: openlayers.html and tilemapresource.xml but I'm facing problem to read them in my Android app and make OpenLayers display the tiles on the map.

openlayers.html:

<!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>SADINA.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://www.openlayers.org/api/2.7/OpenLayers.js" type="text/javascript"></script>
<script type="text/javascript">
var map;
var mapBounds = new OpenLayers.Bounds(269550.0, 3936000.0, 287550.0, 3954000.0);
var mapMinZoom = 0;
var mapMaxZoom = 8;

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

function init() {
    var options = {
        controls: [],
        maxExtent: new OpenLayers.Bounds(269550.0, 3936000.0, 287550.0, 3954000.0),
        maxResolution: 76.800000,
        numZoomLevels: 9
    };
    map = new OpenLayers.Map('map', options);

    var layer = new OpenLayers.Layer.TMS("TMS Layer", "", {
        url: '',
        serviceVersion: '.',
        layername: '.',
        alpha: true,
        type: 'png',
        getURL: overlay_getTileURL
    });
    map.addLayer(layer);
    map.zoomToExtent(mapBounds);

    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.maxExtent.bottom) / (res * this.tileSize.h));
    var z = this.map.getZoom();
    if (x >= 0 && y >= 0) {
        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>SADINA.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>
        <!-- PLEASE, 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>

tilemapresource.xml

<?xml version="1.0" encoding="utf-8"?>
<TileMap version="1.0.0" tilemapservice="http://tms.osgeo.org/1.0.0">
    <Title>SADINA.tif</Title>
    <Abstract></Abstract>
    <SRS>PROJCS["WGS 84 / UTM zone 30N", GEOGCS["WGS 84", DATUM["WGS_1984", SPHEROID["WGS 84",6378137,298.257223563, AUTHORITY["EPSG","7030"]], AUTHORITY["EPSG","6326"]], PRIMEM["Greenwich",0, AUTHORITY["EPSG","8901"]], UNIT["degree",0.01745329251994328, AUTHORITY["EPSG","9122"]], AUTHORITY["EPSG","4326"]], UNIT["metre",1, AUTHORITY["EPSG","9001"]], PROJECTION["Transverse_Mercator"], PARAMETER["latitude_of_origin",0], PARAMETER["central_meridian",-3], PARAMETER["scale_factor",0.9996], PARAMETER["false_easting",500000], PARAMETER["false_northing",0], AUTHORITY["EPSG","32630"], AXIS["Easting",EAST], AXIS["Northing",NORTH]]
    </SRS>
    <BoundingBox minx="3936000.00000000050000" miny="269549.99999999901000" maxx="3954000.00000000000000" maxy="287549.99999999854000" />
    <Origin x="3936000.00000000050000" y="269549.99999999901000" />
    <TileFormat width="256" height="256" mime-type="image/png" extension="png" />
    <TileSets profile="raster">
        <TileSet href="0" units-per-pixel="76.79999999999801" order="0" />
        <TileSet href="1" units-per-pixel="38.39999999999900" order="1" />
        <TileSet href="2" units-per-pixel="19.19999999999950" order="2" />
        <TileSet href="3" units-per-pixel="9.59999999999975" order="3" />
        <TileSet href="4" units-per-pixel="4.79999999999988" order="4" />
        <TileSet href="5" units-per-pixel="2.39999999999994" order="5" />
        <TileSet href="6" units-per-pixel="1.19999999999997" order="6" />
        <TileSet href="7" units-per-pixel="0.59999999999998" order="7" />
        <TileSet href="8" units-per-pixel="0.29999999999999" order="8" />
    </TileSets>
</TileMap>

Best Answer

If you use latest MapTiler version from http://www.maptiler.com/ to generate the tiles, it will directly produce for you an ready to use openlayers.html viewer.

You clearly use a very old version of MapTiler - as the viewer you show here is based on the old OpenLayers (v2) and the XML file is not anymore generated by recent MapTiler versions. Instead, there is a viewer with latest OpenLayers V3 (which has better performance on mobile devices) and metadata about tiles are provided in metadata.json file.

I recommend upgrading to the latest version of MapTiler.

It seems you have rendered your map in the "Advanced tiles" profile. For use in mobile apps, people typically choose the "Standard tiles". This means your map is going to be reprojected into Mercator to by compatible with Google Maps or OpenStreetMaps.

Related Question