Changeset 172


Ignore:
Timestamp:
Oct 25, 2006, 4:20:41 PM (13 years ago)
Author:
David Sheldon
Message:

Tidy up the JS and finally fixed the IE overlay problem.

Don't ask what sort of nutters wrote that shite.

Location:
trunk/npemap.org.uk/static/tiles
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/npemap.org.uk/static/tiles/map.html

    r164 r172  
    6666                </div>
    6767</div>
    68 </div>
    69 <div id="map_container" style="float:left">
    70   <div id="marker">
    71   <img src='../images/yellow-marker.gif' alt="Your location"/>
    72   </div>
    7368  <div id="postcode_form">
    7469  <form method="post" action="../../cgi/submit.fcgi">
     
    8883         <span class="terms">By clicking submit you agree to release this information into the public domain.</span>
    8984  </div>
     85</div>
     86<div id="map_container" style="float:left">
     87  <div id="marker">
     88  <img src='../images/yellow-marker.gif' alt="Your location"/>
     89  </div>
    9090<!--
    9191  <div id="postcodeinfo">
  • trunk/npemap.org.uk/static/tiles/mapTiles.js

    r171 r172  
    2020
    2121var prefixes = new Array(1);
    22 var root = "http://tile.npemap.org.uk/";
     22var root = "http://ustile.npemap.org.uk/";
    2323
    2424prefixes[1] = root + "scaled1/";
     
    3232jumpIn[2] = 3;
    3333jumpIn[3] = 2;
     34
     35var zooms = new Array(1);
     36zooms[1] = 1;
     37zooms[2] = 3;
     38zooms[3] = 6;
    3439
    3540var prefix;
     
    4853var spinnerElement;
    4954
     55
     56// From prototype
     57function $() {
     58  var results = [], element;
     59  for (var i = 0; i < arguments.length; i++) {
     60    element = arguments[i];
     61    if (typeof element == 'string')
     62      element = document.getElementById(element);
     63    results.push(element);
     64  }
     65  return results.length < 2 ? results[0] : results;
     66}
     67
    5068function box1Keypress(e) {
    5169  var event = YAHOO.util.Event.getEvent(e);
    5270  var key = String.fromCharCode(YAHOO.util.Event.getCharCode(event));
    5371  if (key == ' ') {
    54     document.getElementById('postcode2').focus();
     72    $('postcode2').focus();
    5573    return false;
    5674  } else if (key >= '0' && key <= '9' && this.value.length == 3) {
    5775    this.value = this.value + key;
    58     document.getElementById('postcode2').focus();
     76    $('postcode2').focus();
    5977    YAHOO.util.Event.preventDefault(event);
    6078  }
     
    8199    if (zoomLevel != 1) {
    82100      // Zoom in.
    83 
    84       offsetGridX = Math.round((baseEasting -0 + tileXratio) * jumpIn[zoomLevel]);
    85       offsetGridY = Math.round((baseNorthing -0 + tileYratio) * jumpIn[zoomLevel]);
    86 
    87       zoomLevel = zoomLevel - 1;
    88       fixZoomButton();
    89       refreshGrid();
     101      gotoLocation(Math.round((baseEasting -0 + tileXratio) * zooms[zoomLevel]),
     102                                     Math.round((baseNorthing -0 + tileYratio) *  zooms[zoomLevel]),
     103                                                                          zoomLevel - 1);
    90104    } else {
    91105   
     
    95109      YAHOO.util.Dom.setXY(markerElement, [(x-markerXOffset), (y-markerYOffset)]);
    96110      markerElement.style.visibility = 'visible';
    97      
     111                       
    98112      postcodeFormElement.style.display = 'block';
    99113      YAHOO.util.Dom.setXY(postcodeFormElement, [Math.max(0, (x-50)), (y-180) < 0 ? (y+10):(y-180)]);
    100       locationElement.innerHTML = easting + ', ' + northing ;
    101       document.getElementById('easting').value = easting;
    102       document.getElementById('northing').value = northing;
    103       document.getElementById('returnX').value = offsetGridX;
    104       document.getElementById('returnY').value = offsetGridY;
    105 
    106       document.getElementById('postcode1').value = "";
    107       document.getElementById('postcode2').value = "";
    108       document.getElementById('postcode1').focus();
     114      fixIE(postcodeFormElement);
     115                        locationElement.innerHTML = easting + ', ' + northing ;
     116      $('easting').value = easting;
     117      $('northing').value = northing;
     118      $('returnX').value = offsetGridX;
     119      $('returnY').value = offsetGridY;
     120
     121      $('postcode1').value = "";
     122      $('postcode2').value = "";
     123      $('postcode1').focus();
    109124    }
    110125  }
     
    124139        }
    125140  removeMarkers();
    126 
    127         offsetGridX = Math.round(offsetGridX / jumpOut[zoomLevel]);
    128         offsetGridY = Math.round(offsetGridY / jumpOut[zoomLevel]);
    129 
    130         zoomLevel = zoomLevel + 1;
    131   fixZoomButton();
    132 
    133         refreshGrid();
     141        closePostcodeWindow();
     142
     143  gotoLocation(offsetGridX * zooms[zoomLevel], offsetGridY * zooms[zoomLevel], zoomLevel + 1);
    134144}
    135145
     
    139149        }
    140150
    141         offsetGridX = (offsetGridX * jumpIn[zoomLevel]);
    142         offsetGridY = (offsetGridY * jumpIn[zoomLevel]);
    143 
    144         zoomLevel = zoomLevel - 1;
    145        
    146   fixZoomButton();
    147         refreshGrid();
     151  gotoLocation(offsetGridX * zooms[zoomLevel], offsetGridY * zooms[zoomLevel], zoomLevel - 1);
    148152}
    149153
     
    151155  prefix = prefixes[zoomLevel];
    152156  if(zoomLevel == 1) {
    153     document.getElementById('zoomin_enabled').style.visibility = 'hidden';
    154     document.getElementById('zoomin_disabled').style.visibility = 'visible';
     157    $('zoomin_enabled').style.visibility = 'hidden';
     158    $('zoomin_disabled').style.visibility = 'visible';
    155159        } else {
    156     document.getElementById('zoomin_enabled').style.visibility = 'visible';
    157     document.getElementById('zoomin_disabled').style.visibility = 'hidden';
     160    $('zoomin_enabled').style.visibility = 'visible';
     161    $('zoomin_disabled').style.visibility = 'hidden';
    158162  }
    159163}
     
    169173  sizeGridX = Math.round((screenWidth / tileWidth)-2)
    170174  sizeGridY = Math.round((screenHeight / tileHeight)-1)
    171   mapElement = document.getElementById('map');
     175  mapElement = $('map');
    172176 
    173177  page = ''
     
    183187
    184188
     189function fixIE(hoverDiv) {
     190  if (document.all)
     191  {
     192    hoverDiv.zIndex = 10;
     193  } 
     194}
     195
    185196
    186197function initializePage() {
    187                 mapElement = document.getElementById('map');
    188                 mapContainerElement = document.getElementById('map_container');
    189                 markerElement = document.getElementById('marker');
    190                 postcodeFormElement = document.getElementById('postcode_form');
    191                 locationElement = document.getElementById('location');
    192     mainPageElement = document.getElementById('main_page');
    193     spinnerElement = document.getElementById('spinner');
     198                mapElement = $('map');
     199                mapContainerElement = $('map_container');
     200                markerElement = $('marker');
     201                postcodeFormElement = $('postcode_form');
     202                locationElement = $('location');
     203    mainPageElement = $('main_page');
     204    spinnerElement = $('spinner');
    194205  size = 1000;
    195206
     
    223234
    224235function gotoLocation(easting, northing, zoom) {
    225   offsetGridX = easting;
    226   offsetGridY = northing;
     236  offsetGridX = Math.round(easting / zooms[zoom]);
     237  offsetGridY = Math.round(northing/ zooms[zoom]);
    227238  zoomLevel = zoom;
    228239  fixZoomButton();
     
    249260            tileX = trimNumber(x+offsetGridX-Math.round(sizeGridX/2));
    250261            tileY = trimNumber(y+offsetGridY-Math.round(sizeGridY/2));
    251             document.getElementById('element' + x + '.' + y).src = prefix+tileX+'/'+ tileY + '.jpg';
     262            $('element' + x + '.' + y).src = prefix+tileX+'/'+ tileY + '.jpg';
    252263        }
    253264    }
     
    272283  removeMarkers();
    273284  spinnerElement.className = 'loading';
    274   spinnerElement.innerHtml = 'Loading...';
     285  spinnerElement.innerHTML = 'Loading...';
    275286  findMarkerOffsets();
    276287 
     
    304315  // Don't do anything
    305316  spinnerElement.className = 'error';
    306   spinnerElement.innerHtml = 'Problem showing existing data.';
     317  spinnerElement.innerHTML = 'Problem showing existing data.';
    307318}
    308319
     
    311322
    312323function removeMarkers() {
    313   var pageElement = document.getElementById('main_page');
     324  var pageElement = $('main_page');
    314325  for(var i=0; i<nextMarker; i=i+1) {
    315326    markers[i].style.visibility = 'hidden';
     
    356367
    357368function updatePermalink() {
    358         document.getElementById("permalink").href = "#" + getLink();
     369        $("permalink").href = "#" + getLink();
    359370  location.href = '#'+getLink();
    360371}
     
    365376
    366377function updateGrid(theDirection) {
    367     markerElement.style.visibility = 'hidden';
     378    closePostcodeWindow();
    368379    if ( theDirection == 'right' ) {
    369380        if ( offsetGridX < size-sizeGridX )
     
    389400
    390401function find() {
    391    request = 'http://ws.geonames.org/searchJSON?name=' +  encodeURIComponent(document.getElementById('where').value)  + '&maxRows=1&callback=getLocation&country=GB&fclass=P&style=SHORT';
     402   request = 'http://ws.geonames.org/searchJSON?name=' +  encodeURIComponent($('where').value)  + '&maxRows=1&callback=getLocation&country=GB&fclass=P&style=SHORT';
    392403  aObj = new JSONscriptRequest(request);
    393404  // Build the script tag
     
    414425    gotoLocation(easting, northing, 1);
    415426   
    416     document.getElementById('where').value = '';
     427    $('where').value = '';
    417428  }
    418429  else {
Note: See TracChangeset for help on using the changeset viewer.