Tilemill tiles as Openlayers TMS

Question

I´ve styled osm with tilemill (exported as mbtiles) with

bounds in Tilemill: 11.3022,47.9679,11.9064,48.3453
Center in Tilemill: 11.6153,48.1697,8

and extracted tiles with mb-util as png. This ended succesfully with pngs in folders from 11-19 (zoom-levels)

mb-util exported tiles

After that I´ve tried to integrate this tiles as tms tiles layers with a code I´ve found on stackoverflow.

<html>
<head>
<title>Markieta</title>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript">

    var map;

            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 OpenLayers.Util.getImagesLocation() + "404.png";
                } else {
                    x = ((x % limit) + limit) % limit;
                    return this.url + z + "/" + x + "/" + y + "." + this.type;
                }
    }


    function init() {
            var options = {
            projection: new OpenLayers.Projection("EPSG:900913"),
            displayProjection: new OpenLayers.Projection("EPSG:4326"),
            units: "m",
            numZoomLevels: 18,
            maxResolution: 156543.0339,
            maxExtent: new OpenLayers.Bounds(11.3022,
            47.9679,
            11.9064,
            48.3453)
        };
            var navigation_control = new OpenLayers.Control.Navigation({});
            var controls_array = [
            navigation_control,
            new OpenLayers.Control.PanZoomBar({}),
            new OpenLayers.Control.LayerSwitcher({}),
            new OpenLayers.Control.Permalink(),
            new OpenLayers.Control.MousePosition({})
    ];

        OpenLayers.ImgPath = "http://js.mapbox.com/theme/dark/";

        map = new OpenLayers.Map('map', options, {
        controls: controls_array
    });

        var layer = new OpenLayers.Layer.TMS(
            "local",
            "http://localhost/v1/", {layername: 'v1_tiles_xyz', type: 'png'}
        );

        map.addLayer(layer);

        if(!map.getCenter()){
        map.setCenter(new OpenLayers.LonLat(11.6153,48.1697,8),15);
    }
}

</script>
</head>
<body onload="init();">
<div id="map"></div>
<style type="text/css">

        body {
            margin: 0;
        }
        #map {
            width: 100%;
            height: 100%;
        }


        #text {
            position: absolute;
            bottom: 1em;
            left: 1em;
            width: 512px;
        }
</style>
</div>
</body>
</html>

Unfortunately my tiles stay pink, looking at the source tiles with following namens are created:

http://localhost/v1/1.0.0/v1_tiles_xyz/16/32807/32766.png

The Problem with this is tile 32807/32766.png is not existing! Something seems to be wrong with the extent and the calculation:

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

Thanks for any help!

Tilemill tiles as Openlayers TMS

0 Answers0