diff --git a/src/components/Layout/LayoutHeader.vue b/src/components/Layout/LayoutHeader.vue index 5755694..a0a9f93 100644 --- a/src/components/Layout/LayoutHeader.vue +++ b/src/components/Layout/LayoutHeader.vue @@ -16,7 +16,7 @@ :alt="header_logo_text" /> - {{ header_logo_text }} + {{ header_logo_text || project_name }} @@ -59,8 +59,13 @@ import SwitchTheme from '../SwitchTheme.vue' import NavbarMobile from '../Navbar/NavbarMobile.vue' import { isValidUrl } from '@/utils/url' -const { header_links, header_logo_text, header_logo_url, base_url } = - __APP_ENV__ +const { + header_links, + header_logo_text, + header_logo_url, + base_url, + project_name +} = __APP_ENV__ const logoUrl = isValidUrl(header_logo_url) ? header_logo_url diff --git a/src/components/Map/VMap.client.vue b/src/components/Map/VMap.client.vue index e06be88..f677ceb 100644 --- a/src/components/Map/VMap.client.vue +++ b/src/components/Map/VMap.client.vue @@ -12,6 +12,7 @@ import iconRetina from 'leaflet/dist/images/marker-icon-2x.png' import iconUrl from 'leaflet/dist/images/marker-icon.png' import shadowUrl from 'leaflet/dist/images/marker-shadow.png' import geojsonDefaultOptions from './utils/geojsonOptions' +import { makeTileFromConfiguration } from './utils/makeTileFromConfiguration' import '@geoman-io/leaflet-geoman-free' import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css' @@ -24,8 +25,6 @@ L.Icon.Default.mergeOptions({ shadowUrl: shadowUrl }) -const { map_tile_server, map_tile_attribution } = __APP_ENV__ - const props = defineProps({ controls: { type: Boolean, @@ -115,14 +114,6 @@ let drawnItems let geoJSONGroup const leafletMap = ref(null) -const tiles = { - osm: L.tileLayer(map_tile_server, { - maxZoom: props.maxZoom, - minZoom: props.minZoom, - className: 'map-tiles', - attribution: map_tile_attribution - }) -} const fitBoundsOptions = computed(() => ({ maxZoom: props.zoomBounds, @@ -152,6 +143,14 @@ watch( ) onMounted(() => { + const tiles = makeTileFromConfiguration(L, { + maxZoom: props.maxZoom, + minZoom: props.minZoom, + className: 'map-tiles' + }) + + const [currentTile] = Object.values(tiles) + const options = { center: props.center, zoom: props.zoom, @@ -218,7 +217,14 @@ onMounted(() => { mapObject.on('zoomstart', (e) => emit('zoom:start', e)) } - tiles.osm.addTo(mapObject) + currentTile.addTo(mapObject) + + if (Object.keys(tiles).length > 1) { + L.control + .layers(tiles, {}, { position: 'topleft', collapsed: false }) + .addTo(mapObject) + } + initEvents() }) diff --git a/src/components/Map/utils/makeTileFromConfiguration.js b/src/components/Map/utils/makeTileFromConfiguration.js new file mode 100644 index 0000000..8e7ca49 --- /dev/null +++ b/src/components/Map/utils/makeTileFromConfiguration.js @@ -0,0 +1,18 @@ +const { map_tile_server, map_tile_attribution, map_tiles } = __APP_ENV__ + +export function makeTileFromConfiguration(L, opts) { + const tiles = map_tiles || [ + { + label: 'tile', + server: map_tile_server, + attribution: map_tile_attribution + } + ] + + return Object.fromEntries( + tiles.map(({ server, attribution, label }) => [ + label, + L.tileLayer(server, { ...opts, attribution }) + ]) + ) +} diff --git a/src/utils/loadConfiguration.js b/src/utils/loadConfiguration.js index 8fd93b6..7aa49ba 100644 --- a/src/utils/loadConfiguration.js +++ b/src/utils/loadConfiguration.js @@ -4,10 +4,31 @@ import glob from 'glob' import defaultConfig from '../constants/defaultConfig' export const loadConfiguration = (appPath) => { - const filePaths = glob.sync(appPath + '/config/*.yml', {}) - const jsonConfig = filePaths.map((filepath) => - yaml.load(fs.readFileSync(filepath, 'utf8')) - ) + const isProd = process.env.NODE_ENV === 'production' + const filePaths = glob.sync(appPath + '/config/*.yml') + const configurationPaths = splitFilePathsByEnv(filePaths) + + const jsonConfig = [ + ...configurationPaths.prod, + ...(!isProd ? configurationPaths.dev : []) + ].map((filepath) => yaml.load(fs.readFileSync(filepath, 'utf8'))) return Object.assign({}, defaultConfig, ...jsonConfig) } + +function splitFilePathsByEnv(filepaths) { + const devExtension = '.development.yml' + + return filepaths.reduce( + (acc, current) => { + if (current.includes(devExtension)) { + acc.dev.push(current) + } else { + acc.prod.push(current) + } + + return acc + }, + { dev: [], prod: [] } + ) +}