6

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

Improve this question

2 Answers 2

Reset to default
7

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");
Improve this answer
6
  • 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
    Commented Nov 23, 2012 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
    Commented Nov 23, 2012 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
    Commented Nov 23, 2012 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
    Commented Nov 23, 2012 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
    Commented Nov 23, 2012 at 16:25
0

Are you committed to using OpenLayers only? Is Leaflet an option? I found the Leaflet code a lot simpler in the local-tiles use case. Here's the code (get the full .js and .css paths from leaflet website.. I've localized everything here as this is going to be operated offline)

<html>
<head>
<link rel="stylesheet" href="lib/leaflet.css" />
</head>
  <style>
        body { padding: 0; margin: 0; }
        html, body, #map { height: 100%;  width: 100%; }
    </style>
<body>
<div id="map"></div>
<script src="lib/leaflet.js"></script>
<script>
FOLDER=".";

ATTRIBUTION='Map tiles generated for local use by <a href="http://maperitive.net">Maperitive</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.';

var map = L.map('map', {
    center: [18.512224413095872, 73.868436919390348],
    zoom: 1, maxZoom: 14, minZoom: 1 ,
    maxBounds: [
    [18, 73],
    [19, 75]
    ]
});
L.tileLayer(FOLDER+'/{z}/{x}/{y}.png', { attribution: ATTRIBUTION,
errorTileUrl: "lib/errortile.png" ,
 }).addTo(map);

</script>
</body>
</html>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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