Changeset 223


Ignore:
Timestamp:
Oct 29, 2006, 5:20:19 PM (14 years ago)
Author:
David Sheldon
Message:

Improve the general look of the thing.

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

Legend:

Unmodified
Added
Removed

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

    r217 r223  
    4343
    4444    div.geonames {
     45      font-size: 60%;
    4546      background-color: white;
    4647      border: 1px solid black;
    … …  
    4950    }
    5051    div.geonames span.loc {
     52      font-size: 80%;
     53    }
     54
     55    #geonames_results_window {
    5156      font-size: 60%;
     57      line-height: 100%;
     58      background-color: white;
     59      border: 1px solid black;
     60      padding: 5px;
     61      width: 150px;
     62                        z-index: 10;
     63      display: none;
    5264    }
    5365   
    … …  
    7688   }
    7789
    78    div.report_form,#bad {
    79      font-size: 60%;
    80    }
    81 
    8290   div.report_form {
    8391     display: none;
    … …  
    8795     font: normal 100% arial ;
    8896     padding: 1px;
    89      
     97   }
     98   #postcode_detail_window {
     99                 margin-top: 0px;
     100     font-family: sans;
     101                 font-size: 65%;
     102                 line-height: 100%;
     103         }
     104   #postcode_detail_window span.label {
     105                 font-weight: bold;
    90106   }
    91107
     108   .close {
     109     font-family: sans;
     110     float: right;
     111   }
     112   .close a {
     113    text-decoration: none;
     114   }
     115
     116#menu {
     117  width: 150px;
     118  padding: 1em;
     119  background-color: #DDFF9b;
     120  border: 1px solid black;
     121}
     122
     123#movement {
     124  background-color: #EDFFCb;
     125  border: 1px solid black;
     126}
     127
     128ul.links {
     129  margin-left: 0px;
     130  padding: 0px;
     131}
     132
     133ul.links li {
     134  list-style: none;
     135  margin-left: 0px;
     136}

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

    r217 r223  
    2323<div id="main_page">
    2424<div id="menu" style="float:right">
    25          <table border="0">
     25         <table border="0" id="movement">
    2626           <tr>
    27              <td colspan="2" align="center"><input type="button"
    28   onclick="updateGrid('up')" value="/\"></td>
     27             <td><img src="../images/LeftUp.png" onclick="updateGrid('upleft')" alt="north-west"/></td>
     28             <td><img src="../images/Up.png"  onclick="updateGrid('up')" alt="north"/></td>
     29             <td><img src="../images/RightUp.png" onclick="updateGrid('upright')" alt="north-east"/></td>
    2930           </tr>
    3031           <tr>
    31              <td><input type="button" onclick="updateGrid('left')"
    32   value="<"></td>
    33              <td><input type="button" onclick="updateGrid('right')"
    34   value=">"></td>
     32             <td><img src="../images/Left.png" onclick="updateGrid('left')" alt="west"/></td>
     33             <td>&nbsp;</td>
     34             <td><img src="../images/Right.png" onclick="updateGrid('right')" alt="east"/></td>
    3535           </tr>
    3636           <tr>
    37              <td colspan="2" align="center"><input type="button"
    38   onclick="updateGrid('down')" value="\/"></td>
     37             <td><img src="../images/LeftDown.png" onclick="updateGrid('downleft')" alt="south-west"/></td>
     38             <td><img src="../images/Down.png"  onclick="updateGrid('down')" alt="south"/></td>
     39             <td><img src="../images/RightDown.png" onclick="updateGrid('downright')" alt="south-east"/></td>
     40           </tr>
     41           <tr>
     42             <td> <img src="../images/ZoomOut.png" onclick="zoomOut()" alt="Zoom out" /></td>
     43             <td></td>
     44             <td>
     45               <span id="zoomin_enabled"><img src="../images/ZoomIn.png" onclick="zoomIn()" alt="Zoom in" /></span>
     46               <span id="zoomin_disabled" style="display: none"><img src="../images/ZoomIn_disabled.png" /></span>
     47             </td>
    3948           </tr>
    4049         </table>
     50
     51                <div>
     52                </div>
    4153         <span class='hidden' id="spinner">Loading...</span>
    4254
    43                 <div>
    44                         <br />
    45                         <a href="javascript:zoomOut()">zoom out</a>
    46                         <br />
    47       <span id="zoomin_enabled"><a href="javascript:zoomIn()" >zoom in</a></span>
    48       <span id="zoomin_disabled" style="display: none">zoom in</span>
    49                 </div>
    50 
    51                 <div>
    52                         <br />
    53                         <a href="" id="permalink">permalink</a>
    54                         <br />
    55                         <a href="/" id="home">home</a>
    56                         <br />
    57                         <a href="/reportBug.html">problem?</a>
     55                <div><span style="display: none" id="permalink"></span>
     56      <ul class="links">
     57       <li><a href="/" id="home">Home</a></li>
     58                         <li><a href="/reportBug.html">Problem?</a></li>
    5859                </div>
    5960                <div id="geonames-search">
    … …  
    6162      <p><label for="where">Place name:</label><br/>
    6263      <input id="where" name="where" size="15"/><br/>
    63       <input type="submit" name="Zoom To" value="Go" /></p>
    6464      </form>
    6565      <span class="terms">Functionality by <a href="http://www.geonames.org/">Geonames</a>.</span>
    6666                </div>
     67  <div id="geonames_results_window">
     68    <div class="close"><a href="javascript:hideGeonamesPopup()" title="close">X</a></div>
     69    <div id="geonames_results"></div>
     70  </div>
    6771</div>
    6872  <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="postcode_detail"></span></div>
    71                 <div><span class="terms" id="location_detail"></span></div>
    72     <div><span class="terms" id="source_detail"></span></div>
     73    <div class="close"><a href="javascript:hideMarkerWindow()" title="close">X</a></div>
     74                <div><span class="label">Postcode: </span><span id="postcode_detail"></span></div>
     75                <div><span class="label">Location: </span><span id="location_detail"></span></div>
     76                <div><span class="label">Lat/Long: </span><span id="latlong_detail"></span></div>
     77    <div><span class="label">Source: </span><span id="source_detail"></span></div>
    7378    <a href="#" id="bad">Problem?</a>
    7479    <div class="report_form" id="report_form">
    … …  
    8186      <input type="text" name="email" id="reason_email" size="30"/>
    8287      <input alt="submit" src="../images/btn_submit.png" type="image" />
    83 
    8488      </form>
    8589    </div>
    … …  
    8791  <div id="postcode_form">
    8892  <form method="post" action="../../cgi/submit.fcgi">
    89     <div style="float:right"><a href="javascript:closePostcodeWindow()" title="close">X</a></div>
     93    <div class="close"><a href="javascript:closePostcodeWindow()" title="close">X</a></div>
    9094                <div><span id="location"></span></div>
    9195    <div><label for="postcode1">Enter the postcode...</label></div>

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

    r218 r223  
    4848
    4949
    50 var mapContainerElement;
    5150var markerElement;
    5251var postcodeFormElement;
    … …  
    6766}
    6867
     68
     69// Postcode specific helper functions
    6970function box1Keypress(e) {
    7071  var event = YAHOO.util.Event.getEvent(e);
    … …  
    8384YAHOO.util.Event.addListener('postcode1', 'keypress', box1Keypress );
    8485
     86
     87function showPostcodeWindow(easting, northing, x, y) {
     88    hideMarkerWindow();
     89
     90    var easting = trimSixDigits(Math.round(easting));
     91    var northing = trimSixDigits(Math.round(northing));
     92
     93    YAHOO.util.Dom.setXY(markerElement, [(x-markerXOffset), (y-markerYOffset)]);
     94    markerElement.style.visibility = 'visible';
     95   
     96    postcodeFormElement.style.display = 'block';
     97    YAHOO.util.Dom.setXY(postcodeFormElement, [Math.max(0, (x-50)), (y-180) < 0 ? (y+10):(y-180)]);
     98    $('location').innerHTML = easting + ', ' + northing ;
     99    $('easting').value = easting;
     100    $('northing').value = northing;
     101    $('returnX').value = offsetGridX;
     102    $('returnY').value = offsetGridY;
     103
     104    $('postcode1').value = "";
     105    $('postcode2').value = "";
     106    $('postcode1').focus();
     107
     108}
     109
     110
     111function closePostcodeWindow() {
     112  postcodeFormElement.style.display = 'none';
     113  markerElement.style.visibility = 'hidden';
     114}
     115
     116function showMarkerWindow(x,y, postcode, easting, northing, source, id) {
     117  closePostcodeWindow();
     118   // Compute lat+long
     119   var en = new OSRef(easting,northing);
     120   var latlong = en.toLatLng();
     121   var lat = Math.round(latlong.lat*10000) / 10000;
     122   var lng = Math.round(latlong.lng*10000) / 10000;
     123
     124   // Display
     125   $('location_detail').innerHTML = easting + ", "+northing;
     126   $('latlong_detail').innerHTML = lat + ", " + lng;
     127   $('postcode_detail').innerHTML = postcode;
     128   $('postcode_id_detail').value= id;
     129   $('reason_email').value= '';
     130   $('reason').value= '';
     131   $('source_detail').innerHTML = ((source == 0) ? 'this site' : '<a href="http://www.freethepostcode.org/">freethepostcode.org</a>');
     132   $('postcode_detail_window').style.display = 'block';
     133   $('bad').style.display = '';
     134   $('report_form').style.display = 'none';
     135   YAHOO.util.Dom.setXY('postcode_detail_window', [Math.max(0, (x-50)), (y-100) < 0 ? (y+10):(y-100)]);
     136}
     137
     138function hideMarkerWindow() {
     139   $('postcode_detail_window').style.display = 'none';
     140}
     141
     142
     143// MAP METHODS --------------------------------------------
    85144
    86145function mapClick(e) {
    … …  
    105164    } else {
    106165   
    107       var easting = trimSixDigits(Math.round((baseEasting  + tileXratio)*1000));
    108       var northing = trimSixDigits(Math.round((baseNorthing +tileYratio)*1000));
    109 
    110       YAHOO.util.Dom.setXY(markerElement, [(x-markerXOffset), (y-markerYOffset)]);
    111       markerElement.style.visibility = 'visible';
    112       hideMarkerWindow();
    113                        
    114       postcodeFormElement.style.display = 'block';
    115       YAHOO.util.Dom.setXY(postcodeFormElement, [Math.max(0, (x-50)), (y-180) < 0 ? (y+10):(y-180)]);
    116                         $('location').innerHTML = easting + ', ' + northing ;
    117       $('easting').value = easting;
    118       $('northing').value = northing;
    119       $('returnX').value = offsetGridX;
    120       $('returnY').value = offsetGridY;
    121 
    122       $('postcode1').value = "";
    123       $('postcode2').value = "";
    124       $('postcode1').focus();
     166      showPostcodeWindow(((baseEasting  + tileXratio)*1000), ((baseNorthing +tileYratio)*1000), x, y);
     167
    125168    }
    126169  }
    … …  
    128171YAHOO.util.Event.addListener('map', 'click', mapClick);
    129172
    130 
    131 function closePostcodeWindow() {
    132   postcodeFormElement.style.display = 'none';
    133   markerElement.style.visibility = 'hidden';
    134 }
    135 
    136 function showMarkerWindow(x,y, postcode, easting, northing, source, id) {
    137   closePostcodeWindow();
    138    // Compute lat+long
    139    var en = new OSRef(easting,northing);
    140    var latlong = en.toLatLng();
    141    var lat = Math.round(latlong.lat*10000) / 10000;
    142    var lng = Math.round(latlong.lng*10000) / 10000;
    143 
    144    // Display
    145    $('location_detail').innerHTML = easting + ", "+northing + "<br />" + lat + " " + lng;
    146    $('postcode_detail').innerHTML = postcode;
    147    $('postcode_id_detail').value= id;
    148    $('reason_email').value= '';
    149    $('reason').value= '';
    150    $('source_detail').innerHTML = "Source: " + ((source == 0) ? 'this site' : '<a href="http://www.freethepostcode.org/">freethepostcode.org</a>');
    151    $('postcode_detail_window').style.display = 'block';
    152    $('bad').style.display = '';
    153    $('report_form').style.display = 'none';
    154    YAHOO.util.Dom.setXY('postcode_detail_window', [Math.max(0, (x-50)), (y-100) < 0 ? (y+10):(y-100)]);
    155 }
    156 
    157 function hideMarkerWindow() {
    158    $('postcode_detail_window').style.display = 'none';
    159 }
    160173
    161174
    … …  
    172185function tidyUp() {
    173186  removeMarkers();
    174   closePostcodeWindow();
    175   hideMarkerWindow();
    176187}
    177188
    … …  
    186197function fixZoomButton() {
    187198  if(zoomLevel == 1) {
    188     $('zoomin_enabled').style.visibility = 'hidden';
    189     $('zoomin_disabled').style.visibility = 'visible';
     199    $('zoomin_enabled').style.display= 'none';
     200    $('zoomin_disabled').style.display= '';
    190201        } else {
    191     $('zoomin_enabled').style.visibility = 'visible';
    192     $('zoomin_disabled').style.visibility = 'hidden';
     202    $('zoomin_enabled').style.display = '';
     203    $('zoomin_disabled').style.display = "none";
    193204  }
    194205}
    … …  
    218229
    219230function initializePage() {
    220                 mapContainerElement = $('map_container');
    221231                markerElement = $('marker');
    222232                postcodeFormElement = $('postcode_form');
    223233    mainPageElement = $('main_page');
    224234    spinnerElement = $('spinner');
    225   size = 1000;
    226 
    227   parseQueryString();
    228   fixZoomButton();
    229 
    230   doResize();
     235
     236    parseQueryString();
     237    fixZoomButton();
     238
     239    doResize();
    231240}
    232241
    … …  
    273282
    274283function refreshGrid() {
    275  
     284  closePostcodeWindow();
     285  hideMarkerWindow();
     286
    276287        for(var x=1; x<=sizeGridX; x++) {
    277288                for(var y=1; y<=sizeGridY; y++) {
    … …  
    397408    var x = YAHOO.util.Event.getPageX(e);
    398409    var y = YAHOO.util.Event.getPageY(e);
    399     showMarkerWindow(x,y, postcode, easting, northing, source, id); };
     410    showMarkerWindow(x,y, postcode, easting, northing, source, id);
     411  };
    400412
    401413//  YAHOO.util.Dom.setXY(newMarker, [bottomLeft[0]+x-markerXOffset, bottom- (y+markerYOffset)]);
    … …  
    425437
    426438function updateGrid(theDirection) {
    427     closePostcodeWindow();
    428     hideMarkerWindow();
    429439    if ( theDirection == 'right' ) {
    430         if ( offsetGridX < size-sizeGridX )
    431             offsetGridX ++;
     440        offsetGridX ++;
    432441    }
    433442    else if ( theDirection == 'left' ) {
    … …  
    435444            offsetGridX --;
    436445    }
    437 
    438446    else if ( theDirection == 'up' ) {
    439         if ( offsetGridY < size-sizeGridY )
    440             offsetGridY ++;
     447      offsetGridY ++;
    441448    }
    442449    else if ( theDirection == 'down' ) {
    443450        if ( offsetGridY > 0 )
    444451            offsetGridY --;
     452    }
     453    else if ( theDirection == 'upleft' ) {
     454      offsetGridY ++;
     455      if ( offsetGridX > 0 )
     456          offsetGridX --;
     457    }
     458    else if ( theDirection == 'upright' ) {
     459      offsetGridY ++;
     460      offsetGridX ++;
     461    }
     462    else if ( theDirection == 'downleft' ) {
     463      if ( offsetGridY > 0 )
     464        offsetGridY --;
     465      if ( offsetGridX > 0 )
     466          offsetGridX --;
     467    }
     468    else if ( theDirection == 'downright' ) {
     469      if ( offsetGridY > 0 )
     470        offsetGridY --;
     471      offsetGridX ++;
    445472    }
    446473
    … …  
    474501      gotoLatLong(name.lat, name.lng, 1);
    475502    } else {
    476       var popup = geonamesPopup();
     503      var popup = showGeonamesPopup();
    477504      for(var i=0; i<geonames.length; i=i+1) {
    478         appendLink(popup, geonames[i]);
     505        appendLink($('geonames_results'), geonames[i]);
    479506      }
    480507    }
    … …  
    486513}
    487514
    488 function geonamesPopup() {
    489  var popup = document.createElement("div");
    490  popup.className = "geonames";
    491  $("menu").appendChild(popup);
    492  var link = document.createElement("A");
    493  link.onclick = function () { $("menu").removeChild(popup); return false; };
    494  link.href = '#';
    495  link.innerHTML = "close" ;
    496  popup.appendChild(link);
    497  popup.appendChild(document.createElement("BR"));
    498 // popup.setXY($("geonames-search").getXY());
    499  return popup;
     515function hideGeonamesPopup() {
     516 var popup = $('geonames_results_window');
     517 popup.style.display = 'none';
     518}
     519
     520function showGeonamesPopup() {
     521 var popup = $('geonames_results_window');
     522 popup.style.display = 'block';
     523 $('geonames_results').innerHTML = '';
     524 
    500525}
    501526
    502527function appendLink(popup, loc) {
    503528 var link = document.createElement("A");
    504  link.onclick = function () { gotoLatLong(loc.lat, loc.lng, 1); $("menu").removeChild(popup); return false; };
     529 link.onclick = function () { gotoLatLong(loc.lat, loc.lng, 1); hideGeonamesPopup(); return false; };
    505530 link.href = '#';
    506531 link.innerHTML = loc.name ;
    … …  
    541566
    542567YAHOO.util.Event.addListener('bad', 'click', showReportForm);
     568
     569function handleArrowKeys(e) {
     570  var event = YAHOO.util.Event.getEvent(e);
     571  switch (event.keyCode) {
     572      case 37:
     573          updateGrid('left');
     574          break;   
     575      case 38:
     576          updateGrid('up');
     577          break;   
     578      case 39:
     579          updateGrid('right');
     580          break;   
     581      case 40:
     582          updateGrid('down');
     583          break;   
     584   }
     585}
     586
Note: See TracChangeset for help on using the changeset viewer.