Changeset 172 for trunk/npemap.org.uk

Timestamp:

Oct 25, 2006, 4:20:41 PM (15 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:

• map.html (modified) (2 diffs)
• mapTiles.js (modified) (19 diffs)

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

@@ -66 +66 @@
                 </div>
 </div>
-</div>
-<div id="map_container" style="float:left">
-  <div id="marker">
-  <img src='../images/yellow-marker.gif' alt="Your location"/>
-  </div>
   <div id="postcode_form">
   <form method="post" action="../../cgi/submit.fcgi">
@@ -88 +83 @@
          <span class="terms">By clicking submit you agree to release this information into the public domain.</span>
   </div>
+</div>
+<div id="map_container" style="float:left">
+  <div id="marker">
+  <img src='../images/yellow-marker.gif' alt="Your location"/>
+  </div>
 <!--
   <div id="postcodeinfo">

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

@@ -20 +20 @@
 
 var prefixes = new Array(1);
-var root = "http://tile.npemap.org.uk/";
+var root = "http://ustile.npemap.org.uk/";
 
 prefixes[1] = root + "scaled1/";
@@ -32 +32 @@
 jumpIn[2] = 3;
 jumpIn[3] = 2;
+
+var zooms = new Array(1);
+zooms[1] = 1;
+zooms[2] = 3;
+zooms[3] = 6;
 
 var prefix;
@@ -48 +53 @@
 var spinnerElement;
 
+
+// From prototype
+function $() {
+  var results = [], element;
+  for (var i = 0; i < arguments.length; i++) {
+    element = arguments[i];
+    if (typeof element == 'string')
+      element = document.getElementById(element);
+    results.push(element);
+  }
+  return results.length < 2 ? results[0] : results;
+}
+
 function box1Keypress(e) {
   var event = YAHOO.util.Event.getEvent(e);
   var key = String.fromCharCode(YAHOO.util.Event.getCharCode(event));
   if (key == ' ') {
-    document.getElementById('postcode2').focus();
+    $('postcode2').focus();
     return false;
   } else if (key >= '0' && key <= '9' && this.value.length == 3) {
     this.value = this.value + key;
-    document.getElementById('postcode2').focus();
+    $('postcode2').focus();
     YAHOO.util.Event.preventDefault(event);
   }
@@ -81 +99 @@
     if (zoomLevel != 1) {
       // Zoom in.
-
-      offsetGridX = Math.round((baseEasting -0 + tileXratio) * jumpIn[zoomLevel]);
-      offsetGridY = Math.round((baseNorthing -0 + tileYratio) * jumpIn[zoomLevel]);
-
-      zoomLevel = zoomLevel - 1;
-      fixZoomButton();
-      refreshGrid();
+      gotoLocation(Math.round((baseEasting -0 + tileXratio) * zooms[zoomLevel]), 
+                                     Math.round((baseNorthing -0 + tileYratio) *  zooms[zoomLevel]),
+                                                                          zoomLevel - 1);
     } else {
     
@@ -95 +109 @@
       YAHOO.util.Dom.setXY(markerElement, [(x-markerXOffset), (y-markerYOffset)]);
       markerElement.style.visibility = 'visible';
-      
+                        
       postcodeFormElement.style.display = 'block';
       YAHOO.util.Dom.setXY(postcodeFormElement, [Math.max(0, (x-50)), (y-180) < 0 ? (y+10):(y-180)]);
-      locationElement.innerHTML = easting + ', ' + northing ;
-      document.getElementById('easting').value = easting;
-      document.getElementById('northing').value = northing;
-      document.getElementById('returnX').value = offsetGridX;
-      document.getElementById('returnY').value = offsetGridY;
-
-      document.getElementById('postcode1').value = "";
-      document.getElementById('postcode2').value = "";
-      document.getElementById('postcode1').focus();
+      fixIE(postcodeFormElement);
+                        locationElement.innerHTML = easting + ', ' + northing ;
+      $('easting').value = easting;
+      $('northing').value = northing;
+      $('returnX').value = offsetGridX;
+      $('returnY').value = offsetGridY;
+
+      $('postcode1').value = "";
+      $('postcode2').value = "";
+      $('postcode1').focus();
     }
   }
@@ -124 +139 @@
         }
   removeMarkers();
-
-        offsetGridX = Math.round(offsetGridX / jumpOut[zoomLevel]);
-        offsetGridY = Math.round(offsetGridY / jumpOut[zoomLevel]);
-
-        zoomLevel = zoomLevel + 1;
-  fixZoomButton();
-
-        refreshGrid();
+        closePostcodeWindow();
+
+  gotoLocation(offsetGridX * zooms[zoomLevel], offsetGridY * zooms[zoomLevel], zoomLevel + 1);
 }
 
