User:EdLoach/MaperitiveExample
Jump to navigation
Jump to search
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<TITLE>Simple Demo</TITLE>
<style type="text/css">
#map {
width: 100%;
height: 100%;
border: 0px;
padding: 0px;
position: absolute;
}
body {
border: 0px;
margin: 0px;
padding: 0px;
height: 100%;
}
</style>
<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 init(){
map = new OpenLayers.Map('map',
{ maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
numZoomLevels: 19,
maxResolution: 156543.0399,
units: 'm',
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326")
});
var newLayer = new OpenLayers.Layer.OSM("New Layer", "file://localhost/C:/Users/Ed/Downloads/Maperitive/Maperitive-1141/Tiles/${z}/${x}/${y}.png", {numZoomLevels: 19});
map.addLayer(newLayer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
var lonLat = new OpenLayers.LonLat(1.145, 51.865).transform(map.displayProjection, map.projection);
if (!map.getCenter()) map.setCenter (lonLat, 11);
}
// -->
</script>
</HEAD>
<BODY onload="init()">
<div id="map"></div>
</BODY>
</HTML>
The above is with locally generated tiles on a Windows 7 machine. Remember to change the path to tiles in the var newLayer line, the start location in the var LonLat line (Longitude,Latitude) and optionally default zoom in the line after it (currently 11).