Support Stamen toner-lite and Bing Maps tiles.

10 files changed, 230 insertions, 110 deletions

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 <http://stamen.com> Stamen Design,
+# under <http://creativecommons.org/licenses/by/3.0>CC BY 3.0.
+# Data by <http://openstreetmap.org> OpenStreetMap,
+# under <http://www.openstreetmap.org/copyright> 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 <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.'
+}
+
+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 %]
+<!-- <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=en-GB"></script> -->
+<script type="text/javascript" src="[% version('/js/OpenLayers.fixmystreet.js') %]"></script>
+<script type="text/javascript" src="[% version('/js/map-OpenLayers.js') %]"></script>
+<script type="text/javascript" src="[% version('/js/map-bing-ol.js') %]"></script>
+<script type="text/javascript" src="[% version('/js/jquery.ba-hashchange.min.js') %]"></script>
+<!--[if lte IE 6]>
+  <link rel="stylesheet" href="/js/OpenLayers-2.13.1/theme/default/ie6-style.css" type="text/css">
+<![endif]-->
+[% 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 @@
 <script type="text/javascript" src="[% version('/js/OpenLayers.fixmystreet.js') %]"></script>
 <script type="text/javascript" src="[% version('/js/map-OpenLayers.js') %]"></script>
 <script type="text/javascript" src="[% version('/js/map-bing-ol.js') %]"></script>
+<script type="text/javascript" src="[% version('/js/map-fms.js') %]"></script>
 <script type="text/javascript" src="[% version('/js/jquery.ba-hashchange.min.js') %]"></script>
 <!--[if lte IE 6]>
   <link rel="stylesheet" href="/js/OpenLayers-2.13.1/theme/default/ie6-style.css" type="text/css">
 <![endif]-->
 [% 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 %]
+<script type="text/javascript" src="[% version('/js/OpenLayers.fixmystreet.js') %]"></script>
+<script type="text/javascript" src="https://stamen-maps.a.ssl.fastly.net/js/tile.stamen.js?v1.3.0"></script>
+<script type="text/javascript" src="[% version('/js/map-OpenLayers.js') %]"></script>
+<script type="text/javascript" src="[% version('/js/map-toner-lite.js') %]"></script>
+<script type="text/javascript" src="[% version('/js/jquery.ba-hashchange.min.js') %]"></script>
+<!--[if lte IE 6]>
+  <link rel="stylesheet" href="/js/OpenLayers-2.13.1/theme/default/ie6-style.css" type="text/css">
+<![endif]-->
+[% 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<fixmystreet.layer_options.length; i++) {
         fixmystreet.layer_options[i] = OpenLayers.Util.extend({
             // This option is used by XYZ-based layers
@@ -300,7 +303,7 @@ $(function(){
         if (fixmystreet.layer_options[i].matrixIds) {
             layer = new fixmystreet.map_type(fixmystreet.layer_options[i]);
         } else {
-            layer = new fixmystreet.map_type("", fixmystreet.layer_options[i]);
+            layer = new fixmystreet.map_type(fixmystreet.layer_name, fixmystreet.layer_options[i]);
         }
         fixmystreet.map.addLayer(layer);
     }
diff --git a/web/js/map-bing-ol.js b/web/js/map-bing-ol.js
index 059a5e67e..9406997f9 100644
--- a/web/js/map-bing-ol.js
+++ b/web/js/map-bing-ol.js
@@ -1,6 +1,4 @@
-var tile_base = [ [ '', 'a-', 'b-', 'c-' ], '//{S}tilma.mysociety.org/sv' ];
-
-function set_map_config(perm) {
+function _set_map_config() {
     var permalink_id;
     if ($('#map_permalink').length) {
         permalink_id = 'map_permalink';
@@ -23,52 +21,22 @@ function set_map_config(perm) {
     if ( fixmystreet.page == 'report' ) {
         fixmystreet.controls.push( new OpenLayers.Control.PermalinkFMS('key-tool-problems-nearby', '/around') );
     }
+}
 
-    if (fixmystreet.map_type) {
-        tile_base = fixmystreet.map_type;
-    }
-    fixmystreet.map_type = OpenLayers.Layer.BingUK;
+function set_map_config(perm) {
+    _set_map_config();
+    fixmystreet.map_type = OpenLayers.Layer.Bing;
 }
 
-OpenLayers.Layer.BingUK = OpenLayers.Class(OpenLayers.Layer.XYZ, {
+OpenLayers.Layer.Bing = OpenLayers.Class(OpenLayers.Layer.XYZ, {
     attributionTemplate: '${logo}${copyrights}',
 
-    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.XYZ.prototype.setMap.apply(this, arguments);
         this.updateAttribution();
-        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 &copy; Crown copyright and database right 2010';
-        } else {
-            logo = '<a href="https://www.bing.com/maps/"><img border=0 src="//dev.virtualearth.net/Branding/logo_powered_by.png"></a>';
-            copyrights = '&copy; 2011 <a href="https://www.bing.com/maps/">Microsoft</a>. &copy; 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 = '&copy; 2011 <a href="https://www.bing.com/maps/">Microsoft</a>. &copy; AND, Navteq';
+        var logo = '<a href="https://www.bing.com/maps/"><img border=0 src="//dev.virtualearth.net/Branding/logo_powered_by.png"></a>';
+        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 &copy; Crown copyright and database right 2014';
+        } else {
+            logo = '<a href="https://www.bing.com/maps/"><img border=0 src="//dev.virtualearth.net/Branding/logo_powered_by.png"></a>';
+            copyrights = '&copy; 2011 <a href="https://www.bing.com/maps/">Microsoft</a>. &copy; 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';
+}