/* File: mapTiles.js */ var size; // Size of array grid in each dimension var data; // 2 dimensional array to hold the grid data var sizeGridX = 6; // Size of visible grid (table) in each dimension var sizeGridY = 4; // Size of visible grid (table) in each dimension var tileWidth = 125; var tileHeight = 125; var markerXOffset = 4; var markerYOffset = 11; var offsetGridX = 7; var offsetGridY = 0; var zoomLevel = 5; var grid = 'test-ni'; // One of osgb or osie, for now anyway var needCalibration = true; var prefixes = new Array(1); var root1 = "http://ustile.npemap.org.uk/"; var root2 = "http://tile.npemap.org.uk/"; var root = "http://tile.npemap.org.uk/"; prefixes[1] = "scaled1/"; prefixes[2] = "scaled3/"; prefixes[3] = "scaled6/"; prefixes[4] = "scaled12/"; prefixes[5] = "scaled24/"; var jumpOut = new Array(1); jumpOut[1] = 3; jumpOut[2] = 2; jumpOut[3] = 2; jumpOut[4] = 2; var jumpIn = new Array(1); jumpIn[2] = 3; jumpIn[3] = 2; jumpIn[4] = 2; jumpIn[5] = 2; var zooms = new Array(1); zooms[1] = 1; zooms[2] = 3; zooms[3] = 6; zooms[4] = 12; zooms[5] = 24; var screenWidth = 0; var screenHeight = 0; var bottomLeft = new Array(); var markerElement; var locationFormElement; var mainPageElement; // Postcode specific helper functions function box1Keypress(e) { var event = YAHOO.util.Event.getEvent(e); var key = String.fromCharCode(YAHOO.util.Event.getCharCode(event)); if (key == ' ') { $('postcode2').focus(); return false; } else if (key >= '0' && key <= '9' && this.value.length == 3) { this.value = this.value + key; $('postcode2').focus(); YAHOO.util.Event.preventDefault(event); } } YAHOO.util.Event.addListener('postcode1', 'keypress', box1Keypress ); function showLocationWindow(easting, northing, x, y) { var easting = trimSixDigits(Math.round(easting)); var northing = trimSixDigits(Math.round(northing)); markerElement.style.visibility = 'visible'; YAHOO.util.Dom.setXY(markerElement, [(x-markerXOffset), (y-markerYOffset)]); locationFormElement.style.display = 'block'; YAHOO.util.Dom.setXY(locationFormElement, [Math.max(0, (x-50)), (y-180) < 0 ? (y+10):(y-180)]); $('location').innerHTML = easting + ', ' + northing; $('easting').innerHTML = "The raw easting is " + easting; $('northing').innerHTML = "The raw northing is " + northing; $('postcode1').value = ""; $('postcode2').value = ""; $('postcode1').focus(); } YAHOO.util.Event.addListener('postcode_submit', 'submit', submitPostcodeAjax); function submitPostcodeAjax(e) { var el = $('postcode_submit'); var data = Form.serialize(el); Element.show('status'); $('status').innerHTML = "
Submitting postcode "+ $F('postcode1') + " " + $F('postcode2') + "...
"; if (typeof urchinTracker == 'function') urchinTracker('/tiles/submitPostcode'); new Ajax.Request(el.getAttribute("action"), { method:"post", postBody:data, onComplete: function(o) {drawExisting(); updateStatus(o); } }); closeLocationWindow(); YAHOO.util.Event.preventDefault(e); } function closeLocationWindow() { locationFormElement.style.display = 'none'; markerElement.style.visibility = 'hidden'; } // MAP METHODS -------------------------------------------- function mapClick(e) { e = YAHOO.util.Event.getEvent(e); var img = YAHOO.util.Event.getTarget(e); var x = YAHOO.util.Event.getPageX(e); var y = YAHOO.util.Event.getPageY(e); var imgPos = YAHOO.util.Dom.getXY(img); var tileX = x - imgPos[0]; var tileY = y - imgPos[1]; // Tiles are eee/nnn.jpg var tile = img.src.substring( img.src.lastIndexOf("/") - 3 ); var baseEasting = tile.substring(0, tile.indexOf("/"))-0; var baseNorthing = tile.substring(tile.indexOf("/") + 1, tile.indexOf("."))-0; var tileXratio = tileX/img.offsetWidth; var tileYratio = 1 -(tileY/img.offsetHeight); if (zoomLevel != 1) { // Zoom in. gotoLocation(Math.round((baseEasting -0 + tileXratio) * zooms[zoomLevel]), Math.round((baseNorthing -0 + tileYratio) * zooms[zoomLevel]), zoomLevel - 1); } else { showLocationWindow(((baseEasting + tileXratio)*1000), ((baseNorthing +tileYratio)*1000), x, y); } } YAHOO.util.Event.addListener('map', 'click', mapClick); function zoomOut() { if(zoomLevel == (prefixes.length-1)) { //location.href="allmaps.html"; return; } tidyUp(); gotoLocation(offsetGridX * zooms[zoomLevel], offsetGridY * zooms[zoomLevel], zoomLevel + 1); } function tidyUp() { removeMarkers(); } function zoomIn() { if(zoomLevel == 1) { return; } gotoLocation(offsetGridX * zooms[zoomLevel], offsetGridY * zooms[zoomLevel], zoomLevel - 1); } function fixZoomButton() { if(zoomLevel == 1) { Element.hide('zoomin_enabled'); Element.show('zoomin_disabled'); } else { Element.show('zoomin_enabled'); Element.hide('zoomin_disabled'); } } function doResize() { var newWidth = YAHOO.util.Dom.getViewportWidth(); var newHeight = YAHOO.util.Dom.getViewportHeight(); if (screenHeight != newHeight || screenWidth != newWidth) { screenWidth = YAHOO.util.Dom.getViewportWidth(); screenHeight = YAHOO.util.Dom.getViewportHeight(); drawTable(); refreshGrid(); } } function drawTable() { sizeGridX = Math.floor(((screenWidth -210) / tileWidth)); sizeGridY = Math.floor(((screenHeight -130) / tileHeight)); var map = $('map'); map.innerHTML = ''; for(var y=sizeGridY; y>=1; y--) { for(var x=1; x<=sizeGridX; x++) { map.appendChild(createIMG(tileWidth, tileHeight, 'element'+x+'.'+y)); } map.appendChild(document.createElement('br')); } $('map').style.width = (sizeGridX * tileWidth) + "px" ; } function createIMG(width, height, id) { var img = document.createElement('img'); img.width = width; img.height = height; img.id = id; return img; } function initializePage() { markerElement = $('marker'); locationFormElement = $('location_form'); mainPageElement = $('main_page'); parseQueryString(); fixZoomButton(); doResize(); } function reload_page() { parseQueryString(); fixZoomButton(); refreshGrid(); } function parseQueryString() { var hash = location.href.lastIndexOf('#'); var query = location.href.lastIndexOf("?") var params = ''; if (hash != -1) { params = location.href.substring(hash+1); } else if (query != -1) { params = location.href.substring(query+1); } if (params.length > 0) { urlterms=params.split(",") offsetGridX = urlterms[0]-0 ; offsetGridY = urlterms[1]-0 ; if(urlterms.length > 2) { zoomLevel = urlterms[2]-0 ; } } } function gotoLocation(easting, northing, zoom) { offsetGridX = Math.round(easting / zooms[zoom]); offsetGridY = Math.round(northing/ zooms[zoom]); zoomLevel = zoom; fixZoomButton(); refreshGrid(); } // Need to use substring for IE, and it doesn't take negative numbers. function trimNumber(string) { // If we have a 4 digit number, no need to do any padding if(parseInt(string) >= 1000) { return string; } // Pad it so that it'll always have leading 0s, and be at least 3 long str = '000' + string // Grab the right most 3 digits, which will have any required padding return str.substring(str.length -3) } function trimSixDigits(string) { // If we have a 7 digit number, no need to do any padding if(parseInt(string) >= 1000000) { return string; } // Pad it so that it'll always have leading 0s, and be at least 6 long str = '000000' + string // Grab the right most 6 digits, which will have any required padding return str.substring(str.length -6) } function refreshGrid() { closeLocationWindow(); for(var x=1; x<=sizeGridX; x++) { for(var y=1; y<=sizeGridY; y++) { tileX = x+offsetGridX-Math.round(sizeGridX/2); tileY = y+offsetGridY-Math.round(sizeGridY/2); $('element' + x + '.' + y).src = tileURL(tileX, tileY); } } minEasting = (offsetGridX-Math.round(sizeGridX/2))+1; minNorthing= (offsetGridY-Math.round(sizeGridY/2))+1; maxEasting = minEasting + sizeGridX; maxNorthing= minNorthing + sizeGridY; if (zoomLevel == 1) { drawExisting(); } updatePermalink(); updateSheets(minEasting,minNorthing,maxEasting,maxNorthing); } function tileURL(tileX, tileY) { //var root = (tileX % 2) == 0 ? root1 : root2; return root + grid + '/' + prefixes[zoomLevel] + trimNumber(tileX)+'/'+ trimNumber(tileY) + '.jpg'; } function drawExisting() { if (shouldWeShowMarkers()) { var url = "../../cgi/get-postcodes.fcgi"; var params = "mineasting=" + minEasting + "000&maxeasting=" + maxEasting + "000&minnorthing=" + minNorthing + "000&maxnorthing=" + maxNorthing+"000" + "&grid=" + grid; removeMarkers(); $('spinner').innerHTML = "Loading....
"; needCalibration = true; var myAjax = new Ajax.Request(url, { method: 'get', parameters: params, onComplete: successHandler, onFailure: failHander }); } } var successHandler = function(o){ eval(o.responseText); } var failHander = function(o) { // Don't do anything $('spinner').innerHTML = 'Problem showing existing data.
'; } function findMarkerOffsets() { newMarker = document.createElement('div'); newMarker.style.position = 'absolute'; mainPageElement.appendChild(newMarker); topLeft = YAHOO.util.Dom.getXY('element1.' + sizeGridY); var bottom = topLeft[1] + (tileHeight*sizeGridY); YAHOO.util.Dom.setXY(newMarker, [topLeft[0] - markerXOffset, bottom - markerYOffset]); markerLeft = parseInt(newMarker.style.left); markerTop= parseInt(newMarker.style.top); mainPageElement.removeChild(newMarker); needCalibration = false; } function completeMarkers() { $('spinner').innerHTML = " "; } var markers = new Array(); var nextMarker = 0; function removeMarkers() { var pageElement = $('main_page'); for(var i=0; i