Update base layers and Vuetify theme

frontend/src/components/TheLeafletMap.vue

@@ -1,15 +1,15 @@
 <template>
     <div v-show="$route.meta.showMap" id="mapContainer"></div>
 </template>
-  
+
 <script setup>
 import "leaflet/dist/leaflet.css";
 import "leaflet-easybutton/src/easy-button.css";
 import L from 'leaflet'
 import * as esriLeaflet from "esri-leaflet";
 // import * as esriLeafletVector from 'esri-leaflet-vector';
 import "leaflet-easybutton/src/easy-button";
-import { onMounted, onUpdated} from 'vue'
+import { onMounted, onUpdated } from 'vue'
 import { useMapStore } from '@/stores/map'
 import { useAlertStore } from '@/stores/alerts'
 
@@ -24,7 +24,7 @@ import { queryHydroCron } from "../_helpers/hydroCron";
 
 const Map = mapStore.mapObject
 
-onUpdated(() =>{
+onUpdated(() => {
     Map.map.invalidateSize()
 })
 
@@ -63,11 +63,47 @@ onMounted(() => {
     //     "-99999999"]);
 
     // Initial OSM tile layer
-    L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png', {
+    const CartoDB = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png', {
         attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
         subdomains: 'abcd',
         maxZoom: 19
-    }).addTo(map);
+    })
+
+    var CartoDB_PositronNoLabels = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png', {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
+        subdomains: 'abcd',
+        maxZoom: 20
+    });
+
+    var CartoDB_DarkMatterNoLabels = L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png', {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
+        subdomains: 'abcd',
+        maxZoom: 20
+    });
+
+    const Stadia_StamenTonerLite = L.tileLayer('https://tiles.stadiamaps.com/tiles/stamen_toner_lite/{z}/{x}/{y}{r}.{ext}', {
+        minZoom: 0,
+        maxZoom: 20,
+        attribution: '&copy; <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://www.stamen.com/" target="_blank">Stamen Design</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+        ext: 'png'
+    });
+
+    const Stadia_StamenTonerBackground = L.tileLayer('https://tiles.stadiamaps.com/tiles/stamen_toner_background/{z}/{x}/{y}{r}.{ext}', {
+        minZoom: 0,
+        maxZoom: 20,
+        attribution: '&copy; <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://www.stamen.com/" target="_blank">Stamen Design</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+        ext: 'png'
+    });
+
+    const baselayers = {
+        CartoDB,
+        CartoDB_PositronNoLabels,
+        CartoDB_DarkMatterNoLabels,
+        Stadia_StamenTonerLite,
+        Stadia_StamenTonerBackground
+    };
+
+    Stadia_StamenTonerLite.addTo(map);
 
 
 
@@ -97,7 +133,7 @@ onMounted(() => {
         </p>
         `;
         popup.setLatLng(e.latlng).setContent(content).openOn(map);
-        
+
         lakesFeatures.setFeatureStyle(e.layer.feature.id, {
             color: "#9D78D2",
             weight: 3,
@@ -303,7 +339,7 @@ onMounted(() => {
     // Map.submit = submit_group; //btn_submit;
 
     // Layer Control
-    L.control.layers(null, mixed).addTo(map);
+    L.control.layers(baselayers, mixed).addTo(map);
 
     /*
      * LEAFLET EVENT HANDLERS

frontend/src/components/ThemeButton.vue

@@ -1,13 +1,13 @@
 <template>
-  <v-btn @click="toggleTheme">toggle theme</v-btn>
+  <v-btn @click="toggleTheme" class="text-info">toggle theme</v-btn>
 </template>
 
 <script setup>
 import { useTheme } from 'vuetify'
 
 const theme = useTheme()
 
-function toggleTheme () {
+function toggleTheme() {
   console.log(theme.global.current.value)
   theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
 }

frontend/src/plugins/vuetify.js

@@ -1,50 +1,50 @@
 import 'vuetify/styles'
 import { createVuetify } from 'vuetify'
-import colors from "vuetify/lib/util/colors";
+import colors from 'vuetify/lib/util/colors'
 import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
-// import colors from 'vuetify/lib/util/colors'
 
 // https://vuetifyjs.com/en/features/theme/#javascript
+// https://vuetifyjs.com/en/styles/colors/#javascript-color-pack
 
 const dark = {
   dark: true,
-  colors:{
-    primary: "#009688",
-    secondary: "#607D8B",
-    accent: "#2196F3",
-    error: "#FF1744",
-    success: "#00BFA5",
-    info: "#607D8B",
-    navbar: "#37474F",
+  colors: {
+    primary: colors.teal.base,
+    secondary: colors.blueGrey.base,
+    accent: colors.blue.base,
+    error: colors.red.accent3,
+    success: colors.teal.accent4,
+    info: colors.blueGrey.lighten1,
+    navbar: colors.blueGrey.darken4
   }
 }
 
 const light = {
   dark: false,
-  colors:{
-    primary: "#1976d2",
+  colors: {
+    primary: colors.blue.darken2,
     secondary: colors.blueGrey.lighten4,
-    accent: "#2196F3",
-    error: "#FF1744",
-    success: "#00BFA5",
-    info: "#607D8B",
-    navbar: colors.blueGrey.lighten4,
+    accent: colors.blue.base,
+    error: colors.red.accent3,
+    success: colors.teal.accent4,
+    info: colors.blueGrey.base,
+    navbar: colors.blueGrey.lighten1
   }
 }
 
 export default createVuetify({
   theme: {
-    defaultTheme: 'dark',
+    defaultTheme: 'light',
     themes: {
       light,
-      dark,
+      dark
     }
   },
   icons: {
     defaultSet: 'mdi',
     aliases,
     sets: {
-      mdi,
-    },
-  },
+      mdi
+    }
+  }
 })