source: subversion/applications/utils/mod_tile/slippymap.html @ 28718

Last change on this file since 28718 was 26890, checked in by apmon, 8 years ago

Add a script to update a osm2pgsql db and expire tiles
Add a demonstration slippymap to access local rendered tiles

File size: 2.8 KB
Line 
1<html>
2<head>
3    <title>OSM Local Tiles</title>
4    <link rel="stylesheet" href="style.css" type="text/css" />
5    <!-- bring in the OpenLayers javascript library
6         (here we bring it from the remote site, but you could
7         easily serve up this javascript yourself) -->
8    <script src="http://openlayers.org/api/OpenLayers.js"></script>
9 
10    <!-- bring in the OpenStreetMap OpenLayers layers.
11         Using this hosted file will make sure we are kept up
12         to date with any necessary changes -->
13    <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
14 
15    <script type="text/javascript">
16// Start position for the map (hardcoded here for simplicity)
17        var lat=47.7;
18        var lon=7.5;
19        var zoom=10;
20 
21        var map; //complex object of type OpenLayers.Map
22 
23        //Initialise the 'map' object
24        function init() {
25 
26            map = new OpenLayers.Map ("map", {
27                controls:[
28                    new OpenLayers.Control.Navigation(),
29                    new OpenLayers.Control.PanZoomBar(),
30                    new OpenLayers.Control.Permalink(),
31                    new OpenLayers.Control.ScaleLine({geodesic: true}),
32                    new OpenLayers.Control.Permalink('permalink'),
33                    new OpenLayers.Control.MousePosition(),                   
34                    new OpenLayers.Control.Attribution()],
35                maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
36                maxResolution: 156543.0339,
37                numZoomLevels: 19,
38                units: 'm',
39                projection: new OpenLayers.Projection("EPSG:900913"),
40                displayProjection: new OpenLayers.Projection("EPSG:4326")
41            } );
42 
43            // This is the layer that uses the locally stored tiles
44            var newLayer = new OpenLayers.Layer.OSM("Local Tiles", "http://localhost/osm/${z}/${x}/${y}.png", {numZoomLevels: 19});
45            map.addLayer(newLayer);
46
47            layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
48            map.addLayer(layerMapnik);
49
50// This is the end of the layer
51 
52            var switcherControl = new OpenLayers.Control.LayerSwitcher();
53            map.addControl(switcherControl);
54            switcherControl.maximizeControl();
55 
56            if( ! map.getCenter() ){
57                var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
58                map.setCenter (lonLat, zoom);
59            }
60        }
61 
62    </script>
63</head>
64 
65<!-- body.onload is called once the page is loaded (call the 'init' function) -->
66<body onload="init();">
67 
68    <!-- define a DIV into which the map will appear. Make it take up the whole window -->
69    <div style="width:100%; height:100%" id="map"></div>
70 
71</body>
72 
73</html>
Note: See TracBrowser for help on using the repository browser.