source: subversion/applications/rendering/parking/varwww/tc/i2.html @ 21363

Last change on this file since 21363 was 21363, checked in by kdrangmeister, 10 years ago

tuned opacity

File size: 7.5 KB
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>OpenStreetMap Parking Map</title>
5        <meta name="description" content="A parking 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="http://openlayers.org/api/theme/default/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://www.openlayers.org/api/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
18            var map;
19
20            var showPopupOnHover = false;
21            text = new Array("Parking Map info and legend","Parking Map info and legend");
22
23            // avoid pink tiles
24            OpenLayers.IMAGE_RELOAD_ATTEMPTS = 4;
25            OpenLayers.Util.onImageLoadErrorColor = "transparent";
26
27            /*
28            * Schaltet die Beschreibung der Karte an- und aus.
29            * Toggles the description of the map.
30            */
31            function toggleInfo() {
32               var state = document.getElementById('description').className;
33               if (state == 'hide') {
34                  // Info anzeigen
35                  document.getElementById('description').className = '';
36                  document.getElementById('descriptionToggle').innerHTML = text[1];
37               }
38               else {
39                  // Info verstecken
40                  document.getElementById('description').className = 'hide';
41                  document.getElementById('descriptionToggle').innerHTML = text[0];
42               }       
43            }
44
45
46            function init(){
47                map = new OpenLayers.Map('map', {
48                    controls: [
49                        new OpenLayers.Control.Navigation(),
50                        new OpenLayers.Control.LayerSwitcher(),
51                        new OpenLayers.Control.PanZoomBar(),
52                        new OpenLayers.Control.Attribution(),
53                        new OpenLayers.Control.Permalink(),
54                        new OpenLayers.Control.MousePosition(),
55                        new OpenLayers.Control.KeyboardDefaults(),
56                        new OpenLayers.Control.ScaleLine()
57                    ],
58                theme: null,
59                projection: new OpenLayers.Projection("EPSG:900913"),
60                displayProjection: new OpenLayers.Projection("EPSG:4326"),
61                units: "m",
62                numZoomLevels: 20,
63                maxResolution: 156543.0339,
64                maxExtent: new OpenLayers.Bounds(-20037508, -20037508,
65                                                 20037508, 20037508.34)
66                });
67
68                var parking = new OpenLayers.Layer.TMS("Base Map",
69                    "http://drangmeister.dyndns.org/tc/tilecache.cgi/1.0.0/parking/",
70                    {
71                        type: 'png', getURL: osm_getTileURL,
72                        displayOutsideMaxExtent: true, isBaseLayer: true,
73                        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'
74                    }
75                );
76                var parkingbw = new OpenLayers.Layer.TMS("Parking Only Map",
77                    "http://toolserver.org/tiles/parking-bw/",
78                    {
79                        type: 'png', getURL: osm_getTileURL,
80                        displayOutsideMaxExtent: true, isBaseLayer: true,
81                        numZoomLevels: 20,
82                        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'
83                    }
84                );
85                var osm   = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
86                var cycle = new OpenLayers.Layer.OSM.CycleMap("Cycle Map");
87                var osma  = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
88/*
89                var hikebike = new OpenLayers.Layer.TMS("Hike & Bike Map",
90                    "http://cassini.toolserver.org/tiles/hikebike/",
91                    {
92                        type: 'png', getURL: osm_getTileURL,
93                        displayOutsideMaxExtent: true, isBaseLayer: true,
94                        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>)'
95                    }
96                );
97*/
98
99                var parkingtrans = new OpenLayers.Layer.TMS("Parking",
100                    "http://toolserver.org/tiles/parktrans/",
101                    {
102                        type: 'png', getURL: osm_getTileURL,
103                        displayOutsideMaxExtent: true, isBaseLayer: false,
104                        transparent: true, opacity: 0.8, "visibility": false 
105                    }
106                );
107                var parkingerr = new OpenLayers.Layer.TMS("Parking Errors",
108                    "http://drangmeister.dyndns.org/tc/tilecache.cgi/1.0.0/parking-errors/",
109                    {
110                        type: 'png', getURL: osm_getTileURL,
111                        displayOutsideMaxExtent: true, isBaseLayer: false,
112                        transparent: true, opacity: 0.72, "visibility": false 
113                    }
114                );
115
116                map.addLayers([parking, parkingbw, osm, cycle, osma/*, hikebike*/]);
117
118                map.addLayers([parkingtrans, parkingerr]);
119
120                // Würzburg zoom=16&lat=49.79201&lon=9.94524
121                var lon = 9.94524;
122                var lat =  49.79201;
123                var zoom = 16;
124
125                var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
126
127                if (!map.getCenter())
128                    map.setCenter (lonLat, zoom);
129            }
130
131        function osm_getTileURL(bounds) {
132            var res = this.map.getResolution();
133            var x = Math.round((bounds.left - this.maxExtent.left) / (res * this.tileSize.w));
134            var y = Math.round((this.maxExtent.top - bounds.top) / (res * this.tileSize.h));
135            var z = this.map.getZoom();
136            var limit = Math.pow(2, z);
137
138            if (y < 0 || y >= limit) {
139                return OpenLayers.Util.getImagesLocation() + "404.png";
140            } else {
141                x = ((x % limit) + limit) % limit;
142                return this.url + z + "/" + x + "/" + y + "." + this.type;
143            }
144        }
145
146        checkUtilVersion(3);
147
148        </script>
149
150    </head>
151    <body onload="init()">
152        <div class="noprint" id="descriptionToggle" onclick="toggleInfo()">Parking Map info and legend</div>
153        <div class="hide" id="description">A map for parking. Render style by Kay Drangmeister. (<a href="http://wiki.openstreetmap.org/wiki/User:kay_D">Description</a>)<br/>
154            <img title="Legend" src="legend.png" id="legend" alt="The map's legend a.k.a. map key" border="">
155        </div>
156        <!-- define a DIV into which the map will appear. -->
157        <div style="position:absolute; top:0; left:0%; width:100%; height:100%" id="map"></div>
158    </body>
159</html>
160
Note: See TracBrowser for help on using the repository browser.