Add aerial view toggle to Bing Maps & subclasses.

Co-authored-by: Dave Arter <davea@mysociety.org> Co-authored-by: Matthew Somerville <matthew@mysociety.org>
mysociety · Jul 10, 2020 · 009c424 · 009c424
1 parent 196e3ca
commit 009c424
Show file tree

Hide file tree

Showing 9 changed files with 91 additions and 20 deletions.
diff --git a/perllib/FixMyStreet/Map/Bing.pm b/perllib/FixMyStreet/Map/Bing.pm
@@ -8,6 +8,8 @@ use strict;
 
 sub map_type { '' }
 
+sub map_template { 'bing' }
+
 sub map_javascript { [
     '/vendor/OpenLayers/OpenLayers.fixmystreet.js',
     '/js/map-OpenLayers.js',
@@ -29,12 +31,21 @@ sub get_quadkey {
     return $key;
 }
 
+sub display_map {
+    my ($self, $c, %params) = @_;
+
+    $params{aerial} = $c->get_param("aerial") ? 1 : 0;
+
+    $self->SUPER::display_map($c, %params);
+}
+
 my $road_base = '//t%s.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/%s?mkt=en-US&it=G,L&src=t&shading=hill&og=969&n=z';
+my $aerial_base = '//t%s.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/%s?mkt=en-US&it=A,G,L&src=t&og=969&n=z';
 
 sub map_tiles {
     my ( $self, %params ) = @_;
     my ( $x, $y, $z ) = ( $params{x_tile}, $params{y_tile}, $params{zoom_act} );
-    my $tile_base = $road_base;
+    my $tile_base = $params{aerial} ? $aerial_base : $road_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)),

diff --git a/templates/web/base/maps/_sub_links.html b/templates/web/base/maps/_sub_links.html
@@ -0,0 +1,6 @@
+[% INCLUDE maps/openlayers.html %]
+[% UNLESS around_page %]
+<p class="sub-map-links" id="sub_map_links">
+     [% map_sub_links | safe %]
+</p>
+[% END %]
diff --git a/templates/web/base/maps/bing.html b/templates/web/base/maps/bing.html
@@ -0,0 +1,9 @@
+[% map_sub_links = BLOCK %]
+    [% IF c.req.params.aerial %]
+        <a id="map_layer_toggle" href="[% c.uri_with( { aerial => 0 } ) %]">[% loc('Roads') %]</a>
+    [% ELSE %]
+        <a id="map_layer_toggle" href="[% c.uri_with( { aerial => 1 } ) %]">[% loc('Aerial') %]</a>
+    [% END %]
+[% END %]
+
+[% map_html = INCLUDE maps/_sub_links.html %]
diff --git a/templates/web/base/maps/fms.html b/templates/web/base/maps/fms.html
@@ -1,3 +1,9 @@
-[%
-map_html = INCLUDE maps/openlayers.html include_key = 1
-%]
+[% map_sub_links = BLOCK %]
+    [% IF c.req.params.aerial %]
+        <a id="map_layer_toggle" href="[% c.uri_with( { aerial => 0 } ) %]">[% loc('Roads') %]</a>
+    [% ELSE %]
+        <a id="map_layer_toggle" href="[% c.uri_with( { aerial => 1 } ) %]">[% loc('Aerial') %]</a>
+    [% END %]
+[% END %]
+
+[% map_html = INCLUDE maps/_sub_links.html include_key = 1 %]
diff --git a/templates/web/base/maps/google-ol.html b/templates/web/base/maps/google-ol.html
@@ -2,11 +2,4 @@
 <a class="hidden-nojs" id="map_layer_toggle" href="">[% loc('Satellite') %]</a>
 [% END %]
 
-[% map_html = BLOCK %]
-[% INCLUDE maps/openlayers.html %]
-[% UNLESS around_page %]
-<p class="sub-map-links" id="sub_map_links">
-     [% map_sub_links | safe %]
-</p>
-[% END %]
-[% END %]
+[% map_html = INCLUDE maps/_sub_links.html %]
diff --git a/web/js/map-OpenLayers.js b/web/js/map-OpenLayers.js
@@ -958,6 +958,8 @@ $.extend(fixmystreet.utils, {
                 );
             } else if (layer_options.matrixIds) {
                 layer = new fixmystreet.map_type(layer_options);
+            } else if (fixmystreet.layer_options[i].map_type) {
+                layer = new fixmystreet.layer_options[i].map_type(fixmystreet.layer_name, layer_options);
             } else {
                 layer = new fixmystreet.map_type(fixmystreet.layer_name, layer_options);
             }

diff --git a/web/js/map-bing-ol.js b/web/js/map-bing-ol.js
@@ -10,9 +10,21 @@ fixmystreet.maps.config = function() {
     if ( fixmystreet.page == 'report' ) {
         fixmystreet.controls.push( new OpenLayers.Control.PermalinkFMS('key-tool-problems-nearby', '/around') );
     }
-    fixmystreet.map_type = OpenLayers.Layer.Bing;
 };
 
+(function() {
+    $(function(){
+        $('#map_layer_toggle').toggle(function(){
+            $(this).text('Roads');
+            fixmystreet.map.setBaseLayer(fixmystreet.map.layers[1]);
+        }, function(){
+            $(this).text('Aerial');
+            fixmystreet.map.setBaseLayer(fixmystreet.map.layers[0]);
+        });
+    });
+
+})();
+
 OpenLayers.Layer.Bing = OpenLayers.Class(OpenLayers.Layer.XYZ, {
     tile_base: '//t{S}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/${id}?mkt=en-US&it=G,L&src=t&shading=hill&og=969&n=z',
     attributionTemplate: '${logo}${copyrights}',
@@ -100,3 +112,32 @@ OpenLayers.Layer.Bing = OpenLayers.Class(OpenLayers.Layer.XYZ, {
 
     CLASS_NAME: "OpenLayers.Layer.Bing"
 });
+
+OpenLayers.Layer.BingAerial = OpenLayers.Class(OpenLayers.Layer.Bing, {
+    tile_base: '//t{S}.ssl.ak.dynamic.tiles.virtualearth.net/comp/ch/${id}?mkt=en-US&it=A,G,L&src=t&og=969&n=z',
+
+    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 year = (new Date()).getFullYear();
+        var copyrights = '&copy; ' + year + ' <a href="https://www.bing.com/maps/">Microsoft</a>, HERE, ';
+        if (z >= 13) {
+            copyrights += 'Maxar, CNES Distribution Airbus DS';
+        } else {
+            copyrights += 'Earthstar Geographics SIO';
+        }
+        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);
+    },
+
+    CLASS_NAME: "OpenLayers.Layer.BingAerial"
+});
+
+fixmystreet.layer_options = [
+  { map_type: OpenLayers.Layer.Bing },
+  { map_type: OpenLayers.Layer.BingAerial }
+];
diff --git a/web/js/map-fms.js b/web/js/map-fms.js
@@ -1,12 +1,5 @@
 fixmystreet.maps.tile_base = '//{S}tilma.mysociety.org/oml';
 
-fixmystreet.maps.config = (function(original) {
-    return function(){
-        original();
-        fixmystreet.map_type = OpenLayers.Layer.BingUK;
-    };
-})(fixmystreet.maps.config);
-
 OpenLayers.Layer.BingUK = OpenLayers.Class(OpenLayers.Layer.Bing, {
     uk_bounds: [
         new OpenLayers.Bounds(-6.6, 49.8, 1.102680, 51),
@@ -78,3 +71,8 @@ OpenLayers.Layer.BingUK = OpenLayers.Class(OpenLayers.Layer.Bing, {
 
     CLASS_NAME: "OpenLayers.Layer.BingUK"
 });
+
+fixmystreet.layer_options = [
+  { map_type: OpenLayers.Layer.BingUK },
+  { map_type: OpenLayers.Layer.BingAerial }
+];
diff --git a/web/js/map-mastermap.js b/web/js/map-mastermap.js
@@ -23,3 +23,8 @@ OpenLayers.Layer.MasterMap = OpenLayers.Class(OpenLayers.Layer.BingUK, {
 
     CLASS_NAME: "OpenLayers.Layer.MasterMap"
 });
+
+fixmystreet.layer_options = [
+  { map_type: OpenLayers.Layer.MasterMap },
+  { map_type: OpenLayers.Layer.BingAerial }
+];