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.
This commit is contained in:
Lucas Verney 2018-11-30 15:02:01 +01:00
parent fc513cddac
commit 3e53146013
3 changed files with 31 additions and 10 deletions

View File

@ -122,10 +122,17 @@ export default {
} }
return null; 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() { tileServer() {
const tileServerSetting = this.$store.state.settings.tileServer; const tileServerSetting = this.$store.state.settings.tileServer;
if (tileServerSetting in constants.TILE_SERVERS) { 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 // Remove the protocol part, avoid easily avoidable unsecured
// content over HTTPS. // content over HTTPS.
@ -423,7 +430,7 @@ export default {
new TileLayer({ new TileLayer({
source: new XYZ({ source: new XYZ({
url: this.tileServer, url: this.tileServer,
attributions: this.attribution, attributions: this.tileAttribution ? `${this.tileAttribution}, ${this.attribution}` : this.attribution,
}), }),
}), }),
new VectorLayer({ new VectorLayer({

View File

@ -42,7 +42,7 @@ export const KEEP_REPORTS_METERS_AROUND = 10000; // in meters
export const DEFAULT_ZOOM = 17; export const DEFAULT_ZOOM = 17;
export const MIN_ZOOM = 6; 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_CENTER_WITHOUT_GEOLOCATION = [46.589, 2.944];
export const MAP_ZOOM_WITHOUT_GEOLOCATION = 6; 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 ACCURACY_DISPLAY_THRESHOLD = 100; // in meters
export const POSITION_MARKER_RADIUS = 10; // in pixels 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 = { export const TILE_SERVERS = {
'cartodb-voyager': 'https://{a-c}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png', 'cartodb-voyager': {
opencyclemap: opencyclemapURL, attribution: 'Tiles <a href= "https://carto.com/attributions" target="_blank">© CARTO</a>',
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 <a href="http://www.thunderforest.com" target="_blank">© Thunderforest</a>',
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 <a href="https://www.maptiler.com/license/maps/" target="_blank">© MapTiler</a>',
url: mapTilerStreetsURL,
};
}
export const DEFAULT_TILE_SERVER = 'cartodb-voyager'; export const DEFAULT_TILE_SERVER = 'cartodb-voyager';
export const GEOCODING_API_ENDPOINT = 'https://api-adresse.data.gouv.fr/search/'; export const GEOCODING_API_ENDPOINT = 'https://api-adresse.data.gouv.fr/search/';

View File

@ -119,7 +119,7 @@ export default {
}, },
}, },
tileServers() { tileServers() {
return [].concat(Object.keys(TILE_SERVERS), this.$t('settings.customTileServer')); return [].concat(Object.keys(TILE_SERVERS).sort(), this.$t('settings.customTileServer'));
}, },
}, },
data() { data() {