diff options
-rw-r--r-- | index.php | 54 | ||||
-rw-r--r-- | map.css | 30 | ||||
-rw-r--r-- | map.js | 236 |
3 files changed, 320 insertions, 0 deletions
diff --git a/index.php b/index.php new file mode 100644 index 0000000..297e0aa --- /dev/null +++ b/index.php @@ -0,0 +1,54 @@ +<?php
+if(isset($_REQUEST['lat'])) $lat = mysql_escape_string($_REQUEST['lat']);
+if(isset($_REQUEST['lng'])) $lng = mysql_escape_string($_REQUEST['lng']);
+if(isset($_REQUEST['res'])) $res = $_REQUEST['res'];
+if(isset($_REQUEST['marker']))
+ $marker = $_REQUEST['marker'];
+else
+ $marker = 'all';
+
+//default values
+if(empty($lat)) $lat=47.07102;
+if(empty($lng)) $lng=15.440;
+if(empty($res)) $res=15;
+if(!isset($marker)) $marker="online";
+?>
+
+<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
+ <head>
+ <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
+ <title>graz.funkfeuer.at: Map</title>
+ <link rel="stylesheet" href="map.css" type="text/css" />
+ <script src="http://maps.google.com/maps?file=api&v=2&&key=ABQIAAAAZRu0cBQNp9TOBJp1i-DhohS9pf3riiZoWFmOpEuQ19If-UHZjhRHIGQIC00eY1H5H71yDqx-QzdyJA"
+ type="text/javascript"></script>
+ <script src="map.js" type="text/javascript"></script>
+ <script type="text/javascript">
+ function onLoad() {
+<?php
+ printf(" initialize(" . $lat . ", " . $lng . ", " . $res . ");\n");
+?>
+ }
+ </script>
+ </head>
+
+ <body onload="onLoad()" onunload="GUnload()">
+ <div id="map" style="width:100%; height:100%;"></div>
+ <div id="visibox" class="box">
+ <b>Verbindungen ausblenden:</b>
+ </div>
+ <div id="addressbox" class="box">
+ <b>Adresse suchen:</b>
+ <form action="#" onsubmit="showAddress(this.address.value); return false">
+ <p>
+ <input type="text" size="40" name="address" value="Lendkai 1" />
+ <input type="submit" value="Suchen" />
+ </p>
+ </form>
+ </div>
+ </body>
+</html>
+
+
+
+
+
@@ -0,0 +1,30 @@ +body { + background: black; + margin: 0; + padding: 0; +} + +div.box { + font-size: 8pt; + background-color: #FFFFFF; + border: 2px solid #000000; + padding: 8px; + -moz-border-radius: 10px; + border-radius: 10px; + z-index: 99; + opacity: .7; + filter: alpha(opacity=70); +} + +#visibox { + position: absolute; + right: 20px; + top: 20px; + width: 20em; +} + +#addressbox { + position: absolute; + right: 20px; + bottom: 20px; +} @@ -0,0 +1,236 @@ +var map = null; +var physicalMaxLevel; +var xmlData = null; +var geocoder = null; +var nodes = new Array(); +var links = new Array(); +var overlays = new Array(); +overlays["nodes"] = new Array(); +overlays["links"] = new Array(); +overlays["newmarker"] = null; +overlays["ruler"] = new Array(); + +function initialize(lat, lng, res) { + if (!checkBrowser()) { + return; + } + + map = new GMap2(document.getElementById("map")); + map.setCenter(new GLatLng(lat, lng), res); + + map.removeMapType(G_HYBRID_MAP); + map.removeMapType(G_SATELLITE_MAP); + map.addMapType(G_PHYSICAL_MAP); + map.setMapType(G_PHYSICAL_MAP); + physicalMaxLevel = map.getCurrentMapType().getMaximumResolution(); + if(res > physicalMaxLevel) { + map.setMapType(G_NORMAL_MAP); + map.setZoom(res); + } + map.addControl(new GSmallMapControl()); + map.addControl(new GMapTypeControl(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(50,10))); + map.addControl(new RulerControl()); + + GEvent.addListener(map, "addoverlay", onAddOverlay); + GEvent.addListener(map, "zoomend", onZoom); + GEvent.addListener(map, "click", onMapClick); + + var mt = map.getMapTypes(); + for (var i=0; i<mt.length; i++) { + mt[i].getMinimumResolution = function() {return 0;} + mt[i].getMaximumResolution = function() {return 17;} + } + + geocoder = new GClientGeocoder(); + +// GDownloadUrl("data.php", onData); +} + +function checkBrowser() { + if (GBrowserIsCompatible()) { + return true; + } else { + var html = '<center><h3 style="color:red">'; + html += 'Dein Browser ist leider nicht kompatibel mit der Google Maps API!</h3>'; + html += 'Ich w�rde vorschlagen du surfst auf: ' + html += '<a href="http://www.mozilla.com/firefox/">http://www.mozilla.com/firefox/</a></center>'; + document.getElementById("map").innerHTML = html; + return false; + } +} + +function onAddOverlay(overlay) { + switch(overlay.overlaytype) { + case "node": overlays["nodes"].push(overlay); break; + case "link": overlays["links"].push(overlay); break; + case "newmarker": { + if(overlays["newmarker"]) { + map.removeOverlay(overlays["newmarker"]); + } + overlays["newmarker"] = overlay; + break; + } + case "ruler": { + if(overlays["ruler"][overlay.overlaysubtype]) { + map.removeOverlay(overlays["ruler"][overlay.overlaysubtype]); + } + overlays["ruler"][overlay.overlaysubtype] = overlay; + break; + } + } +} + +function onZoom(oldLevel, newLevel) +{ + if(newLevel > physicalMaxLevel) { + map.setMapType(G_NORMAL_MAP); + } +} + +function onMapClick(overlay, point) +{ + if(!overlay) { + setNewMarker(point); + } +} + +function onData(data, responseCode) { + if (responseCode < 200 || responseCode > 299) { + return alert("Fehler: Konnte die Daten nicht laden!\n(Server Antwort-Code: " + responseCode + ")"); + } + xmlData = GXml.parse(fetchData); +} + +function addNewNodeText(point) { + var html = "adding location at: \n" + point; + return html; +} + +function setNewMarker(point) { + var marker = new GMarker(point,{draggable: true}); + GEvent.addListener(marker, "dragstart", + function() { + this.autoclosed = true; + this.closeInfoWindow(); + }); + + GEvent.addListener(marker, "dragend", + function(point) { + this.openInfoWindowHtml(addNewNodeText(point)); + }); + + GEvent.addListener(marker, "infowindowclose", + function () { + if(this.autoclosed == true) { + this.autoclosed = false; + } else { + map.removeOverlay(overlays["newmarker"]); + overlays["newmarker"] = null; + } + }); + + marker.overlaytype = "newmarker"; + map.addOverlay(marker); + marker.openInfoWindowHtml(addNewNodeText(point)); +} + +function showAddress(address) { + if (geocoder) { + address += ", Graz, Austria"; + geocoder.getLatLng(address, + function(point) { + if (!point) { + alert(address + " nicht gefunden"); + } else { + map.setCenter(point); + map.setZoom(16); + setNewMarker(point); + } + }); + } +} + +function RulerControl() { +} + +RulerControl.prototype = new GControl(); + +RulerControl.prototype.initialize = function(map) { + var distText; + + function measure(){ + if(overlays["ruler"]["marker1"] && overlays["ruler"]["marker2"]) { + var line = [overlays["ruler"]["marker1"].getPoint(), overlays["ruler"]["marker2"].getPoint()]; + var dist = overlays["ruler"]["marker1"].getPoint().distanceFrom(overlays["ruler"]["marker2"].getPoint()); + dist = dist.toFixed(0)+" m"; + if(parseInt(dist) > 10000) { + dist= (parseInt(dist)/1000).toFixed(1) + " km"; + } + distText.data = dist; + poly = new GPolyline(line,'#FFFF00', 8, 1) + poly.overlaytype = "ruler"; + poly.overlaysubtype = "line"; + map.addOverlay(poly); + } + } + + function clr(){ + for(var o in overlays["ruler"]) { + map.removeOverlay(overlays["ruler"][o]); + overlays["ruler"][o] = null; + } + distText.data = "Entfernung messen"; + } + + var container = document.createElement("div"); + var zoomInDiv = document.createElement("div"); + this.setButtonStyle_(zoomInDiv); + container.appendChild(zoomInDiv); + distText = document.createTextNode("Entfernung messen"); + zoomInDiv.appendChild(distText); + GEvent.addDomListener(zoomInDiv, "click", function() { + for(var o in overlays["ruler"]) { + if(overlays["ruler"][o]) { + clr(); + return; + } + } + + var pnt = map.getCenter(); +// marker1 = new GMarker(pnt, {icon: makeIcon('messen'), draggable: true}); + marker1 = new GMarker(pnt, {draggable: true}); + marker1.overlaytype = "ruler"; + marker1.overlaysubtype = "marker1"; + map.addOverlay(marker1); + +// marker2 = new GMarker(pnt, {icon: makeIcon('messen'), draggable: true}); + marker2 = new GMarker(pnt, {draggable: true}); + marker2.overlaytype = "ruler"; + marker2.overlaysubtype = "marker2"; + map.addOverlay(marker2); + + GEvent.addListener(marker1, "drag", function() { measure(); }); + GEvent.addListener(marker2, "drag", function() { measure(); }); + }); + + map.getContainer().appendChild(container); + return container; +} + +RulerControl.prototype.getDefaultPosition = function() { + return new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(7, 7)); +} + +RulerControl.prototype.setButtonStyle_ = function(button) { + button.style.textDecoration = "underline"; + button.style.color = "#0000cc"; + button.style.backgroundColor = "white"; + button.style.font = "small Arial"; + button.style.border = "1px solid black"; + button.style.padding = "2px"; + button.style.marginBottom = "3px"; + button.style.textAlign = "center"; + button.style.width = "10em"; + button.style.cursor = "pointer"; +} + |