Let user choose which tile server to use among a list of tile servers. Fix #19.
This commit is contained in:
parent
8921833619
commit
fbe8298814
@ -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.
|
||||
|
@ -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),
|
||||
}
|
||||
|
@ -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,
|
||||
|
@ -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';
|
||||
|
@ -65,5 +65,6 @@ export default {
|
||||
preventSuspend: 'Prevent device from going to sleep',
|
||||
save: 'Save',
|
||||
skipOnboarding: 'Skip onboarding',
|
||||
tileServer: 'Map tiles server',
|
||||
},
|
||||
};
|
||||
|
@ -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',
|
||||
},
|
||||
};
|
||||
|
@ -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;
|
||||
},
|
||||
|
@ -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 });
|
||||
},
|
||||
},
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user