Changeset 203


Ignore:
Timestamp:
Oct 26, 2006, 11:19:49 PM (13 years ago)
Author:
David Sheldon
Message:

Show popup when you click on a marker.

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

Legend:

Unmodified
Added
Removed
  • trunk/npemap.org.uk/static/tiles/grid.css

    r189 r203  
    1616      background-color: white;
    1717      border: 1px solid black;
    18       padding: 20px;
     18      padding: 15px;
    1919      position: absolute;
    2020      display: none;
    2121      width: 300px;
    2222      height: 120px;
     23                        z-index: 10;
     24    }
     25    #postcode_detail_window {
     26      line-height: 100%;
     27      background-color: white;
     28      border: 1px solid black;
     29      display: none;
     30      padding: 10px;
     31      position: absolute;
     32      width: 300px;
     33      height: 70px;
    2334                        z-index: 10;
    2435    }
  • trunk/npemap.org.uk/static/tiles/map.html

    r189 r203  
    6666                </div>
    6767</div>
     68  <div id="postcode_detail_window">
     69    <div style="float:right"><a href="javascript:hideMarkerWindow()" title="close">X</a></div>
     70                <div><span class="terms" id="location_detail"></span></div>
     71                <div><span class="terms" id="postcode_detail"></span></div>
     72    <div><span class="terms" id="source_detail"></span></div>
     73         <span class="terms">This will contain a form to report a problem with this postcode, in the meantime email us.</span>
     74  </div>
    6875  <div id="postcode_form">
    6976  <form method="post" action="../../cgi/submit.fcgi">
  • trunk/npemap.org.uk/static/tiles/mapTiles.js

    r195 r203  
    113113      postcodeFormElement.style.display = 'block';
    114114      YAHOO.util.Dom.setXY(postcodeFormElement, [Math.max(0, (x-50)), (y-180) < 0 ? (y+10):(y-180)]);
    115       fixIE(postcodeFormElement);
    116115                        $('location').innerHTML = easting + ', ' + northing ;
    117116      $('easting').value = easting;
     
    132131  postcodeFormElement.style.display = 'none';
    133132  markerElement.style.visibility = 'hidden';
     133}
     134
     135function showMarkerWindow(x,y, postcode, easting, northing, source, id) {
     136   $('location_detail').innerHTML = easting + ", "+northing;
     137   $('postcode_detail').innerHTML = postcode
     138   $('source_detail').innerHTML = "Source: " + ((source == 0) ? 'this site' : '<a href="http://www.freethepostcode.org/">freethepostcode.org</a>');
     139   $('postcode_detail_window').style.display = 'block';
     140   YAHOO.util.Dom.setXY('postcode_detail_window', [Math.max(0, (x-50)), (y-100) < 0 ? (y+10):(y-100)]);
     141}
     142
     143function hideMarkerWindow() {
     144   $('postcode_detail_window').style.display = 'none';
    134145}
    135146
     
    186197
    187198
    188 function fixIE(hoverDiv) {
    189   if (document.all)
    190   {
    191     hoverDiv.zIndex = 10;
    192   } 
    193 }
    194 
    195 
    196199function initializePage() {
    197200                mapContainerElement = $('map_container');
     
    351354    newMarker = markers[nextMarker];
    352355        var img=newMarker.firstChild;
    353     img.title = postcode;
    354     img.src = markerColours[source];
    355356    newMarker.style.visibility = 'visible';
    356357  }
     
    358359    newMarker = document.createElement('div');
    359360        var img=document.createElement('img');
    360     img.title = postcode;
    361     img.src = markerColours[source];
    362361    newMarker.appendChild(img);
    363362    newMarker.style.position = 'absolute';
     
    366365    mainPageElement.appendChild(newMarker);
    367366  }
     367  img.title = postcode;
     368  img.src = markerColours[source];
     369
    368370  nextMarker = nextMarker + 1;
    369371
     
    371373  var x = ((easting / 1000) - minEasting) * tileWidth;
    372374  var y = ((northing / 1000) - minNorthing) * tileHeight;
     375 
     376  newMarker.onclick = function(e) {
     377    e = YAHOO.util.Event.getEvent(e);
     378    var x = YAHOO.util.Event.getPageX(e);
     379    var y = YAHOO.util.Event.getPageY(e);
     380    showMarkerWindow(x,y, postcode, easting, northing, source, id); };
    373381
    374382//  YAHOO.util.Dom.setXY(newMarker, [bottomLeft[0]+x-markerXOffset, bottom- (y+markerYOffset)]);
Note: See TracChangeset for help on using the changeset viewer.