wradmin/wradmin/templates/maptool.html

   1 <?xml version="1.0" encoding="ISO-8859-1"?>
   2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   3                       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   4 <html xmlns="http://www.w3.org/1999/xhtml"
   5     xmlns:py="http://genshi.edgewall.org/"
   6     xmlns:xi="http://www.w3.org/2001/XInclude">
   7 <xi:include href="master.html" />
   8
   9 <head>
  10     <title>Map-Tool</title>
  11     <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAVDRl0qsoeYOspQi0txxVEhTO7xxs0m3ls_NApg8LzilP9E0D3hScAc_5O_qu8-pbIbSF5h8xfGEcjA" type="text/javascript"> </script>
  12     <script src="${h.url_for('/yui/yahoo-dom-event/yahoo-dom-event.js')}" type="text/javascript"> </script>
  13     <script src="${h.url_for('/yui/connection/connection-min.js')}" type="text/javascript"> </script>
  14     <script src="${h.url_for('/yui/json/json-min.js')}" type="text/javascript"> </script>
  15     <script type="text/javascript">
  16 // <![CDATA[
  17
  18 // Functions for simulated assoziative array
  19 // -----------------------------------------
  20 // key is integer, value is GMarker
  21 // as described in file:///usr/share/doc/selfhtml/html/javascript/objekte/array.htm
  22 // aa has to be created with new Object()
  23 //
  24 // Remove an element: delete aa[key];
  25 // Return an element: aa[key]
  26
  27
  28 // Appends the value and returns the key
  29 function aa_get_unused_key(aa) {
  30     var key = 1;
  31     for (var k in aa) if (Number(k) >= key) key = Number(k) + 1;
  32     return key;
  33 }
  34
  35 // Appends the value and returns the key
  36 function aa_insert(aa, value) {
  37     var key = aa_get_unused_key(aa);
  38     aa[key] = value;
  39     return key;
  40 }
  41
  42 // Length of the assoziative array
  43 function aa_length(aa) {
  44     var length = 0;
  45     for (var key in aa) ++length;
  46     return length;
  47 }
  48
  49
  50 // The map
  51 // -------
  52 var wrMap;
  53
  54
  55 // Marker Lists
  56 // ------------
  57 var wrSleddingMarkers = new Array(); // contains all sledding route markers
  58 var wrInnMarkers = new Array(); // contains all inn markers
  59 var wrRefMarkers = new Object(); // contains all reference markers as simulated assoziative array
  60
  61
  62 // Accuracy info
  63 // -------------
  64
  65 function setAccuracyInfo(html) {
  66     document.getElementById("accuracy").innerHTML = html;
  67 }
  68
  69
  70 function updateAccuracyInfo(wrMap, latlng) {
  71     var pixel = wrMap.fromLatLngToContainerPixel(latlng);
  72     var pixel_d = new GPoint(pixel.x - 1, pixel.y + 1)
  73     var latlng_d = wrMap.fromContainerPixelToLatLng(pixel_d);
  74     var accuracy = latlng.distanceFrom(latlng_d); // in m
  75     var accuracy_s = (accuracy > 10) ? accuracy.toFixed(0) : accuracy.toFixed(1);
  76     setAccuracyInfo("Genauigkeit: 1 Pixel entspricht " + accuracy_s + " Metern");
  77 }
  78
  79
  80 // Position info
  81 // -------------
  82
  83 function setPositionInfo(html) {
  84     document.getElementById("mapinfo").innerHTML = html;
  85 }
  86
  87
  88 // The precision digits is optional
  89 function updatePositionInfo(wrMap, latlng, description, digits) {
  90     var pixel = wrMap.fromLatLngToContainerPixel(latlng);
  91     var pixel_d = new GPoint(pixel.x - 1, pixel.y + 1)
  92     var latlng_d = wrMap.fromContainerPixelToLatLng(pixel_d);
  93     if (YAHOO.lang.isUndefined(digits)) {
  94         var fix_lat = Math.ceil(Math.abs(Math.log(latlng.lat() - latlng_d.lat())/Math.LN10))
  95         var fix_lng = Math.ceil(Math.abs(Math.log(latlng.lng() - latlng_d.lng())/Math.LN10))
  96     } else {
  97         var fix_lat = digits;
  98         var fix_lng = digits;
  99     }
 100     var lat_s = latlng.lat().toFixed(fix_lat);
 101     var lng_s = latlng.lng().toFixed(fix_lng);
 102     setPositionInfo(description + ": <strong>" + lat_s + " N " + lng_s + " E</strong> (" + lat_s + ", " + lng_s + ")");
 103 }
 104
 105
 106 // Sledding and Inn lists
 107 // ----------------------
 108
 109 function initSledding(wrMap) {
 110     // Icon
 111     var wrSleddingIcon = new GIcon(G_DEFAULT_ICON);
 112     wrSleddingIcon.image = "${h.url_for('/gmap_rodelbahn_c.png')}";
 113     wrSleddingIcon.shadow = "${h.url_for('/gmap_rodelbahn_c_s.png')}";
 114     wrSleddingIcon.iconSize = new GSize(17, 17);
 115     wrSleddingIcon.shadowSize = new GSize(23, 23);
 116     wrSleddingIcon.iconAnchor = new GPoint(9, 9);
 117     wrSleddingIcon.infoWindowAnchor = new GPoint(9, 9);
 118
 119     // Add one sledding route
 120     function addSleddingMarker(latitude, longitude, name) {
 121         var latlng = new GLatLng(latitude, longitude);
 122         var marker = new GMarker(latlng, {icon: wrSleddingIcon, title: name});
 123         function openSleddingInfoWindow() {
 124             var lat_s = latlng.lat().toFixed(6);
 125             var lng_s = latlng.lng().toFixed(6);
 126             marker.openInfoWindowHtml(name + "<br/><strong>" + lat_s + " N " + lng_s + " E</strong><br/>" + lat_s + ", " + lng_s);
 127         }
 128         GEvent.addListener(marker, "click", openSleddingInfoWindow);
 129         wrSleddingMarkers.push(marker);
 130         wrMap.addOverlay(marker);
 131         return marker;
 132     }
 133
 134     // AJAX call
 135     var callback = {
 136         success: function(o) {
 137             sleddings = YAHOO.lang.JSON.parse(o.responseText).sledding;
 138             for (var i = 0; i < sleddings.length; ++i) addSleddingMarker(sleddings[i][1], sleddings[i][2], sleddings[i][0]);
 139         },
 140         failure: function(o) {alert("Konnte die Rodelbahnen-Daten nicht vom Server laden");}
 141     }
 142     var url = "${h.url_for(controller='maptool', action='ajax_sledding')}";
 143     YAHOO.util.Connect.asyncRequest('GET', url, callback, null);
 144 }
 145
 146
 147 function initInns(wrMap) {
 148     // Icon
 149     var wrInnIcon = new GIcon(G_DEFAULT_ICON);
 150     wrInnIcon.image = "${h.url_for('/gmapGasthaus.png')}";
 151
 152     // Add one inn
 153     function addInnMarker(latitude, longitude, name) {
 154         var latlng = new GLatLng(latitude, longitude);
 155         var marker = new GMarker(latlng, {icon: wrInnIcon, title: name});
 156         function openInnInfoWindow() {
 157             var lat_s = latlng.lat().toFixed(6);
 158             var lng_s = latlng.lng().toFixed(6);
 159             marker.openInfoWindowHtml(name + "<br/><strong>" + lat_s + " N " + lng_s + " E</strong><br/>" + lat_s + ", " + lng_s);
 160         }
 161         GEvent.addListener(marker, "click", openInnInfoWindow);
 162         wrInnMarkers.push(marker);
 163         wrMap.addOverlay(marker);
 164         return marker;
 165     }
 166
 167     // AJAX call
 168     var callback = {
 169         success: function(o) {
 170             inns = YAHOO.lang.JSON.parse(o.responseText).inns;
 171             for (var i = 0; i < inns.length; ++i) addInnMarker(inns[i][1], inns[i][2], inns[i][0]);
 172         },
 173         failure: function(o) {alert("Konnte die Hütten-Daten nicht vom Server laden");}
 174     }
 175     var url = "${h.url_for(controller='maptool', action='ajax_inns')}";
 176     YAHOO.util.Connect.asyncRequest('GET', url, callback, null);
 177 }
 178
 179
 180 function showMarkers(markers, show) {
 181     for (var i = 0; i != markers.length; ++i)
 182         if (show) markers[i].show(); else markers[i].hide();
 183 }
 184
 185
 186 function removeRefMarker(refMarkerId) {
 187     refMarker = wrRefMarkers[refMarkerId];
 188     wrMap.removeOverlay(refMarker);
 189     delete refMarker;
 190     delete wrRefMarkers[refMarkerId];
 191 }
 192
 193
 194 // Done when loading HTML
 195 // ----------------------
 196 function initialize() {
 197     if (GBrowserIsCompatible()) {
 198         wrMap = new GMap2(document.getElementById('map'), {'mapTypes': [G_NORMAL_MAP, G_HYBRID_MAP, G_PHYSICAL_MAP, G_SATELLITE_MAP]});
 199         wrMap.addControl(new GLargeMapControl());
 200         wrMap.addControl(new GMapTypeControl());
 201         wrMap.addControl(new GScaleControl());
 202         wrMap.setCenter(new GLatLng(47.22, 11.42), 10);
 203         // wrMap.enableGoogleBar();
 204         wrMap.setMapType(G_PHYSICAL_MAP);
 205         wrMap.enableScrollWheelZoom();
 206         updateAccuracyInfo(wrMap, wrMap.getCenter());
 207         updatePositionInfo(wrMap, wrMap.getCenter(), "Zentrum der Karte");
 208         initSledding(wrMap);
 209         initInns(wrMap);
 210
 211         // Event at wrMap move
 212         GEvent.addListener(wrMap, "moveend", function() {updateAccuracyInfo(wrMap, wrMap.getCenter()); updatePositionInfo(wrMap, wrMap.getCenter(), "Zentrum der Karte");});
 213
 214         // Event at wrMap click
 215         function onMapClick(overlay, latlng) {
 216             if (YAHOO.lang.isUndefined(latlng)) {
 217                 // setPositionInfo(""); // would override coordinates shown when a user clicks on a marker
 218             } else {
 219                 updateAccuracyInfo(wrMap, latlng);
 220                 if (overlay == null) {
 221                     // Create refMarker
 222                     var refMarker = new GMarker(latlng, {title: "Koordinaten-Markierung (kann gezogen werden)", draggable: true});
 223                     var refMarkerId = aa_insert(wrRefMarkers, refMarker); // add it to the ref marker assoziative array
 224                     // Event at click on marker
 225                     function onRefMarkerClick() {
 226                         var lat_s = refMarker.getLatLng().lat().toFixed(6);
 227                         var lng_s = refMarker.getLatLng().lng().toFixed(6);
 228                         refMarker.openInfoWindowHtml("Koordinaten<br/><strong>" + lat_s + " N " + lng_s + " E</strong><br/>" + lat_s + ", " + lng_s + "<br/><a onclick=\"removeRefMarker(" + refMarkerId + ")\" href=\"javascript:void(0)\">Marker entfernen</a>");
 229                         updatePositionInfo(wrMap, refMarker.getLatLng(), "Koordinaten des Markers", 6);
 230                     }
 231                     GEvent.addListener(refMarker, "click", onRefMarkerClick);
 232                     // Event at drag marker
 233                     function onRefMarkerDragEnd() {updatePositionInfo(wrMap, refMarker.getLatLng(), "Neue Koordinaten des Markers");}
 234                     GEvent.addListener(refMarker, "dragend", onRefMarkerDragEnd);
 235                     wrMap.addOverlay(refMarker);
 236                     updatePositionInfo(wrMap, latlng, "Koordinaten des neuen Markers");
 237                 } else {
 238                     // Set info text
 239                     updatePositionInfo(wrMap, latlng, "Koordinaten des letzten Klicks");
 240                 }
 241             }
 242         }
 243         GEvent.addListener(wrMap, "click", onMapClick);
 244
 245         // Show markers
 246         document.getElementById("show_sledding").checked = true;
 247         document.getElementById("show_inns").checked = true;
 248     }
 249 }
 250
 251 // ]]>
 252     </script>
 253 </head>
 254
 255 <body onload="initialize()" onunload="GUnload()">
 256
 257 <h2>Map-Tool</h2>
 258
 259 <p>Werkzeug für die Landkartenbearbeitung.</p>
 260
 261 <h3>Georeferenzierung</h3>
 262
 263 <p id="accuracy"/>
 264 <div id="map" style="width: 100%; height: 450px; border-style:none;"></div>
 265 <p id="mapinfo"/>
 266
 267 <p>
 268 <input id="show_sledding" type="checkbox" onclick="showMarkers(wrSleddingMarkers, this.checked);"/><label for="show_sledding">Rodelbahnen zeigen</label><br/>
 269 <input id="show_inns" type="checkbox" onclick="showMarkers(wrInnMarkers, this.checked);"/><label for="show_inns">Hütten zeigen</label>
 270 </p>
 271
 272
 273
 274 </body>
 275 </html>