@@ -139 +149 @@
         }
 
-        offsetGridX = (offsetGridX * jumpIn[zoomLevel]);
-        offsetGridY = (offsetGridY * jumpIn[zoomLevel]);
-
-        zoomLevel = zoomLevel - 1;
-        
-  fixZoomButton();
-        refreshGrid();
+  gotoLocation(offsetGridX * zooms[zoomLevel], offsetGridY * zooms[zoomLevel], zoomLevel - 1);
 }
 
@@ -151 +155 @@
   prefix = prefixes[zoomLevel];
   if(zoomLevel == 1) {
-    document.getElementById('zoomin_enabled').style.visibility = 'hidden';
-    document.getElementById('zoomin_disabled').style.visibility = 'visible';
+    $('zoomin_enabled').style.visibility = 'hidden';
+    $('zoomin_disabled').style.visibility = 'visible';
         } else {
-    document.getElementById('zoomin_enabled').style.visibility = 'visible';
-    document.getElementById('zoomin_disabled').style.visibility = 'hidden';
+    $('zoomin_enabled').style.visibility = 'visible';
+    $('zoomin_disabled').style.visibility = 'hidden';
   }
 }
@@ -169 +173 @@
   sizeGridX = Math.round((screenWidth / tileWidth)-2)
   sizeGridY = Math.round((screenHeight / tileHeight)-1)
-  mapElement = document.getElementById('map');
+  mapElement = $('map');
  
   page = ''
@@ -183 +187 @@
 
 
+function fixIE(hoverDiv) {
+  if (document.all)
+  {
+    hoverDiv.zIndex = 10;
+  }  
+}
+
 
 function initializePage() {
-                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');
+                mapElement = $('map');
+                mapContainerElement = $('map_container');
+                markerElement = $('marker');
+                postcodeFormElement = $('postcode_form');
+                locationElement = $('location');
+    mainPageElement = $('main_page');
+    spinnerElement = $('spinner');
   size = 1000;
 
@@ -223 +234 @@
 
 function gotoLocation(easting, northing, zoom) {
-  offsetGridX = easting; 
-  offsetGridY = northing;
+  offsetGridX = Math.round(easting / zooms[zoom]); 
+  offsetGridY = Math.round(northing/ zooms[zoom]); 
   zoomLevel = zoom;
   fixZoomButton();
@@ -249 +260 @@
             tileX = trimNumber(x+offsetGridX-Math.round(sizeGridX/2));
             tileY = trimNumber(y+offsetGridY-Math.round(sizeGridY/2));
-            document.getElementById('element' + x + '.' + y).src = prefix+tileX+'/'+ tileY + '.jpg';
+            $('element' + x + '.' + y).src = prefix+tileX+'/'+ tileY + '.jpg';
         }
     }
@@ -272 +283 @@
   removeMarkers();
   spinnerElement.className = 'loading';
-  spinnerElement.innerHtml = 'Loading...';
+  spinnerElement.innerHTML = 'Loading...';
   findMarkerOffsets();
   
@@ -304 +315 @@
   // Don't do anything
   spinnerElement.className = 'error';
-  spinnerElement.innerHtml = 'Problem showing existing data.';
+  spinnerElement.innerHTML = 'Problem showing existing data.';
 }
 
@@ -311 +322 @@
 
 function removeMarkers() {
-  var pageElement = document.getElementById('main_page');
+  var pageElement = $('main_page');
   for(var i=0; i<nextMarker; i=i+1) {
     markers[i].style.visibility = 'hidden';
@@ -356 +367 @@
 
 function updatePermalink() {
-        document.getElementById("permalink").href = "#" + getLink();
+        $("permalink").href = "#" + getLink();
   location.href = '#'+getLink();
 }
@@ -365 +376 @@
 
 function updateGrid(theDirection) {
-    markerElement.style.visibility = 'hidden';
+    closePostcodeWindow();
     if ( theDirection == 'right' ) {
         if ( offsetGridX < size-sizeGridX )
@@ -389 +400 @@
 
 function find() {
-   request = 'http://ws.geonames.org/searchJSON?name=' +  encodeURIComponent(document.getElementById('where').value)  + '&maxRows=1&callback=getLocation&country=GB&fclass=P&style=SHORT';
+   request = 'http://ws.geonames.org/searchJSON?name=' +  encodeURIComponent($('where').value)  + '&maxRows=1&callback=getLocation&country=GB&fclass=P&style=SHORT';
   aObj = new JSONscriptRequest(request);
   // Build the script tag
@@ -414 +425 @@
     gotoLocation(easting, northing, 1);
     
-    document.getElementById('where').value = '';
+    $('where').value = '';
   }
   else {