Merge pull request #128 from SpeciesFileGroup/development

Development

src/components/Layout/LayoutHeader.vue

@@ -16,7 +16,7 @@
           :alt="header_logo_text"
         />
         <span>
-          {{ header_logo_text }}
+          {{ header_logo_text || project_name }}
         </span>
       </RouterLink>
 
@@ -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

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()
 })
 

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 })
+    ])
+  )
+}

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: [] }
+  )
+}