Add ability to override Google Maps road style.

1 files changed, 17 insertions, 1 deletions

diff --git a/web/js/map-google-ol.js b/web/js/map-google-ol.js
index 96ec6fe9b..7369a8e9f 100644
--- a/web/js/map-google-ol.js
+++ b/web/js/map-google-ol.js
@@ -33,8 +33,24 @@ fixmystreet.maps.config = function() {
         zoomDuration: 10
     };
 
+    var road_layer = {}; // Empty object defaults to standard road layer
+
+    function apply_map_styles() {
+        var styledMapType = new google.maps.StyledMapType(fixmystreet_google_maps_custom_style);
+        this.mapObject.mapTypes.set('styled', styledMapType);
+        this.mapObject.setMapTypeId('styled');
+    }
+    // If you want to apply a custom style to the road map (for example from
+    // a service such as snazzymaps.com) then define that style as a top-level
+    // variable called fixmystreet_google_maps_custom_style (you might have to
+    // override the maps/google-ol.html template to include your own JS file)
+    // and it'll automatically be applied.
+    if (typeof fixmystreet_google_maps_custom_style !== 'undefined') {
+        road_layer = { type: 'styled', eventListeners: { added: apply_map_styles } };
+    }
+
     fixmystreet.layer_options = [
-        {},
+        road_layer,
         { type: google.maps.MapTypeId.HYBRID }
     ];
 };