Cam 1166 1178

frontend/package.json

@@ -27,6 +27,7 @@
     "leaflet": "^1.9.4",
     "leaflet-draw": "^1.0.2",
     "leaflet-easybutton": "^2.4.0",
+    "leaflet-groupedlayercontrol": "^0.6.1",
     "leaflet-iconmaterial": "^1.1.0",
     "leaflet.markercluster": "^1.5.3",
     "papaparse": "^5.4.1",

frontend/src/App.vue

@@ -45,12 +45,16 @@ let showMobileNavigation = ref(false)
 const paths = [
   {
     attrs: { to: '/' },
-    label: 'Map'
+    label: 'Home'
+  },
+  {
+    attrs: { to: '/map' },
+    label: 'Database'
+  },
+  {
+    attrs: { to: '/world-map' },
+    label: 'Provinces'
   },
-  // {
-  //   attrs: { to: "/api" },
-  //   label: "API",
-  // },
   {
     attrs: { to: '/about' },
     label: 'About'
@@ -61,7 +65,6 @@ function toggleMobileNav() {
   showMobileNavigation.value = !showMobileNavigation.value
 }
 </script>
-
 <style scoped>
 header {
   line-height: 1.5;

frontend/src/components/TheAppBar.vue

@@ -33,8 +33,7 @@
       </v-card>
       <v-spacer></v-spacer>
       <!-- <UserLogin @logged-in="login" v-if="!mdAndDown" :mobile="false" /> -->
-
-      <!-- <v-app-bar-nav-icon @click="$emit('toggleMobileNav')" v-else /> -->
+      <v-app-bar-nav-icon @click="$emit('toggleMobileNav')" v-if="mdAndDown" />
     </div>
   </v-app-bar>
 </template>
@@ -47,6 +46,9 @@ const { mdAndDown } = useDisplay()
 </script>
 
 <style lang="scss" scoped>
+.v-app-bar {
+  z-index: 1100 !important;
+}
 .v-toolbar.v-app-bar--is-scrolled > .v-toolbar__content > .container {
   align-items: center !important;
   will-change: padding;
@@ -55,24 +57,24 @@ const { mdAndDown } = useDisplay()
 }
 
 .nav-items {
-  border-radius: 2rem !important;
+  border-radius: 0 !important;
   overflow: hidden;
   position: absolute;
   left: 43%;
 
   & > a.v-btn:first-child {
-    border-top-left-radius: 2rem !important;
-    border-bottom-left-radius: 2rem !important;
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
   }
 
   & > a.v-btn:last-child {
-    border-top-right-radius: 2rem !important;
-    border-bottom-right-radius: 2rem !important;
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
   }
 
   .v-btn {
     margin: 0;
-    border-radius: 0;
+    border-radius: 0 !important;
     height: 39px !important;
   }
 }

frontend/src/components/TheLeafletMap.vue

@@ -40,6 +40,8 @@ onUpdated(() => {
 
 onMounted(async () => {
   mapStore.leaflet = L.map('mapContainer', { minZoom: 2 }).setView([0, 11], 2)
+
+  // Use default zoom control position (topleft)
   mapStore.layerGroup = new L.LayerGroup()
   mapStore.layerGroup.addTo(mapStore.leaflet)
 

frontend/src/router/index.js

@@ -1,14 +1,19 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
-import MapView from '../views/MapView.vue'
+// import MapView from '../views/MapView.vue'
 import ApiView from '../views/ApiView.vue'
 
 const router = createRouter({
   history: createWebHashHistory(),
   routes: [
     {
       path: '/',
+      name: 'index',
+      component: () => import('../views/IndexView.vue')
+    },
+    {
+      path: '/map',
       name: 'map',
-      component: MapView,
+      component: () => import('../views/MapView.vue'),
       meta: {
         showMap: true
       }
@@ -25,6 +30,11 @@ const router = createRouter({
       path: '/api',
       name: 'api',
       component: ApiView
+    },
+    {
+      path: '/world-map',
+      name: 'world-map',
+      component: () => import('../views/ProvincesMapView.vue')
     }
   ]
 })

frontend/src/views/IndexView.vue

@@ -0,0 +1,169 @@
+<template>
+  <v-container class="fill-height d-flex flex-column justify-center align-center">
+    <!-- Header Panel -->
+    <v-card
+      class="pa-8 header-panel header-panel-white rounded-xl"
+      elevation="8"
+      style="margin-bottom: 0 !important"
+    >
+      <div class="d-flex flex-column align-start">
+        <h6 class="header-panel-welcome">Welcome</h6>
+      </div>
+
+      <h1 class="mb-2 header-panel-black">Hydrological Process Knowledge Hub</h1>
+      <div class="text-h6 header-panel-black">
+        This platform connects two complementary efforts: a global database of perceptual models and
+        a province-scale synthesis of hydrological landscapes in North America. Together they
+        support process understanding across site and regional scales.
+      </div>
+    </v-card>
+
+    <v-row
+      class="d-flex justify-center align-center w-100"
+      style="max-width: 1200px; margin: 0 auto; margin-top: 32px"
+    >
+      <!-- Map Link Panel -->
+      <v-col cols="12" md="6">
+        <router-link :to="{ name: 'map' }" class="panel-link" style="text-decoration: none">
+          <v-card class="pa-2 link-panel rounded-xl" elevation="4">
+            <p class="nsf-button">NSF Supported</p>
+            <h3 class="mb-2">Hydrological Process Database</h3>
+            <h6 class="panel-caption">
+              Curated process evidence based perceptual models from published studies
+            </h6>
+            <p></p>
+            <h6>
+              The Database page provides searchable, filterable records for site-level hydrological
+              processes and related perceptual model information.
+            </h6>
+          </v-card>
+        </router-link>
+      </v-col>
+      <!-- World Map Link Panel -->
+      <v-col cols="12" md="6">
+        <router-link :to="{ name: 'world-map' }" class="panel-link" style="text-decoration: none">
+          <v-card class="pa-2 text-center link-panel rounded-xl" elevation="4">
+            <p class="nsf-button">CIROH Supported</p>
+            <h3 class="mb-2">Hydrologic Provinces and Perceptual Models</h3>
+            <h6 class="panel-caption">
+              Thirty five North American provinces grouped by dominant processes and drivers
+            </h6>
+            <h6>
+              The province page presents hydrological landscape regions each linked to distinct
+              perceptual model informed by climate and geophysical conrols.
+            </h6>
+          </v-card>
+        </router-link>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup>
+// No script needed
+</script>
+
+<style scoped>
+.gradient-bg {
+  background: linear-gradient(to bottom, #f8f9fa 0%, #e9ecef 100%);
+  min-height: 100vh;
+}
+.panel-caption {
+  font-size: 0.72rem;
+  color: #444;
+  font-weight: 400;
+  margin-bottom: 2px;
+  margin-top: -2px;
+  letter-spacing: 0.1px;
+}
+.nsf-button {
+  align-self: flex-start;
+  display: inline-block;
+  padding: 2px 10px;
+  margin-bottom: 6px;
+  background-color: #f3f4f6;
+  color: #1976d2;
+  border: none;
+  border-radius: 14px;
+  font-size: 0.82rem;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+  box-shadow: 0 2px 8px rgba(25, 118, 210, 0.1);
+  cursor: pointer;
+  transition:
+    background 0.2s,
+    box-shadow 0.2s;
+  text-align: center;
+}
+.nsf-button:hover,
+.nsf-button:focus {
+  background-color: #e3e7ef;
+  color: #1565c0;
+  box-shadow: 0 4px 16px rgba(25, 118, 210, 0.18);
+}
+.fill-height {
+  .header-panel h1,
+  .header-panel h6,
+  .header-panel .text-h6,
+  .header-panel p {
+    text-align: left !important;
+  }
+  min-height: 100vh;
+}
+.header-panel {
+  min-width: 320px;
+  max-width: 1200px;
+}
+.panel-link {
+  display: block;
+  height: 100%;
+}
+.panel-link .v-card {
+  min-height: 140px;
+  max-height: 220px;
+  height: 250px;
+  overflow: auto;
+  min-width: 80px;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  transition:
+    box-shadow 0.2s,
+    transform 0.2s;
+  cursor: pointer;
+  overflow: auto;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  text-overflow: ellipsis;
+}
+
+.panel-link .v-card h2,
+.panel-link .v-card h5,
+.panel-link .v-card h6,
+.panel-link .v-card p {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: normal;
+  word-break: break-word;
+  text-align: left;
+}
+.panel-link:hover .v-card,
+.panel-link:focus .v-card {
+  box-shadow: 0 8px 32px rgba(33, 150, 243, 0.18);
+  transform: translateY(-2px) scale(1.01);
+}
+.v-row {
+  align-items: stretch !important;
+}
+.header-panel-white {
+  background: #fff !important;
+}
+.header-panel-black {
+  color: #222 !important;
+}
+.header-panel-welcome {
+  color: #1976d2 !important;
+  font-weight: 700 !important;
+}
+</style>