Changeset 16

Timestamp:

Oct 11, 2006, 2:30:36 PM (15 years ago)

Author:

David Sheldon

Message:

Some more work on getting the entry box working.

Location:

trunk/npemap.org.uk/static/tiles

Files:

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

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

@@ -13 +13 @@
       background-color: blue;
       visibility: hidden;
+                        z-index: 1
     }
     #postcode_form {
@@ -23 +24 @@
       width: 300px;
       height: 100px;
+                        z-index: 1
     }
 

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

@@ -46 +46 @@
   <div id="postcode_form">
     <div style="text-align: right;"><a href="javascript:closePostcodeWindow()" title="close">X</a></div>
+                <div><span id="location"></span></div>
     <div><label for="postcode">Enter the postcode...</label></div>
     <div><input type="text" id="postcode" /></div>

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

@@ -12 +12 @@
 
 
-var offsetGridX = 425;
-var offsetGridY = 297;
+var offsetGridX = 450;
+var offsetGridY = 207;
 
 var zoomLevel = 1;

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

@@ -10 +10 @@
       markerElement = document.getElementById('marker');
       postcodeFormElement = document.getElementById('postcode_form');
+      locationElement = document.getElementById('location');
       mapElement.onclick = function(e) {
         var x = e.pageX - mapContainerElement.offsetLeft;
         var y = e.pageY - mapContainerElement.offsetTop;
+                                var img = e.target;
+                                var tileX = e.pageX - img.offsetLeft;
+                                var tileY = e.pageY - img.offsetTop;
+                                // Tiles are eee/nnn.jpg
+                                var tile = img.src.substring( img.src.lastIndexOf("/") - 3 );
+                                var baseEasting = tile.substring(0, tile.indexOf("/"));
+                                var baseNorthing = tile.substring(tile.indexOf("/") + 1, tile.indexOf("."));
+                                
+                                var easting = baseEasting + ('000' + Math.round((tileX/img.offsetWidth)*1000)).substr(-3)
+                                var northing = baseNorthing + ('000' + Math.round(((tileY/img.offsetHeight))*1000)).substr(-3)
+
+                                
         markerElement.style.left = (x-2) + 'px';
         markerElement.style.top = (y-2) + 'px';
@@ -19 +32 @@
         postcodeFormElement.style.top = (y-180) + 'px';
         postcodeFormElement.style.display = 'block';
+                                locationElement.innerHTML = easting + ', ' + northing
         document.getElementById('postcode').focus();
       }