From 3e53146013828b64ce87b4463b5ad6e8d0c250be Mon Sep 17 00:00:00 2001 From: "Phyks (Lucas Verney)" Date: Fri, 30 Nov 2018 15:02:01 +0100 Subject: [PATCH] Improve available tiles * Add MapTiler Streets tiles, fix https://framagit.org/phyks/cyclassist/issues/55. * Add proper attributions for tiles. * Sort tiles by name in settings. --- src/components/Map.vue | 11 +++++++++-- src/constants.js | 28 +++++++++++++++++++++------- src/views/Settings.vue | 2 +- 3 files changed, 31 insertions(+), 10 deletions(-) diff --git a/src/components/Map.vue b/src/components/Map.vue index b2bf189..a25d569 100644 --- a/src/components/Map.vue +++ b/src/components/Map.vue @@ -122,10 +122,17 @@ export default { } return null; }, + tileAttribution() { + const tileServerSetting = this.$store.state.settings.tileServer; + if (tileServerSetting in constants.TILE_SERVERS) { + return constants.TILE_SERVERS[tileServerSetting].attribution; + } + return null; + }, tileServer() { const tileServerSetting = this.$store.state.settings.tileServer; if (tileServerSetting in constants.TILE_SERVERS) { - return constants.TILE_SERVERS[tileServerSetting]; + return constants.TILE_SERVERS[tileServerSetting].url; } // Remove the protocol part, avoid easily avoidable unsecured // content over HTTPS. @@ -423,7 +430,7 @@ export default { new TileLayer({ source: new XYZ({ url: this.tileServer, - attributions: this.attribution, + attributions: this.tileAttribution ? `${this.tileAttribution}, ${this.attribution}` : this.attribution, }), }), new VectorLayer({ diff --git a/src/constants.js b/src/constants.js index 2fda21b..be04fc8 100644 --- a/src/constants.js +++ b/src/constants.js @@ -42,7 +42,7 @@ export const KEEP_REPORTS_METERS_AROUND = 10000; // in meters export const DEFAULT_ZOOM = 17; export const MIN_ZOOM = 6; -export const MAX_ZOOM = 18; +export const MAX_ZOOM = 19; export const MAP_CENTER_WITHOUT_GEOLOCATION = [46.589, 2.944]; export const MAP_ZOOM_WITHOUT_GEOLOCATION = 6; @@ -50,14 +50,28 @@ export const MAP_ZOOM_WITHOUT_GEOLOCATION = 6; export const ACCURACY_DISPLAY_THRESHOLD = 100; // in meters export const POSITION_MARKER_RADIUS = 10; // in pixels -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://{a-c}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png', - opencyclemap: opencyclemapURL, + 'cartodb-voyager': { + attribution: 'Tiles © CARTO', + url: 'https://{a-c}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png', + }, }; +if (process.env.THUNDERFOREST_API_KEY) { + let opencyclemapURL = 'https://tile.thunderforest.com/cycle/{z}/{x}/{y}.png'; + opencyclemapURL += `?apikey=${process.env.THUNDERFOREST_API_KEY}`; + TILE_SERVERS.opencyclemap = { + attribution: 'Tiles © Thunderforest', + url: opencyclemapURL, + }; +} +if (process.env.MAPTILER_API_KEY) { + let mapTilerStreetsURL = 'https://maps.tilehosting.com/styles/streets/{z}/{x}/{y}.png'; + mapTilerStreetsURL += `?key=${process.env.MAPTILER_API_KEY}`; + TILE_SERVERS['maptiler-streets'] = { + attribution: 'Tiles © MapTiler', + url: mapTilerStreetsURL, + }; +} export const DEFAULT_TILE_SERVER = 'cartodb-voyager'; export const GEOCODING_API_ENDPOINT = 'https://api-adresse.data.gouv.fr/search/'; diff --git a/src/views/Settings.vue b/src/views/Settings.vue index 8fc53f5..be33701 100644 --- a/src/views/Settings.vue +++ b/src/views/Settings.vue @@ -119,7 +119,7 @@ export default { }, }, tileServers() { - return [].concat(Object.keys(TILE_SERVERS), this.$t('settings.customTileServer')); + return [].concat(Object.keys(TILE_SERVERS).sort(), this.$t('settings.customTileServer')); }, }, data() {