Changeset 84 for trunk/npemap.org.uk

Timestamp:

Oct 19, 2006, 9:29:13 PM (14 years ago)

Author:

David Sheldon

Message:

Reuse the marker DIVs in the hope of making it faster, and show a message whilst they load (an animated spinner didn't help as the speed limit is in the client).

Location:

trunk/npemap.org.uk

Files:

• cgi/get-postcodes.fcgi (modified) (4 diffs)
• static/tiles/map.html (modified) (1 diff)
• static/tiles/mapTiles.js (modified) (5 diffs)

trunk/npemap.org.uk/cgi/get-postcodes.fcgi

@@ -73 +73 @@
     }
 
-    my $sth = $dbh->prepare("SELECT outward || ' ' || inward AS postcode, easting, northing FROM postcodes WHERE easting BETWEEN ? AND ? AND northing BETWEEN ? AND ?");
+    my $sth = $dbh->prepare("SELECT outward || ' ' || inward AS postcode, easting, northing,id FROM postcodes WHERE easting BETWEEN ? AND ? AND northing BETWEEN ? AND ?");
+    
     if ($sth->execute($cgi->param('mineasting'), $cgi->param('maxeasting'), $cgi->param('minnorthing'), $cgi->param('maxnorthing'))) {
         my $hr = $sth->fetchall_hashref('postcode');
@@ -80 +81 @@
         foreach my $key (keys %$hr) {
             my $hash = $$hr{$key};
-            print "addMarker('$$hash{postcode}', $$hash{easting}, $$hash{northing});\n";
+            print "addMarker('$$hash{postcode}', $$hash{easting}, $$hash{northing}, $$hash{id});\n";
         }
+        print "completeMarkers();\n";
     } else {
         print_internal_err("Database error retrieving data");
@@ -92 +94 @@
 
 # Helper routines
-sub print_err($) {
+sub print_err {
     my $err = shift;
     print header("text/plain", "400 $err");
@@ -98 +100 @@
 }
 
-sub print_internal_err($) {
+sub print_internal_err {
     my $err = shift;
     print header("text/plain", "500 $err");

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

@@ -32 +32 @@
            </tr>
          </table>
+         <span style="display: none" id="spinner">Loading...</span>
 
                 <div>

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

@@ -11 +11 @@
 var tileHeight = 125;
 
+var markerXOffset = 4;
+var markerYOffset = 11;
 
 var offsetGridX = 450;
@@ -39 +41 @@
 var markerElement;
 var postcodeFormElement;
-
+var locationElement;
+var mainPageElement;
+var spinnerElement;
 
 function go() {
-                mapElement = document.getElementById('map');
-                mapContainerElement = document.getElementById('map_container');
-                markerElement = document.getElementById('marker');
-                postcodeFormElement = document.getElementById('postcode_form');
-                locationElement = document.getElementById('location');
                 mapElement.onclick = function(e) {
                         e = YAHOO.util.Event.getEvent(e);
@@ -174 +173 @@
 
 function initializePage() {
-    size = 1000;
+                mapElement = document.getElementById('map');
+                mapContainerElement = document.getElementById('map_container');
+                markerElement = document.getElementById('marker');
+                postcodeFormElement = document.getElementById('postcode_form');
+                locationElement = document.getElementById('location');
+    mainPageElement = document.getElementById('main_page');
+    spinnerElement = document.getElementById('spinner');
+  size = 1000;
 
         urlquery=location.href.split("?")
@@ -225 +231 @@
   
   removeMarkers();
+        spinnerElement.style.display = 'block';
   YAHOO.util.Connect.asyncRequest('GET', url, callback);  
+}
+
+function completeMarkers() {
+        spinnerElement.style.display = 'none';
 }
 
@@ -239 +250 @@
 
 var markers = new Array();
+var nextMarker = 0;
 
 function removeMarkers() {
   var pageElement = document.getElementById('main_page');
-  for(var i=0; i<markers.length; i=i+1) {
-    pageElement.removeChild(markers[i]);
+  for(var i=0; i<nextMarker; i=i+1) {
+    markers[i].style.visibility = 'hidden';
   }
   markerElement.style.visibility = 'hidden';
-  markers = new Array();
-}
-
-function addMarker(postcode, easting, northing) {
-  var markerXOffset = 4;
-  var markerYOffset = 11;
-
-  var newMarker = document.createElement('div');
-        var img=document.createElement('img');
-        img.title = postcode;
-        img.src = "../images/green-marker.gif";
-        newMarker.appendChild(img);
-  newMarker.style.position = 'absolute';
-        newMarker.style.zIndex = 1;
-  document.getElementById('main_page').appendChild(newMarker);
-
-  markers[markers.length] = newMarker;
+  nextMarker = 0;
+}
+
+function addMarker(postcode, easting, northing, id) {
+  var newMarker;
+  if (nextMarker < markers.length) {
+    newMarker = markers[nextMarker]; 
+    newMarker.style.visibility = 'visible';
+  }
+  else {
+    newMarker = document.createElement('div');
+        var img=document.createElement('img');
+    img.title = postcode;
+    img.src = "../images/green-marker.gif";
+    newMarker.appendChild(img);
+    newMarker.style.position = 'absolute';
+    newMarker.style.zIndex = 1;
+    markers[markers.length] = newMarker;
+    mainPageElement.appendChild(newMarker);
+  }
+  nextMarker = nextMarker + 1;
+
 
   var x = ((easting / 1000) - minEasting) * tileWidth;