[GIS] OpenLayers XYZ Unable to Load Local Tiles

maperitiveopenlayers-2openstreetmap

I have some local tiles that were generated from OpenStreetMaps using Maperitive. I've tried going through the docs and tests but the map is not loading. I'm not getting any errors in chrome's js console either.

I think OpenLayers has access to my images because previous errors stated that some tiles could not be found. The solution to that problem was to initialize the OpenLayers.Map.restrictedExtent with bounds. I'm not sure where to go from here.

function initMap() {
    var extent = new OpenLayers.Bounds(-80.604570, 43.228173, -79.481697, 43.607333);
        extent = extent.transform("EPSG:4326", "EPSG:900913");

    var map = new OpenLayers.Map('map',  {restrictedExtent:extent});
    //var options = {'layername':'basic', 'type':'png'};
    var xyz = new OpenLayers.Layer.XYZ('OpenLayersXYZ', 'http://localhost:8081/maps/tiles/${z}/${x}/${y}.png', {sphericalMercator:true, layers:'basic'});
    console.log(xyz);
    map.addLayer(xyz);
    map.zoomToExtent(extent);
}

<!DOCTYPE html>
<html>
<head>
    <script src="scripts/openlayers/OpenLayers.debug.js" type="text/javascript"></script>
    <!-- explore -->
    <script src="scripts/olayer-local-tiles.js" type="text/javascript"></script>
</head>
<body onload="initMap();">
     <div style="width:100%; height:100%" id="map"></div>
</body>
</html>

Maperitive log from tile generation:

set-geo-bounds

Setting the geometry bounds to srid=4326, (-80.604904441331,43.2284165575301,-79.4820319148331,43.6075754238019)

set-print-bounds-view

Set the printing bounds to '-80.604570253079,43.2281730577825,-79.4816977265812,43.6073334440597'

generate-tiles minzoom=0 maxzoom=14

Best Answer

It seems that you're trying to restrict the extent of a spherical mercator map (projection EPSG:900913) using bounds in lat/lon coordinates (EPSG:4326). That won't do I'm afraid, you have to create a bounds object using spherical mercator coordinates.

You can do that with the coordinates you already have, like this:

var extent = new OpenLayers.Bounds(-80.604570, 43.228173, -79.481697, 43.607333);
extent = extent.transform("EPSG:4326", "EPSG:900913");
Related Question