Changeset 8471 in genesis for nodes/nodemap.html

Timestamp:

Sep 19, 2010, 10:18:48 AM (14 years ago)

Author:

rick

Message:

Coordinate converter with alert was not very user friendy, converted to infofield clickable setup.

Thanks to Martijn for feedback!

File:

• nodes/nodemap.html (modified) (8 diffs)

nodes/nodemap.html

@@ -68 +68 @@
       }
       
-      OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {                
+      OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
           defaultHandlerOptions: {
               'single': true,
@@ -95 +95 @@
               lonlat = lonlat.transform( projection_smp, projection_wgs);
               var url = coordConvert(lonlat.lon, lonlat.lat);
-              alert("You clicked near " + lonlat.lon + " N, " + lonlat.lat + " E\n\n" +
-              'Copy/paste URL in NEW browser window to get your RDNAP coordinates\n\n'  + url);
+              document.getElementById('coordOutput').href = url;
+               document.getElementById('coordOutput').innerHTML = Math.round(lonlat.lon * 1000) / 1000 + " N, " + Math.round(lonlat.lat * 1000) / 1000 + " E";
           }
       
@@ -291 +291 @@
       
       
-        var vectors = new OpenLayers.Layer.Vector("Vector Layer");
-        map.addLayer(vectors);
+        // XXX: Enable if we found some use for it somewhere
+        // var vectors = new OpenLayers.Layer.Vector("Vector Layer");
+        // map.addLayer(vectors);
+        // map.addControl(new OpenLayers.Control.EditingToolbar(vectors));
+
         map.addControl(new OpenLayers.Control.MousePosition({ 'displayProjection' : projection_wgs }));
-        map.addControl(new OpenLayers.Control.EditingToolbar(vectors));
         map.addControl(new OpenLayers.Control.LayerSwitcher());
         map.addControl(new OpenLayers.Control.OverviewMap());
@@ -389 +391 @@
       }
       
-      
-      
-      
+      function toggleFieldById(field) {
+        var e = document.getElementById(field);
+        if (e.style.visibility == "hidden") {
+          e.style.visibility = "visible";
+        } else {
+          e.style.visibility = "hidden";
+        }
+      }
       
       function toggleClickControl() {
+          toggleFieldById('coordField');
           if (!clickControl.active) {
              clickControl.activate();
@@ -404 +412 @@
       }
       
+
       function toggleRulerControl() {
           if (!rulerControl.active) {
@@ -419 +428 @@
       }
       
-      function toggleInfo() {
-        var e = document.getElementById('infofield');
-        if (e.style.visibility == "hidden") {
-          e.style.visibility = "visible";
-        } else {
-          e.style.visibility = "hidden";
-        }
-      }
-      
-      
       // http://openlayers.org/dev/examples/strategy-cluster-threshold.html
       // ]]>
@@ -438 +437 @@
     <div id="basicMap">
       <div id="controller" style="position: absolute; top: 10px; left : 80px; z-index:1004">
-          <img id="ruler" src="ruler_off.png" onclick="toggleRulerControl()" alt="ruler"/>
+          <img id="ruler" src="ruler_off.png"
+                  onclick="toggleRulerControl()" alt="ruler" title="Measure distance between points"/>
           <img height="22" src="http://maps.google.com/mapfiles/kml/pal3/icon23.png" title="Reset focus" onclick="defaultFocus()" alt="Focus reset" />
           <img height="22"
                   src="http://maps.google.com/mapfiles/kml/pal3/icon36.png"
-                  title="Information" onclick="toggleInfo()" alt="information" />
+                  title="Information" onclick="toggleFieldById('infoField')" alt="information" />
           <img id="click" height="22"
                   src="http://maps.google.com/mapfiles/kml/pal3/icon28.png"
-                  title="Coordinate converter" onclick="toggleClickControl()"
+                  title="Get RD coordinates for use in Genesis" onclick="toggleClickControl()"
                   alt="coordinate converter"/>
           <div id="output"></div>
       </div>
-      <div id="infofield" style="position: absolute; bottom: 40px; left : 10px; z-index:1004; background-color: red; visibility: hidden">
+      <div id="infoField" style="position: absolute; bottom: 40px; left : 10px; z-index:1004; background-color: red; visibility: hidden">
         <ul>
           <li>holding down shift, whilst dragging the mouse to do box zooming</li>
@@ -462 +462 @@
   </p>
       </div>
+      <div id="coordField" style="position: absolute; bottom: 40px; left : 10px; z-index:1005; background-color: green; visibility: hidden">
+      Click on a location on the map to receive a link to calculate the RD coordinates: <br />
+      <a id="coordOutput" href="#" target="_blank">Click on MAP first</a>
+     </div>
     </div>
   </body>