Changeset 188


Ignore:
Timestamp:
Oct 26, 2006, 9:23:11 PM (13 years ago)
Author:
Nick Burch
Message:

Update to latest js from main site

Location:
trunk/gpx.npemap.org.uk
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/gpx.npemap.org.uk/js/mapTiles.js

    r185 r188  
    1919var zoomLevel = 1;
    2020
     21var firstTime = 1;
     22
    2123var prefixes = new Array(1);
    22 var root = "http://tile.npemap.org.uk/";
    23 
    24 prefixes[1] = root + "scaled1/";
    25 prefixes[2] = root + "scaled3/";
    26 prefixes[3] = root + "scaled6/";
     24var root1 = "http://ustile.npemap.org.uk/";
     25var root2 = "http://tile.npemap.org.uk/";
     26var root = "http://ustile.npemap.org.uk/";
     27
     28prefixes[1] =  "scaled1/";
     29prefixes[2] =  "scaled3/";
     30prefixes[3] =  "scaled6/";
    2731
    2832var jumpOut = new Array(1);
     
    3337jumpIn[3] = 2;
    3438
    35 var prefix;
    36 
     39var zooms = new Array(1);
     40zooms[1] = 1;
     41zooms[2] = 3;
     42zooms[3] = 6;
     43
     44
     45var screenWidth = YAHOO.util.Dom.getViewportWidth();
     46var screenHeight = YAHOO.util.Dom.getViewportHeight();
     47var bottomLeft = new Array();
    3748
    3849
    3950var mapContainerElement;
    4051var mapElement;
    41 var markerElement;
    42 var postcodeFormElement;
    4352var locationElement;
    4453var mainPageElement;
    4554
    46 function go() {
    47   fixZoomButton();
    48  
    49 
    50                 mapElement.onclick = function(e) {
    51                         e = YAHOO.util.Event.getEvent(e);
    52                         var img = YAHOO.util.Event.getTarget(e);
    53                         var x = YAHOO.util.Event.getPageX(e);
    54                         var y = YAHOO.util.Event.getPageY(e);
    55                         var imgPos = YAHOO.util.Dom.getXY(img);
    56                         var tileX = x - imgPos[0];
    57                         var tileY = y - imgPos[1];
    58                         // Tiles are eee/nnn.jpg
    59                         var tile = img.src.substring( img.src.lastIndexOf("/") - 3 );
    60                         var baseEasting = tile.substring(0, tile.indexOf("/"))-0;
    61                         var baseNorthing = tile.substring(tile.indexOf("/") + 1, tile.indexOf("."))-0;
    62                         var tileXratio =  tileX/img.offsetWidth;
    63                         var tileYratio = 1 -(tileY/img.offsetHeight);
    64                         if (zoomLevel != 1) {
    65                                 // Zoom in.
    66 
    67                                 offsetGridX = Math.round((baseEasting -0 + tileXratio) * jumpIn[zoomLevel]);
    68                                 offsetGridY = Math.round((baseNorthing -0 + tileYratio) * jumpIn[zoomLevel]);
    69 
    70                                 zoomLevel = zoomLevel - 1;
    71                                 prefix = prefixes[zoomLevel];
    72                                 refreshGrid();
    73                         } else {
    74                                 // Go to tracer
    75                                 document.location.href="tracer.html?" + baseEasting + "," + baseNorthing;
    76                         }
    77                 }
    78         }
    79        
     55
     56// From prototype
     57function $() {
     58  var results = [], element;
     59  for (var i = 0; i < arguments.length; i++) {
     60    element = arguments[i];
     61    if (typeof element == 'string')
     62      element = document.getElementById(element);
     63    results.push(element);
     64  }
     65  return results.length < 2 ? results[0] : results;
     66}
     67
     68
     69function mapClick(e) {
     70    e = YAHOO.util.Event.getEvent(e);
     71    var img = YAHOO.util.Event.getTarget(e);
     72    var x = YAHOO.util.Event.getPageX(e);
     73    var y = YAHOO.util.Event.getPageY(e);
     74    var imgPos = YAHOO.util.Dom.getXY(img);
     75    var tileX = x - imgPos[0];
     76    var tileY = y - imgPos[1];
     77    // Tiles are eee/nnn.jpg
     78    var tile = img.src.substring( img.src.lastIndexOf("/") - 3 );
     79    var baseEasting = tile.substring(0, tile.indexOf("/"))-0;
     80    var baseNorthing = tile.substring(tile.indexOf("/") + 1, tile.indexOf("."))-0;
     81    var tileXratio =  tileX/img.offsetWidth;
     82    var tileYratio = 1 -(tileY/img.offsetHeight);
     83    if (zoomLevel != 1) {
     84      // Zoom in.
     85      gotoLocation(Math.round((baseEasting -0 + tileXratio) * zooms[zoomLevel]),
     86                                     Math.round((baseNorthing -0 + tileYratio) *  zooms[zoomLevel]),
     87                                                                          zoomLevel - 1);
     88    } else {
     89                // Go to tracer
     90                document.location.href="tracer.html?" + getZoomOneLink();
     91    }
     92  }
     93
     94YAHOO.util.Event.addListener('map', 'click', mapClick);
     95
    8096function zoomOut() {
    8197        if(zoomLevel == (prefixes.length-1)) {
     
    84100        }
    85101
    86         offsetGridX = Math.round(offsetGridX / jumpOut[zoomLevel]);
    87         offsetGridY = Math.round(offsetGridY / jumpOut[zoomLevel]);
    88 
    89         zoomLevel = zoomLevel + 1;
    90     prefix = prefixes[zoomLevel];
    91   fixZoomButton();
    92 
    93         refreshGrid();
     102  gotoLocation(offsetGridX * zooms[zoomLevel], offsetGridY * zooms[zoomLevel], zoomLevel + 1);
    94103}
    95104
     
    99108        }
    100109
    101         offsetGridX = (offsetGridX * jumpIn[zoomLevel]);
    102         offsetGridY = (offsetGridY * jumpIn[zoomLevel]);
    103 
    104         zoomLevel = zoomLevel - 1;
    105     prefix = prefixes[zoomLevel];
    106        
    107   fixZoomButton();
    108         refreshGrid();
     110  gotoLocation(offsetGridX * zooms[zoomLevel], offsetGridY * zooms[zoomLevel], zoomLevel - 1);
    109111}
    110112
    111113function fixZoomButton() {
    112114  if(zoomLevel == 1) {
    113     document.getElementById('zoomin_enabled').style.visibility = 'hidden';
    114     document.getElementById('zoomin_disabled').style.visibility = 'visible';
     115    $('zoomin_enabled').style.visibility = 'hidden';
     116    $('zoomin_disabled').style.visibility = 'visible';
    115117        } else {
    116     document.getElementById('zoomin_enabled').style.visibility = 'visible';
    117     document.getElementById('zoomin_disabled').style.visibility = 'hidden';
    118   }
    119 }
    120 var screenWidth = YAHOO.util.Dom.getViewportWidth();
    121 var screenHeight = YAHOO.util.Dom.getViewportHeight();
    122 var bottomLeft = new Array();
     118    $('zoomin_enabled').style.visibility = 'visible';
     119    $('zoomin_disabled').style.visibility = 'hidden';
     120  }
     121}
    123122
    124123function doResize() {
     
    132131  sizeGridX = Math.round((screenWidth / tileWidth)-2)
    133132  sizeGridY = Math.round((screenHeight / tileHeight)-1)
    134   mapElement = document.getElementById('map');
     133  mapElement = $('map');
    135134 
    136135  page = ''
     
    146145
    147146
     147function fixIE(hoverDiv) {
     148  if (document.all)
     149  {
     150    hoverDiv.zIndex = 10;
     151  } 
     152}
    148153
    149154
    150155function initializePage() {
    151                 mapElement = document.getElementById('map');
    152                 mapContainerElement = document.getElementById('map_container');
    153                 markerElement = document.getElementById('marker');
    154                 locationElement = document.getElementById('location');
    155     mainPageElement = document.getElementById('main_page');
     156                mapElement = $('map');
     157                mapContainerElement = $('map_container');
     158                locationElement = $('location');
     159    mainPageElement = $('main_page');
    156160  size = 1000;
    157161
    158162  parseQueryString();
    159 
    160     prefix = prefixes[zoomLevel];
     163  fixZoomButton();
     164
     165  doResize();
    161166}
    162167
     
    180185    }
    181186        }
     187}
     188
     189function gotoLocation(easting, northing, zoom) {
     190  offsetGridX = Math.round(easting / zooms[zoom]);
     191  offsetGridY = Math.round(northing/ zooms[zoom]);
     192  zoomLevel = zoom;
     193  fixZoomButton();
     194  refreshGrid();
    182195}
    183196
     
    201214            tileX = trimNumber(x+offsetGridX-Math.round(sizeGridX/2));
    202215            tileY = trimNumber(y+offsetGridY-Math.round(sizeGridY/2));
    203             document.getElementById('element' + x + '.' + y).src = prefix+tileX+'/'+ tileY + '.jpg';
     216            $('element' + x + '.' + y).src = tileURL(tileX, tileY);
    204217        }
    205218    }
     
    209222  maxNorthing= minNorthing + sizeGridY;
    210223
     224  firstTime = 0;
    211225        updatePermalink();
    212226}
    213227
     228function tileURL(tileX, tileY) {
     229          var root = (tileX % 2) == 0 ? root1 : root2;
     230                return root + prefixes[zoomLevel]+tileX+'/'+ tileY + '.jpg';
     231}
     232
     233var successHandler = function(o){
     234  eval(o.responseText); 
     235}
     236
     237var failHander = function(o) {
     238  // Don't do anything
     239  spinnerElement.className = 'error';
     240  spinnerElement.innerHTML = 'Problem showing existing data.';
     241}
     242
    214243function updatePermalink() {
    215         document.getElementById("tracelink").href = "tracer.html?" + getLinkS1();
    216 
    217         document.getElementById("permalink").href = "#" + getLink();
    218   location.href = '#'+getLink();
    219  
    220 }
    221 
     244        $("permalink").href = "#" + getLink();
     245        $("tracelink").href = "tracer.html?" + getZoomOneLink();
     246        location.href = '#'+getLink();
     247}
     248
     249function getZoomOneLink() {
     250  return (offsetGridX * zooms[zoomLevel]) + "," +
     251         (offsetGridY * zooms[zoomLevel]) + "," + 1;
     252}
    222253function getLink() {
    223254  return offsetGridX + "," + offsetGridY + "," + zoomLevel;
    224255}
    225256
    226 function getLinkS1() {
    227         if(zoomLevel == 1) {
    228                 return offsetGridX + "," + offsetGridY;
    229         } else {
    230                 var scale = 1;
    231                 for(var i=2; i<=zoomLevel; i=i+1) {
    232                         scale = scale * jumpIn[i];
    233                 }
    234                 return (scale*offsetGridX) + "," + (scale*offsetGridY);
    235         }
    236 }
    237257
    238258function updateGrid(theDirection) {
    239     markerElement.style.visibility = 'hidden';
    240259    if ( theDirection == 'right' ) {
    241260        if ( offsetGridX < size-sizeGridX )
     
    260279
    261280
    262 
    263 
     281function find() {
     282   request = 'http://ws.geonames.org/searchJSON?name=' +  encodeURIComponent($('where').value)  + '&maxRows=1&callback=getLocation&country=GB&fclass=P&style=SHORT';
     283  aObj = new JSONscriptRequest(request);
     284  // Build the script tag
     285  aObj.buildScriptTag();
     286  // Execute (add) the script tag
     287  aObj.addScriptTag();
     288  return false;
     289}
     290// this function will be called by our JSON callback
     291function getLocation(jData) {
     292  if (jData == null) {
     293    // There was a problem parsing search results
     294    return;
     295  }
     296
     297  var geonames = jData.geonames;
     298  if (geonames.length > 0) {
     299    var name = geonames[0];
     300    var ll = new LatLng(name.lat,name.lng);
     301    ll.WGS84ToOSGB36();
     302    var en = ll.toOSRef();
     303    var easting = Math.round(en.easting/1000);
     304    var northing = Math.round(en.northing/1000);
     305    gotoLocation(easting, northing, 1);
     306   
     307    $('where').value = '';
     308  }
     309  else {
     310    alert("Sorry, can't find that location");
     311  }
     312}
     313
     314
  • trunk/gpx.npemap.org.uk/map.html

    r185 r188  
    44        <link rel="stylesheet" type="text/css" href="grid.css">
    55    </head>
    6 <body onload="initializePage(); go();doResize(); "  onResize="doResize() ">
     6<body onload="initializePage();" id="body">
    77<!-- Yahoo functions -->
    88<script src="js/yahoo.js"></script>
     
    1212<!-- Our functions -->
    1313<script src="js/mapTiles.js"></script>
    14         <h1 id=theTitle>New Popular Edition Maps - GPX Tracer</h1>
     14<script type="text/javascript">
     15        window.onresize = doResize;
     16</script>
     17
     18<h1 id=theTitle>New Popular Edition Maps - GPX Tracer</h1>
    1519
    1620<div id="main_page">
  • trunk/gpx.npemap.org.uk/tracer.html

    r186 r188  
    399399        map_northing = coords.substring( coords.indexOf(",") + 1 );
    400400
    401         // make numbers
     401        // handle zoom in url
     402        if(map_northing.indexOf(",") > 0) {
     403                map_northing = map_northing.substring( 0, coords.indexOf(",") );
     404        }
     405
     406        // make into numbers
    402407        map_easting = map_easting / 1;
    403408        map_northing = map_northing / 1;
Note: See TracChangeset for help on using the changeset viewer.