mirror of
https://github.com/openstreetmap/mod_tile.git
synced 2025-08-15 22:18:22 +00:00
74 lines
2.8 KiB
HTML
74 lines
2.8 KiB
HTML
<html>
|
|
<head>
|
|
<title>OSM Local Tiles</title>
|
|
<link rel="stylesheet" href="style.css" type="text/css" />
|
|
<!-- bring in the OpenLayers javascript library
|
|
(here we bring it from the remote site, but you could
|
|
easily serve up this javascript yourself) -->
|
|
<script src="http://openlayers.org/api/OpenLayers.js"></script>
|
|
|
|
<!-- bring in the OpenStreetMap OpenLayers layers.
|
|
Using this hosted file will make sure we are kept up
|
|
to date with any necessary changes -->
|
|
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
// Start position for the map (hardcoded here for simplicity)
|
|
var lat=47.7;
|
|
var lon=7.5;
|
|
var zoom=10;
|
|
|
|
var map; //complex object of type OpenLayers.Map
|
|
|
|
//Initialise the 'map' object
|
|
function init() {
|
|
|
|
map = new OpenLayers.Map ("map", {
|
|
controls:[
|
|
new OpenLayers.Control.Navigation(),
|
|
new OpenLayers.Control.PanZoomBar(),
|
|
new OpenLayers.Control.Permalink(),
|
|
new OpenLayers.Control.ScaleLine({geodesic: true}),
|
|
new OpenLayers.Control.Permalink('permalink'),
|
|
new OpenLayers.Control.MousePosition(),
|
|
new OpenLayers.Control.Attribution()],
|
|
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
|
|
maxResolution: 156543.0339,
|
|
numZoomLevels: 19,
|
|
units: 'm',
|
|
projection: new OpenLayers.Projection("EPSG:900913"),
|
|
displayProjection: new OpenLayers.Projection("EPSG:4326")
|
|
} );
|
|
|
|
// This is the layer that uses the locally stored tiles
|
|
var newLayer = new OpenLayers.Layer.OSM("Local Tiles", "${z}/${x}/${y}.png", {numZoomLevels: 19});
|
|
map.addLayer(newLayer);
|
|
|
|
layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
|
|
map.addLayer(layerMapnik);
|
|
|
|
// This is the end of the layer
|
|
|
|
var switcherControl = new OpenLayers.Control.LayerSwitcher();
|
|
map.addControl(switcherControl);
|
|
switcherControl.maximizeControl();
|
|
|
|
if( ! map.getCenter() ){
|
|
var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
|
|
map.setCenter (lonLat, zoom);
|
|
}
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
|
|
<!-- body.onload is called once the page is loaded (call the 'init' function) -->
|
|
<body onload="init();">
|
|
|
|
<!-- define a DIV into which the map will appear. Make it take up the whole window -->
|
|
<div style="width:100%; height:100%" id="map"></div>
|
|
|
|
</body>
|
|
|
|
</html>
|