Changeset 84


Ignore:
Timestamp:
Oct 19, 2006, 9:29:13 PM (13 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:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/npemap.org.uk/cgi/get-postcodes.fcgi

    r82 r84  
    7373    }
    7474
    75     my $sth = $dbh->prepare("SELECT outward || ' ' || inward AS postcode, easting, northing FROM postcodes WHERE easting BETWEEN ? AND ? AND northing BETWEEN ? AND ?");
     75    my $sth = $dbh->prepare("SELECT outward || ' ' || inward AS postcode, easting, northing,id FROM postcodes WHERE easting BETWEEN ? AND ? AND northing BETWEEN ? AND ?");
     76   
    7677    if ($sth->execute($cgi->param('mineasting'), $cgi->param('maxeasting'), $cgi->param('minnorthing'), $cgi->param('maxnorthing'))) {
    7778        my $hr = $sth->fetchall_hashref('postcode');
     
    8081        foreach my $key (keys %$hr) {
    8182            my $hash = $$hr{$key};
    82             print "addMarker('$$hash{postcode}', $$hash{easting}, $$hash{northing});\n";
     83            print "addMarker('$$hash{postcode}', $$hash{easting}, $$hash{northing}, $$hash{id});\n";
    8384        }
     85        print "completeMarkers();\n";
    8486    } else {
    8587        print_internal_err("Database error retrieving data");
     
    9294
    9395# Helper routines
    94 sub print_err($) {
     96sub print_err {
    9597    my $err = shift;
    9698    print header("text/plain", "400 $err");
     
    98100}
    99101
    100 sub print_internal_err($) {
     102sub print_internal_err {
    101103    my $err = shift;
    102104    print header("text/plain", "500 $err");
  • trunk/npemap.org.uk/static/tiles/map.html

    r80 r84  
    3232           </tr>
    3333         </table>
     34         <span style="display: none" id="spinner">Loading...</span>
    3435
    3536                <div>
  • trunk/npemap.org.uk/static/tiles/mapTiles.js

    r80 r84  
    1111var tileHeight = 125;
    1212
     13var markerXOffset = 4;
     14var markerYOffset = 11;
    1315
    1416var offsetGridX = 450;
     
    3941var markerElement;
    4042var postcodeFormElement;
    41 
     43var locationElement;
     44var mainPageElement;
     45var spinnerElement;
    4246
    4347function go() {
    44                 mapElement = document.getElementById('map');
    45                 mapContainerElement = document.getElementById('map_container');
    46                 markerElement = document.getElementById('marker');
    47                 postcodeFormElement = document.getElementById('postcode_form');
    48                 locationElement = document.getElementById('location');
    4948                mapElement.onclick = function(e) {
    5049                        e = YAHOO.util.Event.getEvent(e);
     
    174173
    175174function initializePage() {
    176     size = 1000;
     175                mapElement = document.getElementById('map');
     176                mapContainerElement = document.getElementById('map_container');
     177                markerElement = document.getElementById('marker');
     178                postcodeFormElement = document.getElementById('postcode_form');
     179                locationElement = document.getElementById('location');
     180    mainPageElement = document.getElementById('main_page');
     181    spinnerElement = document.getElementById('spinner');
     182  size = 1000;
    177183
    178184        urlquery=location.href.split("?")
     
    225231 
    226232  removeMarkers();
     233        spinnerElement.style.display = 'block';
    227234  YAHOO.util.Connect.asyncRequest('GET', url, callback); 
     235}
     236
     237function completeMarkers() {
     238        spinnerElement.style.display = 'none';
    228239}
    229240
     
    239250
    240251var markers = new Array();
     252var nextMarker = 0;
    241253
    242254function removeMarkers() {
    243255  var pageElement = document.getElementById('main_page');
    244   for(var i=0; i<markers.length; i=i+1) {
    245     pageElement.removeChild(markers[i]);
     256  for(var i=0; i<nextMarker; i=i+1) {
     257    markers[i].style.visibility = 'hidden';
    246258  }
    247259  markerElement.style.visibility = 'hidden';
    248   markers = new Array();
    249 }
    250 
    251 function addMarker(postcode, easting, northing) {
    252   var markerXOffset = 4;
    253   var markerYOffset = 11;
    254 
    255   var newMarker = document.createElement('div');
    256         var img=document.createElement('img');
    257         img.title = postcode;
    258         img.src = "../images/green-marker.gif";
    259         newMarker.appendChild(img);
    260   newMarker.style.position = 'absolute';
    261         newMarker.style.zIndex = 1;
    262   document.getElementById('main_page').appendChild(newMarker);
    263 
    264   markers[markers.length] = newMarker;
     260  nextMarker = 0;
     261}
     262
     263function addMarker(postcode, easting, northing, id) {
     264  var newMarker;
     265  if (nextMarker < markers.length) {
     266    newMarker = markers[nextMarker];
     267    newMarker.style.visibility = 'visible';
     268  }
     269  else {
     270    newMarker = document.createElement('div');
     271        var img=document.createElement('img');
     272    img.title = postcode;
     273    img.src = "../images/green-marker.gif";
     274    newMarker.appendChild(img);
     275    newMarker.style.position = 'absolute';
     276    newMarker.style.zIndex = 1;
     277    markers[markers.length] = newMarker;
     278    mainPageElement.appendChild(newMarker);
     279  }
     280  nextMarker = nextMarker + 1;
     281
    265282
    266283  var x = ((easting / 1000) - minEasting) * tileWidth;
Note: See TracChangeset for help on using the changeset viewer.