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.
|
* `PUBLIC_PATH=https://.../foobar` to serve the app from a subdirectory.
|
||||||
* `API_BASE_URL=https://...` to specify the location of the server (defaults
|
* `API_BASE_URL=https://...` to specify the location of the server (defaults
|
||||||
to `/`). The value should end with a trailing slash.
|
to `/`). The value should end with a trailing slash.
|
||||||
* `TILE_SERVER=` to pass a specific tile server to use rather than the default
|
* `THUNDERFOREST_API_KEY=` to pass an API key server to use for
|
||||||
one.
|
[Thunderforest](http://thunderforest.com/) tiles (OpenCycleMap, etc).
|
||||||
|
|
||||||
You should also have a look at the build variables under the `config/`
|
You should also have a look at the build variables under the `config/`
|
||||||
subdirectory.
|
subdirectory.
|
||||||
|
@ -2,5 +2,5 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
NODE_ENV: '"production"',
|
NODE_ENV: '"production"',
|
||||||
API_BASE_URL: JSON.stringify(process.env.API_BASE_URL),
|
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,
|
markerRadius: 10.0,
|
||||||
minZoom: constants.MIN_ZOOM,
|
minZoom: constants.MIN_ZOOM,
|
||||||
maxZoom: constants.MAX_ZOOM,
|
maxZoom: constants.MAX_ZOOM,
|
||||||
tileServer: constants.TILE_SERVER,
|
tileServer: constants.TILE_SERVERS[this.$store.state.settings.tileServer],
|
||||||
isMouseDown: false,
|
isMouseDown: false,
|
||||||
isProgrammaticZoom: false,
|
isProgrammaticZoom: false,
|
||||||
isProgrammaticMove: false,
|
isProgrammaticMove: false,
|
||||||
|
@ -125,4 +125,13 @@ export const EARTH_RADIUS = 6378137;
|
|||||||
export const DEFAULT_ZOOM = 17;
|
export const DEFAULT_ZOOM = 17;
|
||||||
export const MIN_ZOOM = 10;
|
export const MIN_ZOOM = 10;
|
||||||
export const MAX_ZOOM = 18;
|
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',
|
preventSuspend: 'Prevent device from going to sleep',
|
||||||
save: 'Save',
|
save: 'Save',
|
||||||
skipOnboarding: 'Skip onboarding',
|
skipOnboarding: 'Skip onboarding',
|
||||||
|
tileServer: 'Map tiles server',
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -65,5 +65,6 @@ export default {
|
|||||||
preventSuspend: "Empêcher l'appareil de passer en veille",
|
preventSuspend: "Empêcher l'appareil de passer en veille",
|
||||||
save: 'Sauver',
|
save: 'Sauver',
|
||||||
skipOnboarding: "Sauter l'introduction",
|
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 { messages, getBrowserLocales } from '@/i18n';
|
||||||
import { storageAvailable } from '@/tools';
|
import { storageAvailable } from '@/tools';
|
||||||
|
import { TILE_SERVERS, DEFAULT_TILE_SERVER } from '@/constants';
|
||||||
import * as types from './mutations-types';
|
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
|
// Load settings from storage
|
||||||
let locale = null;
|
let locale = null;
|
||||||
let preventSuspend = null;
|
let preventSuspend = null;
|
||||||
let skipOnboarding = null;
|
let skipOnboarding = null;
|
||||||
|
let tileServer = null;
|
||||||
if (storageAvailable('localStorage')) {
|
if (storageAvailable('localStorage')) {
|
||||||
preventSuspend = localStorage.getItem('preventSuspend');
|
preventSuspend = loadSettingFromStorage('preventSuspend');
|
||||||
if (preventSuspend) {
|
skipOnboarding = loadSettingFromStorage('skipOnboarding');
|
||||||
preventSuspend = JSON.parse(preventSuspend);
|
|
||||||
}
|
tileServer = loadSettingFromStorage('tileServer');
|
||||||
skipOnboarding = localStorage.getItem('skipOnboarding');
|
if (!TILE_SERVERS[tileServer]) {
|
||||||
if (skipOnboarding) {
|
tileServer = null;
|
||||||
skipOnboarding = JSON.parse(skipOnboarding);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
locale = localStorage.getItem('locale');
|
locale = localStorage.getItem('locale');
|
||||||
@ -48,6 +62,7 @@ export const initialState = {
|
|||||||
locale: locale || 'en',
|
locale: locale || 'en',
|
||||||
preventSuspend: preventSuspend || true,
|
preventSuspend: preventSuspend || true,
|
||||||
skipOnboarding: skipOnboarding || false,
|
skipOnboarding: skipOnboarding || false,
|
||||||
|
tileServer: tileServer || DEFAULT_TILE_SERVER,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -60,7 +75,7 @@ export const mutations = {
|
|||||||
},
|
},
|
||||||
[types.SET_SETTING](state, { setting, value }) {
|
[types.SET_SETTING](state, { setting, value }) {
|
||||||
if (storageAvailable('localStorage')) {
|
if (storageAvailable('localStorage')) {
|
||||||
localStorage.setItem(setting, value);
|
localStorage.setItem(setting, JSON.stringify(value));
|
||||||
}
|
}
|
||||||
state.settings[setting] = value;
|
state.settings[setting] = value;
|
||||||
},
|
},
|
||||||
|
@ -11,6 +11,13 @@
|
|||||||
required
|
required
|
||||||
></v-select>
|
></v-select>
|
||||||
|
|
||||||
|
<v-select
|
||||||
|
:items="tileServers"
|
||||||
|
v-model="tileServer"
|
||||||
|
:label="$t('settings.tileServer')"
|
||||||
|
required
|
||||||
|
></v-select>
|
||||||
|
|
||||||
<v-checkbox
|
<v-checkbox
|
||||||
:label="$t('settings.preventSuspend')"
|
:label="$t('settings.preventSuspend')"
|
||||||
v-model="preventSuspend"
|
v-model="preventSuspend"
|
||||||
@ -29,6 +36,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { TILE_SERVERS } from '@/constants';
|
||||||
import { messages } from '@/i18n';
|
import { messages } from '@/i18n';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -38,6 +46,8 @@ export default {
|
|||||||
locale: this.$store.state.settings.locale,
|
locale: this.$store.state.settings.locale,
|
||||||
preventSuspend: this.$store.state.settings.preventSuspend,
|
preventSuspend: this.$store.state.settings.preventSuspend,
|
||||||
skipOnboarding: this.$store.state.settings.skipOnboarding,
|
skipOnboarding: this.$store.state.settings.skipOnboarding,
|
||||||
|
tileServer: this.$store.state.settings.tileServer,
|
||||||
|
tileServers: Object.keys(TILE_SERVERS),
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@ -45,6 +55,7 @@ export default {
|
|||||||
this.$store.dispatch('setLocale', { locale: this.locale });
|
this.$store.dispatch('setLocale', { locale: this.locale });
|
||||||
this.$store.dispatch('setSetting', { setting: 'preventSuspend', value: this.preventSuspend });
|
this.$store.dispatch('setSetting', { setting: 'preventSuspend', value: this.preventSuspend });
|
||||||
this.$store.dispatch('setSetting', { setting: 'skipOnboarding', value: this.skipOnboarding });
|
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