Tiles in the wrong projection? (mbtiles mbutil openlayers.tms)

Question

I am having trouble taking my tilemill project to my webserver and using OpenLayers to draw my map.

We are using tilemill to style the map > mbtiles export > mbutil to directory > openlayers.tms

I have attached below the code we are using, which is a modification of the OpenLayers.TMS example.

Here is the link to my map and you will see the problem, first hand:

<!DOCTYPE html>
<html>
<head>
<title>OpenLayers Tiled Map Service Example</title>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
    var lon = 0;
    var lat = 0;
    var zoom = 0;
    var map, layer;

    function init(){
        OpenLayers.ImgPath = "http://js.mapbox.com/theme/dark/";
        map = new OpenLayers.Map( 'map', {maxResolution:1.40625/2} );
        layer = new OpenLayers.Layer.TMS( "ttc",
                "http://wrimaptube.nfshost.com/ttctiles3/", {layername: 'ttc3', type:'png'} );
        map.addLayer(layer);
        map.addControl(new OpenLayers.Control.LayerSwitcher());
        map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
    }
    function addTMS() {
        l = new OpenLayers.Layer.TMS(
            OpenLayers.Util.getElement('layer').value,
            OpenLayers.Util.getElement('url').value,
            {
                'layername': OpenLayers.Util.getElement('layer').value,
                'type': OpenLayers.Util.getElement('type').value
        });
        map.addLayer(l);
        map.setBaseLayer(l);
    }
</script>
</head>
<body onload="init()">
<div id="map" style='width: 1024px; height : 500px;'>
</div>
</body>
</html>

Suggestions?

Thanks a lot,

Michael

so what's exactly the problem? everything seems to be working fine, except that you get pink tiles outside of world and after certain zoom level. looks like the problem is that the images are missing. — igorti, Jul 13 '11 at 20:40
The pink tiles are asking to be filled by tiles located on the server... however, the maps extent is the single tile (at zoom level 0). I should have mentioned that I did not render zoom levels >1. — Michael, Jul 13 '11 at 22:42
The TMS example, http://openlayers.org/dev/examples/tms.html displays a differently projected world than my map from tilemill. — Michael, Jul 13 '11 at 22:43
You can add my map as a layer on top of the tms example with the following settings: `url = "http://wrimaptube.nfshost.com/ttctiles4/"` `name = "ttc4"` `type = "png"` less the quotations.. — Michael, Jul 13 '11 at 22:45

score 1 · Answer 1 · answered Jul 14 '11 at 06:31

Fixed it using the code found on: http://wiki.openstreetmap.org/wiki/Talk:Openlayers_POI_layer_example

Here is what the code looks like for my MAP:

<html>
<head>
<title>Markieta</title>
<script src="http://www.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;
                //alert(this.url + z + "/" + x + "/" + y + "." + this.type);
                    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(-20037508, -20037508,
                                             20037508, 20037508.34)
        };
        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(
            "Markieta",
            "http://markieta.nfshost.com/ttctiles7/", {layername: 'ttc7', type: 'png'}
        );

        map.addLayer(layer);

        if(!map.getCenter()){
        map.setCenter(new OpenLayers.LonLat(-8835000,5427500),11);
    }
}

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

However, I am still having trouble with the OpenLayers.Controls class... I'll leave that for another day. (as you can see, the panzoombar, layerswitcher, permalink and mouseposition are not being created..)

If i have a google map long-lat value. How can i mark it on a map published with the above method ? — ratata, Jul 06 '13 at 00:15

Tiles in the wrong projection? (mbtiles mbutil openlayers.tms)

1 Answers1