diff --git a/README.md b/README.md
index 73feeff..79cc6f0 100644
--- a/README.md
+++ b/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.
diff --git a/config/prod.env.js b/config/prod.env.js
index a86e7d4..6f56a08 100644
--- a/config/prod.env.js
+++ b/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),
}
diff --git a/src/components/Map.vue b/src/components/Map.vue
index c1b903a..ed735a7 100644
--- a/src/components/Map.vue
+++ b/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,
diff --git a/src/constants.js b/src/constants.js
index 7e79bf1..024200b 100644
--- a/src/constants.js
+++ b/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';
diff --git a/src/i18n/en.js b/src/i18n/en.js
index 4f8abf2..a47c8c8 100644
--- a/src/i18n/en.js
+++ b/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',
},
};
diff --git a/src/i18n/fr.js b/src/i18n/fr.js
index cdea85a..fa7cac3 100644
--- a/src/i18n/fr.js
+++ b/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',
},
};
diff --git a/src/store/mutations.js b/src/store/mutations.js
index eb79a9b..4f7cf95 100644
--- a/src/store/mutations.js
+++ b/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;
},
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index b0700f9..2382363 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -11,6 +11,13 @@
required
>
+
+