diff options
author | Matthew Somerville <matthew@balti.ukcod.org.uk> | 2010-07-28 18:55:52 +0100 |
---|---|---|
committer | Matthew Somerville <matthew@balti.ukcod.org.uk> | 2010-07-28 18:55:52 +0100 |
commit | baa9173de2f977bcf0266a0de01bf954c9712c55 (patch) | |
tree | 2ae0bff00bb392c5291a291f15e1c4524fd1a38d | |
parent | 8c1531397765c96c943a5ee0f8cddd4d091c41d9 (diff) |
Factor out tile constants to be configurable.
m--------- | commonlib | 0 | ||||
-rw-r--r-- | perllib/Cobrand.pm | 2 | ||||
-rw-r--r-- | perllib/Page.pm | 54 | ||||
-rw-r--r-- | web/css/core.css | 10 | ||||
-rw-r--r-- | web/js.js | 60 |
5 files changed, 69 insertions, 57 deletions
diff --git a/commonlib b/commonlib -Subproject 6073ac1112192258d55bea7dfad00a59d993760 +Subproject 15c5561b2162121a24f8223b0eac6dcc37b8b39 diff --git a/perllib/Cobrand.pm b/perllib/Cobrand.pm index 3fc88d9dc..4433858bb 100644 --- a/perllib/Cobrand.pm +++ b/perllib/Cobrand.pm @@ -90,8 +90,6 @@ my %fns = ( 'root_path_js' => { default => "'var root_path = \"\";'" }, # Return the title to be used in page heads. 'site_title' => { default => "''" }, - # Return the license information - 'license_info' => { default => 'undef' }, # Return the maximum number of items to be given in the list of reports on the map 'on_map_list_limit' => { default => 'undef' }, # Return a boolean indicating whether the cobrand allows photo uploads diff --git a/perllib/Page.pm b/perllib/Page.pm index 77cf27b07..70b320548 100644 --- a/perllib/Page.pm +++ b/perllib/Page.pm @@ -47,6 +47,11 @@ BEGIN { mySociety::Config::set_file("$dir/../conf/general"); } +use constant TILE_WIDTH => mySociety::Config::get('TILES_WIDTH'); +use constant TIF_SIZE_M => mySociety::Config::get('TILES_TIFF_SIZE_METRES'); +use constant TIF_SIZE_PX => mySociety::Config::get('TILES_TIFF_SIZE_PIXELS'); +use constant SCALE_FACTOR => TIF_SIZE_M / (TIF_SIZE_PX / TILE_WIDTH); + my $lastmodified; sub do_fastcgi { @@ -409,7 +414,7 @@ sub display_map { $params{pins} ||= ''; $params{pre} ||= ''; $params{post} ||= ''; - my $mid_point = 254; + my $mid_point = TILE_WIDTH; # Map is 2 TILE_WIDTHs in size, square. if ($q->{site} eq 'barnet') { # Map is c. 380px wide $mid_point = 189; } @@ -455,31 +460,42 @@ EOF } else { $img_type = '<img'; } - my $imgw = '254px'; - my $imgh = '254px'; + my $imgw = TILE_WIDTH . 'px'; + my $tile_width = TILE_WIDTH; + my $tile_type = mySociety::Config::get('TILES_TYPE'); $out .= <<EOF; <script type="text/javascript"> -var fms_x = $x - 2; var fms_y = $y - 2; -var start_x = $px; var start_y = $py; $root_path_js +var fixmystreet = { + 'x': $x - 2, + 'y': $y - 2, + 'start_x': $px, + 'start_y': $py, + 'tile_type': '$tile_type', + 'tilewidth': $tile_width, + 'tileheight': $tile_width +}; </script> <div id="map_box"> $params{pre} <div id="map"><div id="drag"> - $img_type alt="NW map tile" id="t2.2" name="tile_$tl" src="$tl_src" style="top:0px; left:0;">$img_type alt="NE map tile" id="t2.3" name="tile_$tr" src="$tr_src" style="top:0px; left:$imgw;"><br>$img_type alt="SW map tile" id="t3.2" name="tile_$bl" src="$bl_src" style="top:$imgh; left:0;">$img_type alt="SE map tile" id="t3.3" name="tile_$br" src="$br_src" style="top:$imgh; left:$imgw;"> + $img_type alt="NW map tile" id="t2.2" name="tile_$tl" src="$tl_src" style="top:0px; left:0;">$img_type alt="NE map tile" id="t2.3" name="tile_$tr" src="$tr_src" style="top:0px; left:$imgw;"><br>$img_type alt="SW map tile" id="t3.2" name="tile_$bl" src="$bl_src" style="top:$imgw; left:0;">$img_type alt="SE map tile" id="t3.3" name="tile_$br" src="$br_src" style="top:$imgw; left:$imgw;"> <div id="pins">$params{pins}</div> </div> EOF - if (Cobrand::show_watermark($cobrand)) { + if (Cobrand::show_watermark($cobrand) && mySociety::Config::get('TILES_TYPE') ne 'streetview') { $out .= '<div id="watermark"></div>'; } $out .= compass($q, $x, $y); - my $copyright = _('Crown copyright. All rights reserved. Ministry of Justice'); - my $license_info = Cobrand::license_info($cobrand); - $license_info = "100037819 2008" unless $license_info; + my $copyright; + if (mySociety::Config::get('TILES_TYPE') eq 'streetview') { + $copyright = _('Map contains Ordnance Survey data © Crown copyright and database right 2010.'); + } else { + $copyright = _('© Crown copyright. All rights reserved. Ministry of Justice 100037819 2008.'); + } $out .= <<EOF; </div> - <p id="copyright">© $copyright $license_info</p> + <p id="copyright">$copyright</p> $params{post} EOF $out .= '</div>'; @@ -613,8 +629,8 @@ sub os_to_px { # BL is bottom left tile reference of displayed map sub tile_to_px { my ($p, $bl, $invert) = @_; - $p = 254 * ($p - $bl); - $p = 508 - $p if $invert; + $p = TILE_WIDTH * ($p - $bl); + $p = 2 * TILE_WIDTH - $p if $invert; $p = int($p + .5 * ($p <=> 0)); return $p; } @@ -622,18 +638,18 @@ sub tile_to_px { # Tile co-ordinates are linear scale of OS E/N # Will need more generalising when more zooms appear sub os_to_tile { - return $_[0] / (5000/31); + return $_[0] / SCALE_FACTOR; } sub tile_to_os { - return $_[0] * (5000/31); + return $_[0] * SCALE_FACTOR; } sub click_to_tile { my ($pin_tile, $pin, $invert) = @_; - $pin -= 254 while $pin > 254; - $pin += 254 while $pin < 0; - $pin = 254 - $pin if $invert; # image submits measured from top down - return $pin_tile + $pin / 254; + $pin -= TILE_WIDTH while $pin > TILE_WIDTH; + $pin += TILE_WIDTH while $pin < 0; + $pin = TILE_WIDTH - $pin if $invert; # image submits measured from top down + return $pin_tile + $pin / TILE_WIDTH; } sub os_to_px_with_adjust { diff --git a/web/css/core.css b/web/css/core.css index 4eb8496e2..08e6eca0d 100644 --- a/web/css/core.css +++ b/web/css/core.css @@ -191,7 +191,7 @@ fieldset div, #fieldset div { #map_box { float: right; - width: 510px; + width: 502px; /* Two pixels more than width of #map */ position: relative; padding-left: 20px; background-color: #ffffff; @@ -205,8 +205,8 @@ p#copyright { #map { border: solid 1px #000000; - width: 508px; - height: 508px; + width: 500px; /* Twice a tile width */ + height: 500px; overflow: hidden; position: relative; background-color: #f1f1f1; @@ -214,8 +214,8 @@ p#copyright { #drag { position: absolute; - width: 508px; - height: 508px; + width: 500px; + height: 500px; right: 0; top: 0; } @@ -31,14 +31,14 @@ YAHOO.util.Event.onContentReady('compass', function() { if (document.getElementById('map').offsetWidth > 510) return; var points = this.getElementsByTagName('a'); - YAHOO.util.Event.addListener(points[1], 'click', compass_pan, { x:0, y:tileheight }); - YAHOO.util.Event.addListener(points[3], 'click', compass_pan, { x:tilewidth, y:0 }); - YAHOO.util.Event.addListener(points[5], 'click', compass_pan, { x:-tilewidth, y:0 }); - YAHOO.util.Event.addListener(points[7], 'click', compass_pan, { x:0, y:-tileheight }); - YAHOO.util.Event.addListener(points[0], 'click', compass_pan, { x:tilewidth, y:tileheight }); - YAHOO.util.Event.addListener(points[2], 'click', compass_pan, { x:-tilewidth, y:tileheight }); - YAHOO.util.Event.addListener(points[6], 'click', compass_pan, { x:tilewidth, y:-tileheight }); - YAHOO.util.Event.addListener(points[8], 'click', compass_pan, { x:-tilewidth, y:-tileheight }); + YAHOO.util.Event.addListener(points[1], 'click', compass_pan, { x:0, y:fixmystreet.tileheight }); + YAHOO.util.Event.addListener(points[3], 'click', compass_pan, { x:fixmystreet.tilewidth, y:0 }); + YAHOO.util.Event.addListener(points[5], 'click', compass_pan, { x:-fixmystreet.tilewidth, y:0 }); + YAHOO.util.Event.addListener(points[7], 'click', compass_pan, { x:0, y:-fixmystreet.tileheight }); + YAHOO.util.Event.addListener(points[0], 'click', compass_pan, { x:fixmystreet.tilewidth, y:fixmystreet.tileheight }); + YAHOO.util.Event.addListener(points[2], 'click', compass_pan, { x:-fixmystreet.tilewidth, y:fixmystreet.tileheight }); + YAHOO.util.Event.addListener(points[6], 'click', compass_pan, { x:fixmystreet.tilewidth, y:-fixmystreet.tileheight }); + YAHOO.util.Event.addListener(points[8], 'click', compass_pan, { x:-fixmystreet.tilewidth, y:-fixmystreet.tileheight }); YAHOO.util.Event.addListener(points[4], 'click', compass_pan, { home:1, orig_x:drag_x, orig_y:drag_y }); }); @@ -47,7 +47,7 @@ YAHOO.util.Event.onContentReady('map', function() { // if (document.getElementById('mapForm') && (/safari/.test(ua) || /Konqueror/.test(ua))) return; if (document.getElementById('map').offsetWidth > 510) return; new YAHOO.util.DDMap('map'); - update_tiles(start_x, start_y, true); + update_tiles(fixmystreet.start_x, fixmystreet.start_y, true); }); @@ -57,8 +57,8 @@ YAHOO.util.Event.onContentReady('mapForm', function() { this.onsubmit = function() { return false; }; } - this.x.value = fms_x + 2; - this.y.value = fms_y + 2; + this.x.value = fixmystreet.x + 2; + this.y.value = fixmystreet.y + 2; /* if (swfu && swfu.getStats().files_queued > 0) { swfu.startUpload(); @@ -142,21 +142,21 @@ YAHOO.util.Event.addListener('all_pins_link', 'click', function(e) { if (this.innerHTML == 'Include stale reports') { this.innerHTML = 'Hide stale reports'; document.getElementById('all_pins').value = '1'; - load_pins(fms_x, fms_y); + load_pins(fixmystreet.x, fixmystreet.y); } else if (this.innerHTML == 'Cynnwys hen adroddiadau') { this.innerHTML = 'Cuddio hen adroddiadau'; document.getElementById('all_pins').value = '1'; welsh = 1; - load_pins(fms_x, fms_y); + load_pins(fixmystreet.x, fixmystreet.y); } else if (this.innerHTML == 'Cuddio hen adroddiadau') { this.innerHTML = 'Cynnwys hen adroddiadau'; welsh = 1; document.getElementById('all_pins').value = ''; - load_pins(fms_x, fms_y); + load_pins(fixmystreet.x, fixmystreet.y); } else if (this.innerHTML == 'Hide stale reports') { this.innerHTML = 'Include stale reports'; document.getElementById('all_pins').value = ''; - load_pins(fms_x, fms_y); + load_pins(fixmystreet.x, fixmystreet.y); } if (welsh) { document.getElementById('hide_pins_link').innerHTML = 'Cuddio pinnau'; @@ -254,8 +254,6 @@ var swfu_settings = { // I love the global var tile_x = 0; var tile_y = 0; -var tilewidth = 254; -var tileheight = 254; var myAnim; function pan(x, y) { @@ -285,22 +283,22 @@ function update_tiles(dx, dy, force) { drag.style.left = drag_x + 'px'; drag.style.top = drag_y + 'px'; - var horizontal = Math.floor(old_drag_x/tilewidth) - Math.floor(drag_x/tilewidth); - var vertical = Math.floor(old_drag_y/tileheight) - Math.floor(drag_y/tileheight); + var horizontal = Math.floor(old_drag_x/fixmystreet.tilewidth) - Math.floor(drag_x/fixmystreet.tilewidth); + var vertical = Math.floor(old_drag_y/fixmystreet.tileheight) - Math.floor(drag_y/fixmystreet.tileheight); if (!horizontal && !vertical && !force) return; - fms_x += horizontal; + fixmystreet.x += horizontal; tile_x += horizontal; - fms_y -= vertical; + fixmystreet.y -= vertical; tile_y += vertical; - var url = [ root_path + '/tilma/tileserver/10k-full/', fms_x, '-', (fms_x+5), ',', fms_y, '-', (fms_y+5), '/JSON' ].join(''); + var url = [ root_path + '/tilma/tileserver/' + fixmystreet.tile_type + '/', fixmystreet.x, '-', (fixmystreet.x+5), ',', fixmystreet.y, '-', (fixmystreet.y+5), '/JSON' ].join(''); YAHOO.util.Connect.asyncRequest('GET', url, { success: urls_loaded, failure: urls_not_loaded, argument: [tile_x, tile_y] }); if (force) return; - load_pins(fms_x, fms_y); + load_pins(fixmystreet.x, fixmystreet.y); } function load_pins(x, y) { @@ -349,8 +347,8 @@ function urls_loaded(o) { if (tiles[i][j] == null) continue; var jj = (j + o.argument[0]); var id = [ 't', ii, '.', jj ].join(''); - var xx = fms_x+j; - var yy = fms_y+5-i; + var xx = fixmystreet.x+j; + var yy = fixmystreet.y+5-i; var img = document.getElementById(id); if (img) { if (!img.galleryimg) { img.galleryimg = false; } @@ -359,15 +357,15 @@ function urls_loaded(o) { continue; } img = cloneNode(); - img.style.top = ((ii-2)*tileheight) + 'px'; - img.style.left = ((jj-2)*tilewidth) + 'px'; + img.style.top = ((ii-2)*fixmystreet.tileheight) + 'px'; + img.style.left = ((jj-2)*fixmystreet.tilewidth) + 'px'; img.name = [ 'tile_', xx, '.', yy ].join('') img.id = id; if (browser) { img.style.visibility = 'hidden'; img.onload=function() { this.style.visibility = 'visible'; } } - img.src = 'http://tilma.mysociety.org/tileserver/10k-full/' + tiles[i][j]; + img.src = 'http://tilma.mysociety.org/tileserver/' + fixmystreet.tile_type + '/' + tiles[i][j]; tileCache[id] = { x: xx, y: yy, t: img }; drag.appendChild(img); } @@ -387,8 +385,8 @@ function cloneNode() { } img.onclick = drag_check; img.style.position = 'absolute'; - img.style.width = tilewidth + 'px'; - img.style.height = tileheight + 'px'; + img.style.width = fixmystreet.tilewidth + 'px'; + img.style.height = fixmystreet.tileheight + 'px'; img.galleryimg = false; img.alt = 'Loading...'; } else { @@ -400,7 +398,7 @@ function cloneNode() { var tileCache=[]; function cleanCache() { for (var i in tileCache) { - if (tileCache[i].x < fms_x || tileCache[i].x > fms_x+5 || tileCache[i].y < fms_y || tileCache[i].y > fms_y+5) { + if (tileCache[i].x < fixmystreet.x || tileCache[i].x > fixmystreet.x+5 || tileCache[i].y < fixmystreet.y || tileCache[i].y > fixmystreet.y+5) { var t = tileCache[i].t; t.parentNode.removeChild(t); // de-leak? delete tileCache[i]; |