Add mapbox streets and satellite layers

Replacing mapquest with mapbox as mapquest has discountinued their free layers
ushahidi · Jul 12, 2016 · 1902b6c · 1902b6c
1 parent 5164487
commit 1902b6c
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 16 deletions.
diff --git a/app/app.js b/app/app.js
@@ -94,7 +94,8 @@ angular.module('app',
         OAUTH_CLIENT_ID     : 'ushahidiui',
         OAUTH_CLIENT_SECRET : '35e7f0bca957836d05ca0492211b0ac707671261',
         CLAIMED_ANONYMOUS_SCOPES : claimedAnonymousScopes,
-        CLAIMED_USER_SCOPES : claimedAnonymousScopes.concat('dataproviders')
+        CLAIMED_USER_SCOPES : claimedAnonymousScopes.concat('dataproviders'),
+        MAPBOX_API_KEY      : window.ushahidi.mapboxApiKey || 'pk.eyJ1IjoidXNoYWhpZGkiLCJhIjoiY2lxaXUzeHBvMDdndmZ0bmVmOWoyMzN6NiJ9.CX56ZmZJv0aUsxvH5huJBw' // Default OSS mapbox api key
     })
 
     .config(['$compileProvider', function ($compileProvider) {

diff --git a/app/common/services/maps.js b/app/common/services/maps.js
@@ -11,6 +11,7 @@ module.exports = [
     'MediaEndpoint',
     '$compile',
     '$rootScope',
+    'CONST',
 function (
     $q,
     ConfigEndpoint,
@@ -23,39 +24,42 @@ function (
     FormAttributeEndpoint,
     MediaEndpoint,
     $compile,
-    $rootScope
+    $rootScope,
+    CONST
 ) {
-
     var layers = {
         baselayers : {
-            MapQuest: {
-                name: 'Map',
-                url: 'http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png',
+            satellite: {
+                name: 'Satellite',
+                url: 'http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={apikey}',
                 type: 'xyz',
                 layerOptions: {
-                    subdomains: '1234',
-                    attribution: 'Map data &copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, Imagery &copy; <a href="http://info.mapquest.com/terms-of-use/">MapQuest</a>'
+                    apikey: CONST.MAPBOX_API_KEY,
+                    mapid: 'mapbox.satellite',
+                    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>, &copy; <a href="https://www.mapbox.com/about/maps/"">Mapbox</a>'
                 }
             },
-            MapQuestAerial: {
-                name: 'Satellite',
-                url: 'http://otile{s}.mqcdn.com/tiles/1.0.0/sat/{z}/{x}/{y}.png',
+            streets: {
+                name: 'Streets',
+                url: 'http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.png?access_token={apikey}',
                 type: 'xyz',
                 layerOptions: {
-                    subdomains: '1234',
-                    attribution: 'Map data &copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, Imagery &copy; <a href="http://info.mapquest.com/terms-of-use/">MapQuest</a>'
+                    apikey: CONST.MAPBOX_API_KEY,
+                    mapid: 'mapbox.streets',
+                    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>, &copy; <a href="https://www.mapbox.com/about/maps/"">Mapbox</a>'
                 }
             },
             hOSM: {
                 name: 'Humanitarian',
                 url: 'http://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png',
                 type: 'xyz',
                 layerOptions: {
-                    attribution: 'Map data &copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, Tiles courtesy of <a href="http://hot.openstreetmap.org/">Humanitarian OpenStreetMap Team</a>'
+                    attribution: 'Map data &copy; <a href="http://osm.org/copyright">OpenStreetMap</a>, Tiles <a href="http://hot.openstreetmap.org/">Humanitarian OpenStreetMap Team</a>'
                 }
             }
         }
     };
+
     // Copy layersOptions to options to allow for differing formats
     // use by leaflet directive tiles vs layers
     angular.forEach(layers.baselayers, function (layer) {
@@ -172,6 +176,13 @@ function (
         },
         reloadMapConfig: function () {
             return ConfigEndpoint.get({ id: 'map' }).$promise.then(_.bind(function (config) {
+                // Handle legacy layers
+                if (config.default_view.baselayer === 'MapQuest') {
+                    config.default_view.baselayer = 'streets';
+                }
+                if (config.default_view.baselayer === 'MapQuestAerial') {
+                    config.default_view.baselayer = 'satellite';
+                }
                 this.config = config;
                 return this.config;
             }, this));

diff --git a/app/setting/directives/setting-map-directive.js b/app/setting/directives/setting-map-directive.js
@@ -32,7 +32,7 @@ function (
             function activate() {
                 // Set initial map params
                 angular.extend($scope, Maps.getInitialScope());
-                $scope.baselayer = $scope.layers.baselayers.MapQuest;
+                $scope.baselayer = $scope.layers.baselayers.streets;
                 $scope.markers = {
                     dragger: {
                         lat: $scope.center.lat,

diff --git a/server/www/config.js b/server/www/config.js
@@ -2,5 +2,6 @@
 //
 // Uncomment lines below to configure your deployment
 // window.ushahidi = {
-// 	backendUrl : "https://ushahidi-platform-api-release.herokuapp.com"
+// 	backendUrl : "https://ushahidi-platform-api-release.herokuapp.com",
+// 	mapboxApiKey: ""
 // };