source: subversion/applications/rendering/gpx_slippy_map/index.php @ 7915

Last change on this file since 7915 was 7904, checked in by ojw, 11 years ago

First version of the GPX slippy map

File size: 3.1 KB
Line 
1<html>
2<head>
3    <title>OpenStreetMap</title>
4    <script src="http://openlayers.org/api/OpenLayers.js"></script>
5    <script src="http://openstreetmap.org/openlayers/OpenStreetMap.js"></script>
6
7    <script type="text/javascript">
8        <?php
9        $z = floor($_GET['zoom'] + 0);
10        $lat = $_GET['lat'] + 0;
11        $lon = $_GET['lon'] + 0;
12        print " var lat = $lat;\n var lon = $lon;\n var zoom = $z;\n";
13       
14        $Base = '';
15        $Tiles = 'tile.php?';
16        if(array_key_exists('gpx', $_GET))
17        {
18          $gpx = $_GET['gpx'];
19          $Base = sprintf("?gpx=%d", $gpx);
20          $Tiles .= sprintf("gpx=%d&t=", $gpx);
21        }
22        else
23        {
24          $Tiles .= sprintf("t=", $gpx);
25        }
26       
27        print "var routeServer = '$Tiles'\n";
28        print "var extraUrlParams = '$Base';\n";
29        ?>
30       
31        if (zoom==0)
32        {
33         zoom = 2;
34         lon = 1.0996;
35         lat = 35.5862;
36        }
37
38        lat=parseFloat(lat)
39        lon=parseFloat(lon)
40        zoom=parseInt(zoom)
41               
42        var map; //complex object of type OpenLayers.Map
43
44        //Initialise the 'map' object
45        function init() {
46         
47            map = new OpenLayers.Map ("map", {
48                controls:[
49                    new OpenLayers.Control.Navigation(),
50                    new OpenLayers.Control.Permalink('',extraUrlParams,''),
51                     new OpenLayers.Control.LayerSwitcher(),
52                    new OpenLayers.Control.PanZoomBar()],
53                maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
54                maxResolution: 156543.0399,
55                numZoomLevels: 19,
56                units: 'meters',
57                projection: new OpenLayers.Projection("EPSG:900913"),
58                displayProjection: new OpenLayers.Projection("EPSG:4326")
59            } );
60               
61
62            // Define the map layer
63            // Note that we use a predefined layer that will be
64            // kept up to date with URL changes
65            // Here we define just one layer, but providing a choice
66            // of several layers is also quite simple
67            // Other defined layers are OpenLayers.Layer.OSM.Mapnik and OpenLayers.Layer.OSM.Maplint
68            layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
69
70
71            route = new OpenLayers.Layer.OSM("Route",
72              routeServer, //"tile.php?gpx=blibble&t=",
73              {
74                isBaseLayer: false,
75                type:'png',
76                /*opacity: 0.3*/
77              },
78              {'buffer':1});
79
80
81            map.addLayer(layerTilesAtHome);
82            map.addLayer(route);
83
84            var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
85
86            map.setCenter (lonLat, zoom);
87        }
88       
89    </script>
90</head>
91
92<!-- body.onload is called once the page is loaded (call the 'init' function) -->
93<body onload="init();">
94
95    <!-- define a DIV into which the map will appear. Make it take up the whole window -->
96    <div style="width:100%; height:100%" id="map"></div>
97   
98</body>
99
100</html>
Note: See TracBrowser for help on using the repository browser.