Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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

share|improve this question
add comment

1 Answer 1

up vote 5 down vote accepted

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");
share|improve this answer
    
I've added you suggestions but the map still does not load. When I inspect the page with chrome you can see the OpenLayer <div> elements added by the script and no JS errors in the console. I'll search more about bounds/transform/epsg. –  ChrisC Nov 23 '12 at 14:12
    
When I console.log(xyz) the layer object has numZoomLevels: 19. My map only has 0-14 zoom levels, should I be adding more restrictive options in any of the constructors? –  ChrisC Nov 23 '12 at 14:40
    
Check the Network tab for individual tile requests, and compare them to your tile cache. I'm not familiar with Maperitive, and there are too many things that could have gone wrong. My suggestion was based on a probable mistake in the code you presented. If you want to be sure that the map is not in a non-existing zoom level, you could use map.zoomTo() to zoom to any specific level. –  kprist Nov 23 '12 at 15:32
    
Thanks for the reply. I captured extent.getCenterLonLat() and then called map.setCenter(lonlat) and map.zoomTo(10). This causes some images (ex. /10/287/132.png) to be 404 not found. I'll update my question with the command from maperitive I used to generate the tiles. –  ChrisC Nov 23 '12 at 15:57
    
When I call map.zoomTo(0) it tries to load tiles/1/1/0.png but I only have tiles/1/0/0.png available. Would this be an issue with setting the bounds still? –  ChrisC Nov 23 '12 at 16:25
show 1 more comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.