source: subversion/applications/rendering/parking/varwww/crite/wifi/index.html @ 27500

Revision 27500, 5.7 KB checked in by kdrangmeister, 2 years ago (diff)

wifi initial www files

  • Property svn:mime-type set to text/plain
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3  <head profile="http://www.w3.org/2005/10/profile">
4    <title>Crite Wifi Map</title>
5    <meta name="description" content="Wifi map using OpenStreetMap data." />
6    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
7    <meta http-equiv="content-script-type" content="text/javascript" />
8    <meta http-equiv="content-style-type" content="text/css" />
9    <link rel="icon" type="image/png" href="favicon.png" />
10    <link rel="stylesheet" type="text/css" href="style.css" />
11    <link rel="stylesheet" type="text/css" href="map.css" />
12    <link rel="stylesheet" type="text/css" href="print.css" media="print" />
13    <script src="http://crite.net/OpenLayers/OpenLayers.js"></script>
14    <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
15    <script type="text/javascript" src="util.js"></script>
16    <script type="text/javascript">
17      var map;
18      var showPopupOnHover = false;
19      text = new Array("Wifi Map info and legend","Wifi Map info and legend");
20
21      // avoid pink tiles
22      OpenLayers.IMAGE_RELOAD_ATTEMPTS = 4;
23      OpenLayers.Util.onImageLoadErrorColor = "transparent";
24
25      /*
26      * Schaltet die Beschreibung der Karte an- und aus.
27      * Toggles the description of the map.
28      */
29      function toggleInfo() {
30        var state = document.getElementById('description').className;
31        if (state == 'hide') {
32          // Info anzeigen
33          document.getElementById('description').className = '';
34          document.getElementById('descriptionToggle').innerHTML = text[1];
35        }
36        else {
37          // Info verstecken
38          document.getElementById('description').className = 'hide';
39          document.getElementById('descriptionToggle').innerHTML = text[0];
40        }       
41      }
42
43      function init(){
44        map = new OpenLayers.Map('map', {
45            controls: [
46              new OpenLayers.Control.Navigation(),
47              new OpenLayers.Control.LayerSwitcher(),
48              new OpenLayers.Control.PanZoomBar(),
49              new OpenLayers.Control.Attribution(),
50              new OpenLayers.Control.Permalink(),
51              new OpenLayers.Control.MousePosition(),
52              new OpenLayers.Control.KeyboardDefaults(),
53              new OpenLayers.Control.ScaleLine()
54            ],
55                theme: null,
56              projection: new OpenLayers.Projection("EPSG:900913"),
57              displayProjection: new OpenLayers.Projection("EPSG:4326"),
58              units: "m",
59              numZoomLevels: 19,
60              maxResolution: 156543.0339,
61              maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508.34)
62            });
63        var wifibw = new OpenLayers.Layer.TMS("Wifi Map",
64            "http://tile.crite.net/wifi/",
65            {
66              type: 'png', getURL: osm_getTileURL,
67              displayOutsideMaxExtent: true, isBaseLayer: true,
68              numZoomLevels: 19,
69              attribution: 'Map Data from <a href="http://www.openstreetmap.org/">OpenStreetMap</a> (<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-by-SA 2.0</a>)<br>Extensions by Kay Drangmeister'
70            }
71            );
72        var osm   = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
73        var cycle = new OpenLayers.Layer.OSM.CycleMap("Cycle Map");
74        var osma  = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
75
76        var parkingtrans = new OpenLayers.Layer.TMS("Wifi",
77            "http://tile.crite.net/parktrans/",
78            {
79              type: 'png', getURL: osm_getTileURL,
80              displayOutsideMaxExtent: true, isBaseLayer: false,
81              transparent: true, opacity: 0.8, "visibility": false
82            }
83            );
84        var parkingicons = new OpenLayers.Layer.Text("Wifi Icons",
85            {
86              location:"./wifiicons.txt",
87              projection: map.displayProjection
88            }
89            );
90
91        map.addLayers([wifibw, osm, cycle, osma/*, hikebike*/]);
92        map.addLayers([parkingtrans, parkingicons]);
93
94        // Würzburg zoom=16&lat=49.79201&lon=9.94524
95        var lon = 9.94524;
96        var lat =  49.79201;
97        var zoom = 17;
98        var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
99
100        if (!map.getCenter())
101          map.setCenter (lonLat, zoom);
102      }
103
104      function osm_getTileURL(bounds) {
105        var res = this.map.getResolution();
106        var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
107        var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
108        var z = this.map.getZoom();
109        var limit = Math.pow(2, z);
110
111        if (y < 0 || y >= limit) {
112          return OpenLayers.Util.getImagesLocation() + "404.png";
113        } else {
114          x = ((x % limit) + limit) % limit;
115          return this.url + z + "/" + x + "/" + y + "." + this.type;
116        }
117      }
118      checkUtilVersion(3);
119    </script>
120  </head>
121  <body onload="init()">
122    <div class="noprint" id="descriptionToggle" onclick="toggleInfo()">Parking Map info and legend</div>
123    <div class="hide" id="description">Parking Map. Render style by Kay Drangmeister. (<a href="http://wiki.openstreetmap.org/wiki/wifi">Description</a>)<br/>
124      <img title="Legend" src="legend.png" id="legend" alt="Legend / map key" /><br/>
125      Please use the layers menu to show/hide additional information.
126    </div>
127    <!-- define a DIV into which the map will appear. -->
128    <div style="position:absolute; top:0; left:0%; width:100%; height:100%" id="map"></div>
129  </body>
130</html>
Note: See TracBrowser for help on using the repository browser.