Changeset 189 for trunk/npemap.org.uk

Timestamp:

Oct 26, 2006, 9:26:12 PM (15 years ago)

Author:

David Sheldon

Message:

Display a list of possible locations if geonames has several results.

Location:

trunk/npemap.org.uk/static/tiles

Files:

• grid.css (modified) (1 diff)
• map.html (modified) (2 diffs)
• mapTiles.js (modified) (2 diffs)

trunk/npemap.org.uk/static/tiles/grid.css

@@ -23 +23 @@
                         z-index: 10;
     }
- 
+
+    div.geonames {
+      background-color: white;
+      border: 1px solid black;
+      float: right;
+      position: absolute;
+    }
+    div.geonames span.loc {
+      font-size: 60%;
+    }
+    
    span.terms {
                  margin-top: 0px;

trunk/npemap.org.uk/static/tiles/map.html

@@ -22 +22 @@
 
 <div id="main_page">
-<div id="move" style="float:right">
+<div id="menu" style="float:right">
          <table border="0">
            <tr>
@@ -57 +57 @@
                         <a href="/reportBug.html">problem?</a>
                 </div>
-                <div>
+                <div id="geonames-search">
       <form onsubmit="return find()" action="">
       <p><label for="where">Place name:</label><br/>

trunk/npemap.org.uk/static/tiles/mapTiles.js

@@ -417 +417 @@
 
 function find() {
-   request = 'http://ws.geonames.org/searchJSON?name=' +  encodeURIComponent($('where').value)  + '&maxRows=1&callback=getLocation&country=GB&fclass=P&style=SHORT';
+   request = 'http://ws.geonames.org/searchJSON?name=' +  encodeURIComponent($('where').value)  + '&callback=getLocation&country=GB&fclass=P&style=SHORT';
   aObj = new JSONscriptRequest(request);
   // Build the script tag
@@ -434 +434 @@
   var geonames = jData.geonames;
   if (geonames.length > 0) {
-    var name = geonames[0];
-    var ll = new LatLng(name.lat,name.lng);
+    if (geonames.length == 1) {
+      var name = geonames[0];
+      gotoLatLong(name.lat, name.lng, 1);
+    } else {
+      var popup = geonamesPopup();
+      for(var i=0; i<geonames.length; i=i+1) {
+        appendLink(popup, geonames[i]);
+      }
+    }
+    $('where').value = '';
+  }
+  else {
+    alert("Sorry, can't find that location"); 
+  }
+}
+
+function geonamesPopup() {
+ var popup = document.createElement("div");
+ popup.className = "geonames";
+ $("menu").appendChild(popup);
+ var link = document.createElement("A");
+ link.onclick = function () { $("menu").removeChild(popup); return false; };
+ link.href = '#';
+ link.innerHTML = "close" ;
+ popup.appendChild(link);
+ popup.appendChild(document.createElement("BR"));
+// popup.setXY($("geonames-search").getXY());
+ return popup; 
+}
+
+function appendLink(popup, loc) {
+ var link = document.createElement("A");
+ link.onclick = function () { gotoLatLong(loc.lat, loc.lng, 1); $("menu").removeChild(popup); return false; };
+ link.href = '#';
+ link.innerHTML = loc.name ;
+ popup.appendChild(link);
+ var span = document.createElement("SPAN");
+ span.className = "loc";
+ formatLatLong(span, loc.lat, loc.lng);
+ popup.appendChild(span);
+ popup.appendChild(document.createElement("BR"));
+}
+
+function formatLatLong(parent, lat, lng) {
+  var text = " N " + formatDeg(lat) + " " ;
+  if (lng < 0) { text += "W ";} else { text += "E ";}
+  text += formatDeg(Math.abs(lng));
+  parent.appendChild(document.createTextNode(text));
+}
+
+function formatDeg(num) {
+  var text = (Math.floor(num * 10)/10) + "° ";
+  return text; 
+}
+
+function gotoLatLong(lat, lng, zoom) {
+    var ll = new LatLng(lat,lng);
     ll.WGS84ToOSGB36();
     var en = ll.toOSRef();
     var easting = Math.round(en.easting/1000);
     var northing = Math.round(en.northing/1000);
-    gotoLocation(easting, northing, 1);
-    
-    $('where').value = '';
-  }
-  else {
-    alert("Sorry, can't find that location"); 
-  }
-}
-
-
+    gotoLocation(easting, northing, zoom);
+}
+
+