Changeset 203 for trunk/npemap.org.uk

Timestamp:

Oct 26, 2006, 11:19:49 PM (15 years ago)

Author:

David Sheldon

Message:

Show popup when you click on a marker.

Location:

trunk/npemap.org.uk/static/tiles

Files:

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

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

@@ -16 +16 @@
       background-color: white;
       border: 1px solid black;
-      padding: 20px;
+      padding: 15px;
       position: absolute;
       display: none;
       width: 300px;
       height: 120px;
+                        z-index: 10;
+    }
+    #postcode_detail_window {
+      line-height: 100%;
+      background-color: white;
+      border: 1px solid black;
+      display: none;
+      padding: 10px;
+      position: absolute;
+      width: 300px;
+      height: 70px;
                         z-index: 10;
     }

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

@@ -66 +66 @@
                 </div>
 </div>
+  <div id="postcode_detail_window">
+    <div style="float:right"><a href="javascript:hideMarkerWindow()" title="close">X</a></div>
+                <div><span class="terms" id="location_detail"></span></div>
+                <div><span class="terms" id="postcode_detail"></span></div>
+    <div><span class="terms" id="source_detail"></span></div>
+         <span class="terms">This will contain a form to report a problem with this postcode, in the meantime email us.</span>
+  </div>
   <div id="postcode_form">
   <form method="post" action="../../cgi/submit.fcgi">

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

@@ -113 +113 @@
       postcodeFormElement.style.display = 'block';
       YAHOO.util.Dom.setXY(postcodeFormElement, [Math.max(0, (x-50)), (y-180) < 0 ? (y+10):(y-180)]);
-      fixIE(postcodeFormElement);
                         $('location').innerHTML = easting + ', ' + northing ;
       $('easting').value = easting;
@@ -132 +131 @@
   postcodeFormElement.style.display = 'none';
   markerElement.style.visibility = 'hidden';
+}
+
+function showMarkerWindow(x,y, postcode, easting, northing, source, id) {
+   $('location_detail').innerHTML = easting + ", "+northing;
+   $('postcode_detail').innerHTML = postcode
+   $('source_detail').innerHTML = "Source: " + ((source == 0) ? 'this site' : '<a href="http://www.freethepostcode.org/">freethepostcode.org</a>');
+   $('postcode_detail_window').style.display = 'block';
+   YAHOO.util.Dom.setXY('postcode_detail_window', [Math.max(0, (x-50)), (y-100) < 0 ? (y+10):(y-100)]);
+}
+
+function hideMarkerWindow() {
+   $('postcode_detail_window').style.display = 'none';
 }
 
@@ -186 +197 @@
 
 
-function fixIE(hoverDiv) {
-  if (document.all)
-  {
-    hoverDiv.zIndex = 10;
-  }  
-}
-
-
 function initializePage() {
                 mapContainerElement = $('map_container');
@@ -351 +354 @@
     newMarker = markers[nextMarker]; 
         var img=newMarker.firstChild;
-    img.title = postcode;
-    img.src = markerColours[source]; 
     newMarker.style.visibility = 'visible';
   }
@@ -358 +359 @@
     newMarker = document.createElement('div');
         var img=document.createElement('img');
-    img.title = postcode;
-    img.src = markerColours[source]; 
     newMarker.appendChild(img);
     newMarker.style.position = 'absolute';
@@ -366 +365 @@
     mainPageElement.appendChild(newMarker);
   }
+  img.title = postcode;
+  img.src = markerColours[source]; 
+
   nextMarker = nextMarker + 1;
 
@@ -371 +373 @@
   var x = ((easting / 1000) - minEasting) * tileWidth;
   var y = ((northing / 1000) - minNorthing) * tileHeight;
+  
+  newMarker.onclick = function(e) { 
+    e = YAHOO.util.Event.getEvent(e);
+    var x = YAHOO.util.Event.getPageX(e);
+    var y = YAHOO.util.Event.getPageY(e);
+    showMarkerWindow(x,y, postcode, easting, northing, source, id); };
 
 //  YAHOO.util.Dom.setXY(newMarker, [bottomLeft[0]+x-markerXOffset, bottom- (y+markerYOffset)]);