From fbe82988144ce969a16a7939a54b7d446621657e Mon Sep 17 00:00:00 2001 From: "Phyks (Lucas Verney)" Date: Tue, 17 Jul 2018 16:32:34 +0200 Subject: [PATCH] Let user choose which tile server to use among a list of tile servers. Fix #19. --- README.md | 4 ++-- config/prod.env.js | 2 +- src/components/Map.vue | 2 +- src/constants.js | 11 ++++++++++- src/i18n/en.js | 1 + src/i18n/fr.js | 1 + src/store/mutations.js | 31 +++++++++++++++++++++++-------- src/views/Settings.vue | 11 +++++++++++ 8 files changed, 50 insertions(+), 13 deletions(-) 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 > + +