More flexible layers (#17)

vacs-map-app/src/App.vue

@@ -1,21 +1,71 @@
 <template>
   <main>
-    <BaseMap />
-    <div class="overlay">
+    <div class="top-bar">
+      <select v-model="selectedMap">
+        <option v-for="map in availableMaps" :value="map.id">{{ map.name }}</option>
+      </select>
       <Filters />
     </div>
+    <component :is="selectedMapComponent" />
   </main>
 </template>
 
 <script setup>
-import BaseMap from '@/components/BaseMap.vue';
+import { computed, ref } from 'vue';
+import MapContainerColor from '@/components/MapContainerColor.vue';
+import MapContainerColorRadius from '@/components/MapContainerColorRadius.vue';
+import MapContainerNotFilled from '@/components/MapContainerNotFilled.vue';
+import MapContainerNotFilledTwoLayers from '@/components/MapContainerNotFilledTwoLayers.vue';
 import Filters from '@/components/Filters.vue';
+
+const availableMaps = [
+  {
+    id: 'just-color',
+    name: 'dynamic color',
+    component: MapContainerColor,
+  },
+  {
+    id: 'color-and-radius-1',
+    name: 'dynamic color and radius (cropyield)',
+    component: MapContainerColorRadius,
+  },
+  {
+    id: 'not-filled',
+    name: 'circles not filled',
+    component: MapContainerNotFilled,
+  },
+  {
+    id: 'not-filled-2',
+    name: 'circles not filled, two layers',
+    component: MapContainerNotFilledTwoLayers,
+  },
+];
+const selectedMap = ref(availableMaps[0].id);
+const selectedMapComponent = computed(() => {
+  return availableMaps.find(({ id }) => id === selectedMap.value).component;
+});
 </script>
 
 <style scoped>
+main {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+}
+
+.top-bar {
+  padding: 0.5rem 2rem;
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  align-items: center;
+}
+
 .overlay {
   position: absolute;
   left: 1rem;
-  top: 1rem;
+  top: 3rem;
 }
 </style>

vacs-map-app/src/components/BaseMap.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="base-map-wrapper">
     <div id="baseMapContainer" class="base-map"></div>
-    <GridOverlay :map="map" :mapReady="mapReady" />
+    <slot :map="map" :map-ready="mapReady"></slot>
   </div>
 </template>
 
@@ -14,7 +14,6 @@ import {
   MAPBOX_GL_ACCESS_TOKEN,
   MAPBOX_STYLE,
 } from '@/constants';
-import GridOverlay from './GridOverlay.vue';
 
 const map = shallowRef(null);
 const mapReady = ref(false);
@@ -45,8 +44,11 @@ onMounted(() => {
 </script>
 
 <style scoped>
+.base-map-wrapper {
+  flex-grow: 1;
+}
+
 .base-map {
-  height: 100vh;
-  width: 100vw;
+  height: 100%;
 }
 </style>

vacs-map-app/src/components/Filters.vue

@@ -57,10 +57,8 @@ const {
 
 <style scoped>
 .filters {
-  background: white;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   gap: 0.5rem;
-  padding: 1rem;
 }
 </style>