changed rulercotrol to display distance in own div

1 files changed, 27 insertions, 9 deletions

diff --git a/map.js b/map.js
index 15dd146..36b206e 100644
--- a/map.js
+++ b/map.js
@@ -13,6 +13,8 @@ function initialize(lat, lng, res) {
 
   map = new GMap2(document.getElementById("map"));
   map.setCenter(new GLatLng(lat, lng), res);
+  map.disableDoubleClickZoom();
+  map.enableScrollWheelZoom();
 
   map.removeMapType(G_HYBRID_MAP);
   map.removeMapType(G_SATELLITE_MAP);
@@ -91,13 +93,13 @@ 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);
+  xmlData = GXml.parse(data);
 
    // TODO: add data import and comment in GDownloadUrl() at initialize()
 }
 
 function addNewNodeText(point) {
-  var html = "adding location at: \n" + point;
+  var html = "adding location at: <br />\n" + point;
   return html;
 }
 
@@ -152,7 +154,6 @@ function showAddress(address) {
           alert(address + " nicht gefunden");
         } else {
           map.setCenter(point);
-          map.setZoom(16);
           setNewMarker(point);
         }
       });
@@ -165,17 +166,20 @@ function RulerControl() {
 RulerControl.prototype = new GControl();
 
 RulerControl.prototype.initialize = function(map) {
+  var btnText;
+  var distBoxOuter;
+  var distBox;
   var distText;
 
-  function measure(){
+  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";
+        dist = (parseInt(dist)/1000).toFixed(1) + " km";
       }
-      distText.data = dist;
+      distText.data = "Entfernung: " + dist;
       var poly = new GPolyline(line,'#FFFF00', 8, 1)
       poly.overlaytype = "ruler";
       poly.overlaysubtype = "line";
@@ -188,7 +192,8 @@ RulerControl.prototype.initialize = function(map) {
       map.removeOverlay(overlays["ruler"][o]);
       overlays["ruler"][o] = null;      
     }
-    distText.data = "Entfernung messen";
+    distBox.style.visibility = "hidden";
+    btnText.data = "Entfernung messen";
   }
 
   var container = document.createElement("div");
@@ -196,8 +201,8 @@ RulerControl.prototype.initialize = function(map) {
   btnDiv.className = "btn";
   btnDiv.id = "rulerbtn";
   container.appendChild(btnDiv);
-  distText = document.createTextNode("Entfernung messen");
-  btnDiv.appendChild(distText);
+  btnText = document.createTextNode("Entfernung messen");
+  btnDiv.appendChild(btnText);
   GEvent.addDomListener(btnDiv, "click", function() {
     for(var o in overlays["ruler"]) {
       if(overlays["ruler"][o]) {
@@ -206,6 +211,10 @@ RulerControl.prototype.initialize = function(map) {
       }
     }
     
+    btnText.data = "Messung beenden";
+    distText.data = "Entfernung: 0 m";
+    distBox.style.visibility = "visible";
+
     var pnt = map.getCenter();
     marker1 = new GMarker(pnt, {icon: makeIcon('ruler'), draggable: true});
     marker1.overlaytype = "ruler";
@@ -220,6 +229,15 @@ RulerControl.prototype.initialize = function(map) {
     GEvent.addListener(marker1, "drag", function() { measure(); });
     GEvent.addListener(marker2, "drag", function() { measure(); });
   });
+  distBoxOuter = document.createElement("div");
+  distBox = document.createElement("div");
+  distBox.className = "box";
+  distBox.id = "distbox";
+  distBox.style.visibility = "hidden";
+  distText = document.createTextNode("Entfernung: ? m");
+  distBox.appendChild(distText);
+  distBoxOuter.appendChild(distBox);
+  document.getElementById("map").appendChild(distBoxOuter);
 
   map.getContainer().appendChild(container);
   return container;