Changeset 223
- Timestamp:
- Oct 29, 2006, 5:20:19 PM (14 years ago)
- Location:
- trunk/npemap.org.uk/static/tiles
- Files:
-
- 3 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/npemap.org.uk/static/tiles/grid.css
r217 r223 43 43 44 44 div.geonames { 45 font-size: 60%; 45 46 background-color: white; 46 47 border: 1px solid black; … … 49 50 } 50 51 div.geonames span.loc { 52 font-size: 80%; 53 } 54 55 #geonames_results_window { 51 56 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; 52 64 } 53 65 … … 76 88 } 77 89 78 div.report_form,#bad {79 font-size: 60%;80 }81 82 90 div.report_form { 83 91 display: none; … … 87 95 font: normal 100% arial ; 88 96 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; 90 106 } 91 107 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 128 ul.links { 129 margin-left: 0px; 130 padding: 0px; 131 } 132 133 ul.links li { 134 list-style: none; 135 margin-left: 0px; 136 } -
trunk/npemap.org.uk/static/tiles/map.html
r217 r223 23 23 <div id="main_page"> 24 24 <div id="menu" style="float:right"> 25 <table border="0" >25 <table border="0" id="movement"> 26 26 <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> 29 30 </tr> 30 31 <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> </td> 34 <td><img src="../images/Right.png" onclick="updateGrid('right')" alt="east"/></td> 35 35 </tr> 36 36 <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> 39 48 </tr> 40 49 </table> 50 51 <div> 52 </div> 41 53 <span class='hidden' id="spinner">Loading...</span> 42 54 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> 58 59 </div> 59 60 <div id="geonames-search"> … … 61 62 <p><label for="where">Place name:</label><br/> 62 63 <input id="where" name="where" size="15"/><br/> 63 <input type="submit" name="Zoom To" value="Go" /></p>64 64 </form> 65 65 <span class="terms">Functionality by <a href="http://www.geonames.org/">Geonames</a>.</span> 66 66 </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> 67 71 </div> 68 72 <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> 73 78 <a href="#" id="bad">Problem?</a> 74 79 <div class="report_form" id="report_form"> … … 81 86 <input type="text" name="email" id="reason_email" size="30"/> 82 87 <input alt="submit" src="../images/btn_submit.png" type="image" /> 83 84 88 </form> 85 89 </div> … … 87 91 <div id="postcode_form"> 88 92 <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> 90 94 <div><span id="location"></span></div> 91 95 <div><label for="postcode1">Enter the postcode...</label></div> -
trunk/npemap.org.uk/static/tiles/mapTiles.js
r218 r223 48 48 49 49 50 var mapContainerElement;51 50 var markerElement; 52 51 var postcodeFormElement; … … 67 66 } 68 67 68 69 // Postcode specific helper functions 69 70 function box1Keypress(e) { 70 71 var event = YAHOO.util.Event.getEvent(e); … … 83 84 YAHOO.util.Event.addListener('postcode1', 'keypress', box1Keypress ); 84 85 86 87 function 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 111 function closePostcodeWindow() { 112 postcodeFormElement.style.display = 'none'; 113 markerElement.style.visibility = 'hidden'; 114 } 115 116 function 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 138 function hideMarkerWindow() { 139 $('postcode_detail_window').style.display = 'none'; 140 } 141 142 143 // MAP METHODS -------------------------------------------- 85 144 86 145 function mapClick(e) { … … 105 164 } else { 106 165 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 125 168 } 126 169 } … … 128 171 YAHOO.util.Event.addListener('map', 'click', mapClick); 129 172 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+long139 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 // Display145 $('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 }160 173 161 174 … … 172 185 function tidyUp() { 173 186 removeMarkers(); 174 closePostcodeWindow();175 hideMarkerWindow();176 187 } 177 188 … … 186 197 function fixZoomButton() { 187 198 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= ''; 190 201 } else { 191 $('zoomin_enabled').style. visibility = 'visible';192 $('zoomin_disabled').style. visibility = 'hidden';202 $('zoomin_enabled').style.display = ''; 203 $('zoomin_disabled').style.display = "none"; 193 204 } 194 205 } … … 218 229 219 230 function initializePage() { 220 mapContainerElement = $('map_container');221 231 markerElement = $('marker'); 222 232 postcodeFormElement = $('postcode_form'); 223 233 mainPageElement = $('main_page'); 224 234 spinnerElement = $('spinner'); 225 size = 1000; 226 227 parseQueryString(); 228 fixZoomButton(); 229 230 doResize(); 235 236 parseQueryString(); 237 fixZoomButton(); 238 239 doResize(); 231 240 } 232 241 … … 273 282 274 283 function refreshGrid() { 275 284 closePostcodeWindow(); 285 hideMarkerWindow(); 286 276 287 for(var x=1; x<=sizeGridX; x++) { 277 288 for(var y=1; y<=sizeGridY; y++) { … … 397 408 var x = YAHOO.util.Event.getPageX(e); 398 409 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 }; 400 412 401 413 // YAHOO.util.Dom.setXY(newMarker, [bottomLeft[0]+x-markerXOffset, bottom- (y+markerYOffset)]); … … 425 437 426 438 function updateGrid(theDirection) { 427 closePostcodeWindow();428 hideMarkerWindow();429 439 if ( theDirection == 'right' ) { 430 if ( offsetGridX < size-sizeGridX ) 431 offsetGridX ++; 440 offsetGridX ++; 432 441 } 433 442 else if ( theDirection == 'left' ) { … … 435 444 offsetGridX --; 436 445 } 437 438 446 else if ( theDirection == 'up' ) { 439 if ( offsetGridY < size-sizeGridY ) 440 offsetGridY ++; 447 offsetGridY ++; 441 448 } 442 449 else if ( theDirection == 'down' ) { 443 450 if ( offsetGridY > 0 ) 444 451 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 ++; 445 472 } 446 473 … … 474 501 gotoLatLong(name.lat, name.lng, 1); 475 502 } else { 476 var popup = geonamesPopup();503 var popup = showGeonamesPopup(); 477 504 for(var i=0; i<geonames.length; i=i+1) { 478 appendLink( popup, geonames[i]);505 appendLink($('geonames_results'), geonames[i]); 479 506 } 480 507 } … … 486 513 } 487 514 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; 515 function hideGeonamesPopup() { 516 var popup = $('geonames_results_window'); 517 popup.style.display = 'none'; 518 } 519 520 function showGeonamesPopup() { 521 var popup = $('geonames_results_window'); 522 popup.style.display = 'block'; 523 $('geonames_results').innerHTML = ''; 524 500 525 } 501 526 502 527 function appendLink(popup, loc) { 503 528 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; }; 505 530 link.href = '#'; 506 531 link.innerHTML = loc.name ; … … 541 566 542 567 YAHOO.util.Event.addListener('bad', 'click', showReportForm); 568 569 function 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.