From 032db2fbb6bd2bf0cf0cf2daa379610ab319a6a8 Mon Sep 17 00:00:00 2001 From: Matthew Somerville Date: Mon, 6 Oct 2014 15:47:21 +0000 Subject: Support Stamen toner-lite and Bing Maps tiles. --- perllib/FixMyStreet/Map/Bing.pm | 52 ++++++++++++------ perllib/FixMyStreet/Map/FMS.pm | 38 +++---------- perllib/FixMyStreet/Map/OSM/TonerLite.pm | 38 +++++++++++++ templates/web/base/maps/bing.html | 12 +++++ templates/web/base/maps/fms.html | 6 +-- templates/web/base/maps/osm-toner-lite.html | 14 +++++ web/js/map-OpenLayers.js | 5 +- web/js/map-bing-ol.js | 82 +++++++++-------------------- web/js/map-fms.js | 74 ++++++++++++++++++++++++++ web/js/map-toner-lite.js | 19 +++++++ 10 files changed, 230 insertions(+), 110 deletions(-) create mode 100644 perllib/FixMyStreet/Map/OSM/TonerLite.pm create mode 100644 templates/web/base/maps/bing.html create mode 100644 templates/web/base/maps/osm-toner-lite.html create mode 100644 web/js/map-fms.js create mode 100644 web/js/map-toner-lite.js diff --git a/perllib/FixMyStreet/Map/Bing.pm b/perllib/FixMyStreet/Map/Bing.pm index 09c951a5f..46b8f68cd 100644 --- a/perllib/FixMyStreet/Map/Bing.pm +++ b/perllib/FixMyStreet/Map/Bing.pm @@ -1,25 +1,45 @@ # FixMyStreet:Map::Bing -# Bing maps on FixMyStreet. -# -# Copyright (c) 2010 UK Citizens Online Democracy. All rights reserved. -# Email: matthew@mysociety.org; WWW: http://www.mysociety.org/ +# Bing maps on FixMyStreet, using OpenLayers. package FixMyStreet::Map::Bing; +use base 'FixMyStreet::Map::OSM'; use strict; -# display_map C PARAMS -# PARAMS include: -# latitude, longitude for the centre point of the map -# CLICKABLE is set if the map is clickable -# PINS is array of pins to show, location and colour -sub display_map { - my ($self, $c, %params) = @_; - $c->stash->{map} = { - %params, - type => 'bing', - key => mySociety::Config::get('BING_MAPS_API_KEY'), - }; +# Is set by the JavaScript +sub map_type { '""' } + +sub map_template { 'bing' } + +sub copyright { '' } + +sub get_quadkey { + my ($self, $x, $y, $z) = @_; + my $key = ''; + for (my $i = $z; $i > 0; $i--) { + my $digit = 0; + my $mask = 1 << ($i - 1); + $digit++ if ($x & $mask) != 0; + $digit += 2 if ($y & $mask) != 0; + $key .= $digit; + } + return $key; +} + +sub map_tile_base { + '', "//ecn.%s.tiles.virtualearth.net/tiles/r%s.png?g=3293"; +} + +sub map_tiles { + my ( $self, %params ) = @_; + my ( $x, $y, $z ) = ( $params{x_tile}, $params{y_tile}, $params{zoom_act} ); + my ($tile_sep, $tile_base) = $self->map_tile_base; + return [ + sprintf($tile_base, 't0', $self->get_quadkey($x-1, $y-1, $z)), + sprintf($tile_base, 't1', $self->get_quadkey($x, $y-1, $z)), + sprintf($tile_base, 't2', $self->get_quadkey($x-1, $y, $z)), + sprintf($tile_base, 't3', $self->get_quadkey($x, $y, $z)), + ]; } 1; diff --git a/perllib/FixMyStreet/Map/FMS.pm b/perllib/FixMyStreet/Map/FMS.pm index 96e265a4d..7e61f334c 100644 --- a/perllib/FixMyStreet/Map/FMS.pm +++ b/perllib/FixMyStreet/Map/FMS.pm @@ -5,35 +5,11 @@ # Email: matthew@mysociety.org; WWW: http://www.mysociety.org/ package FixMyStreet::Map::FMS; -use base 'FixMyStreet::Map::OSM'; +use base 'FixMyStreet::Map::Bing'; use strict; -# Is set by the JavaScript -sub map_type { - return '""'; -} - -sub map_template { - return 'fms'; -} - -sub copyright { - return ''; -} - -sub get_quadkey { - my ($x, $y, $z) = @_; - my $key = ''; - for (my $i = $z; $i > 0; $i--) { - my $digit = 0; - my $mask = 1 << ($i - 1); - $digit++ if ($x & $mask) != 0; - $digit += 2 if ($y & $mask) != 0; - $key .= $digit; - } - return $key; -} +sub map_template { 'fms' } sub map_tile_base { '-', "//%stilma.mysociety.org/sv/%d/%d/%d.png"; @@ -52,13 +28,13 @@ sub map_tiles { sprintf($tile_base, '', $z, $x, $y), ]; } else { - my $url = "g=701"; + my $url = "g=3293"; $url .= "&productSet=mmOS" if $z > 10 && !$ni; return [ - "//ecn.t0.tiles.virtualearth.net/tiles/r" . get_quadkey($x-1, $y-1, $z) . ".png?$url", - "//ecn.t1.tiles.virtualearth.net/tiles/r" . get_quadkey($x, $y-1, $z) . ".png?$url", - "//ecn.t2.tiles.virtualearth.net/tiles/r" . get_quadkey($x-1, $y, $z) . ".png?$url", - "//ecn.t3.tiles.virtualearth.net/tiles/r" . get_quadkey($x, $y, $z) . ".png?$url", + "//ecn.t0.tiles.virtualearth.net/tiles/r" . $self->get_quadkey($x-1, $y-1, $z) . ".png?$url", + "//ecn.t1.tiles.virtualearth.net/tiles/r" . $self->get_quadkey($x, $y-1, $z) . ".png?$url", + "//ecn.t2.tiles.virtualearth.net/tiles/r" . $self->get_quadkey($x-1, $y, $z) . ".png?$url", + "//ecn.t3.tiles.virtualearth.net/tiles/r" . $self->get_quadkey($x, $y, $z) . ".png?$url", ]; } } diff --git a/perllib/FixMyStreet/Map/OSM/TonerLite.pm b/perllib/FixMyStreet/Map/OSM/TonerLite.pm new file mode 100644 index 000000000..543cd6002 --- /dev/null +++ b/perllib/FixMyStreet/Map/OSM/TonerLite.pm @@ -0,0 +1,38 @@ +#!/usr/bin/perl +# +# FixMyStreet:Map::OSM::TonerLite +# OSM TonerLite maps on FixMyStreet. +# +# Map tiles by Stamen Design, +# under CC BY 3.0. +# Data by OpenStreetMap, +# under ODbL. +# +# Copyright (c) 2014 UK Citizens Online Democracy. All rights reserved. +# Email: hakim@mysociety.org; WWW: http://www.mysociety.org/ + +package FixMyStreet::Map::OSM::TonerLite; +use base 'FixMyStreet::Map::OSM'; + +use strict; + +sub map_type { 'OpenLayers.Layer.Stamen' } + +sub map_template { 'osm-toner-lite' } + +sub copyright { + 'Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under ODbL.' +} + +sub map_tiles { + my ( $self, %params ) = @_; + my ( $x, $y, $z ) = ( $params{x_tile}, $params{y_tile}, $params{zoom_act} ); + return [ + "https://stamen-tiles-a.a.ssl.fastly.net/toner-lite/$z/" . ($x - 1) . "/" . ($y - 1) . ".png", + "https://stamen-tiles-b.a.ssl.fastly.net/toner-lite/$z/$x/" . ($y - 1) . ".png", + "https://stamen-tiles-c.a.ssl.fastly.net/toner-lite/$z/" . ($x - 1) . "/$y.png", + "https://stamen-tiles-d.a.ssl.fastly.net/toner-lite/$z/$x/$y.png", + ]; +} + +1; diff --git a/templates/web/base/maps/bing.html b/templates/web/base/maps/bing.html new file mode 100644 index 000000000..1747f1bbe --- /dev/null +++ b/templates/web/base/maps/bing.html @@ -0,0 +1,12 @@ +[% map_js = BLOCK %] + + + + + + +[% END %] + +[% map_html = INCLUDE maps/openlayers.html %] diff --git a/templates/web/base/maps/fms.html b/templates/web/base/maps/fms.html index 1cdfc0b35..d4302e72e 100644 --- a/templates/web/base/maps/fms.html +++ b/templates/web/base/maps/fms.html @@ -3,13 +3,11 @@ + [% END %] -[% map_html = BLOCK %] -[% INCLUDE maps/openlayers.html %] -[% END %] - +[% map_html = INCLUDE maps/openlayers.html %] diff --git a/templates/web/base/maps/osm-toner-lite.html b/templates/web/base/maps/osm-toner-lite.html new file mode 100644 index 000000000..64fa91937 --- /dev/null +++ b/templates/web/base/maps/osm-toner-lite.html @@ -0,0 +1,14 @@ +[% map_js = BLOCK %] + + + + + + +[% END %] + +[% map_html = BLOCK %] +[% INCLUDE maps/openlayers.html %] +[% END %] diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js index baa8d7810..3088cc764 100644 --- a/web/js/map-OpenLayers.js +++ b/web/js/map-OpenLayers.js @@ -288,6 +288,9 @@ $(function(){ if (!fixmystreet.layer_options) { fixmystreet.layer_options = [ {} ]; } + if (!fixmystreet.layer_name) { + fixmystreet.layer_name = ""; + } for (var i=0; i= 16 && in_uk) { - copyrights = 'Contains Ordnance Survey data © Crown copyright and database right 2010'; - } else { - logo = ''; - copyrights = '© 2011 Microsoft. © AND, Navteq, Ordnance Survey'; - } + _updateAttribution: function(copyrights, logo) { this.attribution = OpenLayers.String.format(this.attributionTemplate, { logo: logo, copyrights: copyrights @@ -81,6 +49,12 @@ OpenLayers.Layer.BingUK = OpenLayers.Class(OpenLayers.Layer.XYZ, { } }, + updateAttribution: function() { + var copyrights = '© 2011 Microsoft. © AND, Navteq'; + var logo = ''; + this._updateAttribution(copyrights, logo); + }, + initialize: function(name, options) { var url = []; options = OpenLayers.Util.extend({ @@ -89,7 +63,6 @@ OpenLayers.Layer.BingUK = OpenLayers.Class(OpenLayers.Layer.XYZ, { numZoomLevels: 19, sphericalMercator: true, buffer: 0 - //attribution: "© Microsoft / OS 2010" }, options); var newArguments = [name, url, options]; OpenLayers.Layer.XYZ.prototype.initialize.apply(this, newArguments); @@ -121,23 +94,7 @@ OpenLayers.Layer.BingUK = OpenLayers.Class(OpenLayers.Layer.XYZ, { OpenLayers.Util.indexOf(this.serverResolutions, res) : this.map.getZoom() + this.zoomOffset; - var url; - var in_uk = this.in_uk(bounds.getCenterLonLat()); - if (z >= 16 && in_uk) { - url = []; - for (var i=0; i< tile_base[0].length; i++) { - url.push( tile_base[1].replace('{S}', tile_base[0][i]) + "/${z}/${x}/${y}.png" ); - } - } else { - var type = ''; - if (z > 10 && in_uk) { type = '&productSet=mmOS'; } - url = [ - "//ecn.t0.tiles.virtualearth.net/tiles/r${id}.png?g=701" + type, - "//ecn.t1.tiles.virtualearth.net/tiles/r${id}.png?g=701" + type, - "//ecn.t2.tiles.virtualearth.net/tiles/r${id}.png?g=701" + type, - "//ecn.t3.tiles.virtualearth.net/tiles/r${id}.png?g=701" + type - ]; - } + var url = this.get_urls(bounds, z); var s = '' + x + y + z; url = this.selectUrl(s, url); @@ -146,5 +103,14 @@ OpenLayers.Layer.BingUK = OpenLayers.Class(OpenLayers.Layer.XYZ, { return path; }, - CLASS_NAME: "OpenLayers.Layer.BingUK" + get_urls: function(bounds, z) { + return [ + "//ecn.t0.tiles.virtualearth.net/tiles/r${id}.png?g=3293", + "//ecn.t1.tiles.virtualearth.net/tiles/r${id}.png?g=3293", + "//ecn.t2.tiles.virtualearth.net/tiles/r${id}.png?g=3293", + "//ecn.t3.tiles.virtualearth.net/tiles/r${id}.png?g=3293" + ]; + }, + + CLASS_NAME: "OpenLayers.Layer.Bing" }); diff --git a/web/js/map-fms.js b/web/js/map-fms.js new file mode 100644 index 000000000..1c08bd251 --- /dev/null +++ b/web/js/map-fms.js @@ -0,0 +1,74 @@ +var fms_tile_base = [ [ '', 'a-', 'b-', 'c-' ], '//{S}tilma.mysociety.org/sv' ]; + +function set_map_config(perm) { + _set_map_config(); + + if (fixmystreet.map_type) { + fms_tile_base = fixmystreet.map_type; + } + fixmystreet.map_type = OpenLayers.Layer.BingUK; +} + +OpenLayers.Layer.BingUK = OpenLayers.Class(OpenLayers.Layer.Bing, { + uk_bounds: [ + new OpenLayers.Bounds(-6.6, 49.8, 1.102680, 51), + new OpenLayers.Bounds(-5.4, 51, 2.28, 54.94), + new OpenLayers.Bounds(-5.85, 54.94, -1.15, 55.33), + new OpenLayers.Bounds(-9.35, 55.33, -0.7, 60.98) + ], + + in_uk: function(c) { + c = c.clone(); + c.transform( + fixmystreet.map.getProjectionObject(), + new OpenLayers.Projection("EPSG:4326") + ); + if ( this.uk_bounds[0].contains(c.lon, c.lat) || this.uk_bounds[1].contains(c.lon, c.lat) || this.uk_bounds[2].contains(c.lon, c.lat) || this.uk_bounds[3].contains(c.lon, c.lat) ) { + return true; + } + return false; + }, + + setMap: function() { + OpenLayers.Layer.Bing.prototype.setMap.apply(this, arguments); + this.map.events.register("moveend", this, this.updateAttribution); + }, + + updateAttribution: function() { + var z = this.map.getZoom() + this.zoomOffset; + var copyrights; + var logo = ''; + var c = this.map.getCenter(); + var in_uk = c ? this.in_uk(c) : true; + if (z >= 16 && in_uk) { + copyrights = 'Contains Ordnance Survey data © Crown copyright and database right 2014'; + } else { + logo = ''; + copyrights = '© 2011 Microsoft. © AND, Navteq, Ordnance Survey'; + } + this._updateAttribution(copyrights, logo); + }, + + get_urls: function(bounds, z) { + var urls; + var in_uk = this.in_uk(bounds.getCenterLonLat()); + if (z >= 16 && in_uk) { + urls = []; + for (var i=0; i< fms_tile_base[0].length; i++) { + urls.push( fms_tile_base[1].replace('{S}', fms_tile_base[0][i]) + "/${z}/${x}/${y}.png" ); + } + } else { + var type = ''; + if (z > 10 && in_uk) { type = '&productSet=mmOS'; } + urls = [ + "//ecn.t0.tiles.virtualearth.net/tiles/r${id}.png?g=3293" + type, + "//ecn.t1.tiles.virtualearth.net/tiles/r${id}.png?g=3293" + type, + "//ecn.t2.tiles.virtualearth.net/tiles/r${id}.png?g=3293" + type, + "//ecn.t3.tiles.virtualearth.net/tiles/r${id}.png?g=3293" + type + ]; + } + return urls; + }, + + CLASS_NAME: "OpenLayers.Layer.BingUK" +}); diff --git a/web/js/map-toner-lite.js b/web/js/map-toner-lite.js new file mode 100644 index 000000000..5291d0254 --- /dev/null +++ b/web/js/map-toner-lite.js @@ -0,0 +1,19 @@ +function set_map_config(perm) { + var permalink_id; + if ($('#map_permalink').length) { + permalink_id = 'map_permalink'; + } + fixmystreet.controls = [ + new OpenLayers.Control.ArgParser(), + new OpenLayers.Control.Navigation(), + new OpenLayers.Control.PermalinkFMS(permalink_id), + new OpenLayers.Control.PanZoomFMS({id: 'fms_pan_zoom' }) + ]; + fixmystreet.layer_options = [ { + maxResolution: 156543.03390625/Math.pow(2, fixmystreet.zoomOffset) + } ]; + fixmystreet.layer_name = 'toner-lite'; + + // The Stamen JS returns HTTP urls, fix that + stamen.tile.getProvider('toner-lite').url = 'https://stamen-tiles-{S}a.ssl.fastly.net/toner-lite/{Z}/{X}/{Y}.png'; +} -- cgit v1.2.3