Let user choose which tile server to use among a list of tile servers. Fix #19.

README.md

@@ -47,8 +47,8 @@ adapt the behavior to your needs.
 * `PUBLIC_PATH=https://.../foobar` to serve the app from a subdirectory.
 * `API_BASE_URL=https://...` to specify the location of the server (defaults
     to `/`). The value should end with a trailing slash.
-* `TILE_SERVER=` to pass a specific tile server to use rather than the default
-    one.
+* `THUNDERFOREST_API_KEY=` to pass an API key server to use for
+    [Thunderforest](http://thunderforest.com/) tiles (OpenCycleMap, etc).
 
 You should also have a look at the build variables under the `config/`
 subdirectory.

config/prod.env.js

@@ -2,5 +2,5 @@
 module.exports = {
   NODE_ENV: '"production"',
   API_BASE_URL: JSON.stringify(process.env.API_BASE_URL),
-  TILE_SERVER: JSON.stringify(process.env.TILE_SERVER),
+  THUNDERFOREST_API_KEY: JSON.stringify(process.env.THUNDERFOREST_API_KEY),
 }

src/components/Map.vue

@@ -166,7 +166,7 @@ export default {
             markerRadius: 10.0,
             minZoom: constants.MIN_ZOOM,
             maxZoom: constants.MAX_ZOOM,
-            tileServer: constants.TILE_SERVER,
+            tileServer: constants.TILE_SERVERS[this.$store.state.settings.tileServer],
             isMouseDown: false,
             isProgrammaticZoom: false,
             isProgrammaticMove: false,

src/constants.js

@@ -125,4 +125,13 @@ export const EARTH_RADIUS = 6378137;
 export const DEFAULT_ZOOM = 17;
 export const MIN_ZOOM = 10;
 export const MAX_ZOOM = 18;
-export const TILE_SERVER = process.env.TILE_SERVER || 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png';
+
+let opencyclemapURL = 'https://tile.thunderforest.com/cycle/{z}/{x}/{y}.png';
+if (process.env.THUNDERFOREST_API_KEY) {
+    opencyclemapURL += `?apikey=${process.env.THUNDERFOREST_API_KEY}`;
+}
+export const TILE_SERVERS = {
+    'cartodb-voyager': 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png',
+    opencyclemap: opencyclemapURL,
+};
+export const DEFAULT_TILE_SERVER = 'cartodb-voyager';

src/i18n/en.js

@@ -65,5 +65,6 @@ export default {
         preventSuspend: 'Prevent device from going to sleep',
         save: 'Save',
         skipOnboarding: 'Skip onboarding',
+        tileServer: 'Map tiles server',
     },
 };

src/i18n/fr.js

@@ -65,5 +65,6 @@ export default {
         preventSuspend: "Empêcher l'appareil de passer en veille",
         save: 'Sauver',
         skipOnboarding: "Sauter l'introduction",
+        tileServer: 'Serveur de tuiles pour la carte',
     },
 };

src/store/mutations.js

@@ -3,20 +3,34 @@ import Vue from 'vue';
 
 import { messages, getBrowserLocales } from '@/i18n';
 import { storageAvailable } from '@/tools';
+import { TILE_SERVERS, DEFAULT_TILE_SERVER } from '@/constants';
 import * as types from './mutations-types';
 
+function loadSettingFromStorage(name) {
+    try {
+        const value = localStorage.getItem(name);
+        if (value) {
+            return JSON.parse(value);
+        }
+        return null;
+    } catch (e) {
+        console.error(`Unable to load setting ${name}: ${e}.`);
+        return null;
+    }
+}
+
 // Load settings from storage
 let locale = null;
 let preventSuspend = null;
 let skipOnboarding = null;
+let tileServer = null;
 if (storageAvailable('localStorage')) {
-    preventSuspend = localStorage.getItem('preventSuspend');
-    if (preventSuspend) {
-        preventSuspend = JSON.parse(preventSuspend);
-    }
-    skipOnboarding = localStorage.getItem('skipOnboarding');
-    if (skipOnboarding) {
-        skipOnboarding = JSON.parse(skipOnboarding);
+    preventSuspend = loadSettingFromStorage('preventSuspend');
+    skipOnboarding = loadSettingFromStorage('skipOnboarding');
+
+    tileServer = loadSettingFromStorage('tileServer');
+    if (!TILE_SERVERS[tileServer]) {
+        tileServer = null;
     }
 
     locale = localStorage.getItem('locale');
@@ -48,6 +62,7 @@ export const initialState = {
         locale: locale || 'en',
         preventSuspend: preventSuspend || true,
         skipOnboarding: skipOnboarding || false,
+        tileServer: tileServer || DEFAULT_TILE_SERVER,
     },
 };
 
@@ -60,7 +75,7 @@ export const mutations = {
     },
     [types.SET_SETTING](state, { setting, value }) {
         if (storageAvailable('localStorage')) {
-            localStorage.setItem(setting, value);
+            localStorage.setItem(setting, JSON.stringify(value));
         }
         state.settings[setting] = value;
     },

src/views/Settings.vue

@@ -11,6 +11,13 @@
                         required
                         ></v-select>
 
+                    <v-select
+                        :items="tileServers"
+                        v-model="tileServer"
+                        :label="$t('settings.tileServer')"
+                        required
+                        ></v-select>
+
                     <v-checkbox
                         :label="$t('settings.preventSuspend')"
                         v-model="preventSuspend"
@@ -29,6 +36,7 @@
 </template>
 
 <script>
+import { TILE_SERVERS } from '@/constants';
 import { messages } from '@/i18n';
 
 export default {
@@ -38,6 +46,8 @@ export default {
             locale: this.$store.state.settings.locale,
             preventSuspend: this.$store.state.settings.preventSuspend,
             skipOnboarding: this.$store.state.settings.skipOnboarding,
+            tileServer: this.$store.state.settings.tileServer,
+            tileServers: Object.keys(TILE_SERVERS),
         };
     },
     methods: {
@@ -45,6 +55,7 @@ export default {
             this.$store.dispatch('setLocale', { locale: this.locale });
             this.$store.dispatch('setSetting', { setting: 'preventSuspend', value: this.preventSuspend });
             this.$store.dispatch('setSetting', { setting: 'skipOnboarding', value: this.skipOnboarding });
+            this.$store.dispatch('setSetting', { setting: 'tileServer', value: this.tileServer });
         },
     },
 };