Fix mapbox API URL

closes #7066

Changelog.md

@@ -1,5 +1,7 @@
 # 0.6.1.0
 
+Note: Although this is a minor release, the configuration file changed because the old Mapbox implementation is no longer valid, and the current implementation requires additional fields. Chances are high that if you're using the old integration, it will be broken anyway. If you do use Mapbox, please check out the `diaspora.yml.example` for new parameters.
+
 ## Refactor
 * Indicate proper way to report bugs in the sidebar [#7039](https://github.com/diaspora/diaspora/pull/7039)
 * Remove text color from notification mails and fix sender avatar [#7054](https://github.com/diaspora/diaspora/pull/7054)
@@ -9,6 +11,7 @@
 * Improve W3C compliance [#7068](https://github.com/diaspora/diaspora/pull/7068) [#7082](https://github.com/diaspora/diaspora/pull/7082) [#7091](https://github.com/diaspora/diaspora/pull/7091) [#7092](https://github.com/diaspora/diaspora/pull/7092)
 * Load jQuery in the head on mobile [#7086](https://github.com/diaspora/diaspora/pull/7086)
 * Use translation for NodeInfo services [#7102](https://github.com/diaspora/diaspora/pull/7102)
+* Adopt new Mapbox tile URIs [#7066](https://github.com/diaspora/diaspora/pull/7066)
 
 ## Bug fixes
 * Post comments no longer get collapsed when interacting with a post [#7040](https://github.com/diaspora/diaspora/pull/7040)

app/assets/javascripts/app/helpers/locations.js

@@ -3,9 +3,9 @@
     getTiles: function() {
       // If the mapbox option is enabled in the diaspora.yml, the mapbox tiles with the podmin's credentials are used.
       if (gon.appConfig.map.mapbox.enabled) {
-        return L.tileLayer("https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}", {
-          id: gon.appConfig.map.mapbox.id,
+        return L.tileLayer("https://api.mapbox.com/styles/v1/{style}/tiles/256/{z}/{x}/{y}?access_token={accessToken}", {
           accessToken: gon.appConfig.map.mapbox.access_token,
+          style: gon.appConfig.map.mapbox.style,
           attribution: "Map data &copy; <a href='http://openstreetmap.org'>OpenStreetMap</a> contributors, " +
                        "<a href='http://creativecommons.org/licenses/by-sa/2.0/''>CC-BY-SA</a>, " +
                        "Imagery © <a href='https://www.mapbox.com'>Mapbox</a>",

app/controllers/application_controller.rb

@@ -161,7 +161,11 @@ class ApplicationController < ActionController::Base
     gon.push(appConfig: {
                chat:     {enabled: AppConfig.chat.enabled?},
                settings: {podname: AppConfig.settings.pod_name},
-               map:      {mapbox: AppConfig.map.mapbox}
+               map:      {mapbox: {
+                 enabled:      AppConfig.map.mapbox.enabled?,
+                 access_token: AppConfig.map.mapbox.access_token,
+                 style:        AppConfig.map.mapbox.style
+               }}
              })
   end
 

config/defaults.yml

@@ -67,8 +67,8 @@ defaults:
   map:
     mapbox:
       enabled: false
-      id:
       access_token:
+      style: "mapbox/streets-v9"
   privacy:
     jquery_cdn: false
     google_analytics_key:

config/diaspora.yml.example

@@ -274,15 +274,15 @@ configuration: ## Section
   ## tiles of the Heidelberg University (http://giscience.uni-hd.de).
   ## You also have the possibility to use the map tiles of https://www.mapbox.com
   ## which is probably more reliable. There you have to create an account to get
-  ## an ID and an access token which is limited. If you want to get an unlimited
-  ## account you can write an email to team@diasporafoundation.org.
-  ## Please enable mapbox and fill out your id and access_token.
+  ## an access token which is limited. If you want to get an unlimited account
+  ## you can write an email to team@diasporafoundation.org.
+  ## Please enable mapbox and fill out your access_token.
   map: ##Section
 
     mapbox:
-    # enabled: false
-    # id: 'your.id'
-    # access_token: 'youraccesstoken'
+      #enabled: false
+      #access_token: "youraccesstoken"
+      #style: "mapbox/streets-v9"
 
   ## Settings potentially affecting the privacy of your users.
   privacy: ## Section

spec/javascripts/app/helpers/locations_spec.js

@@ -15,13 +15,13 @@ describe("app.helpers.locations", function() {
     context("with mapbox enabled", function() {
       beforeEach(function() {
         /* eslint-disable camelcase */
-        gon.appConfig = {map: {mapbox: {enabled: true, id: "yourID", access_token: "yourAccessToken"}}};
+        gon.appConfig = {map: {mapbox: {enabled: true, style: "mapbox/streets-v9", access_token: "yourAccessToken"}}};
         /* eslint-enable camelcase */
       });
 
       it("returns tiles from mapbox", function() {
         var tiles = app.helpers.locations.getTiles();
-        expect(tiles._url).toMatch("https://api.tiles.mapbox.com/");
+        expect(tiles._url).toMatch("https://api.mapbox.com/");
         expect(tiles._url).not.toMatch("http://korona.geog.uni-heidelberg.de/");
       });
     });

spec/javascripts/app/views/location_stream_spec.js

@@ -2,9 +2,9 @@ describe("app.views.LocationStream", function() {
   beforeEach(function(){
     this.post = factory.post();
     this.view = new app.views.LocationStream({model : this.post});
-    /* jshint camelcase: false */
-    gon.appConfig = {map: { mapbox: {enabled: true, id: "yourID", access_token: "yourAccessToken" }}};
-    /* jshint camelcase: true */
+    /* eslint-disable camelcase */
+    gon.appConfig = {map: {mapbox: {enabled: true, style: "mapbox/streets-v9", access_token: "yourAccessToken"}}};
+    /* eslint-enable camelcase */
   });
 
   describe("toggleMap", function() {