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 © 2008 <a href="http://www.klokan.cz/">Klokan Petr Pridal</a>, <a href="http://www.gdal.org/">GDAL</a> & <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>
