All requested changes have been made and are working, all that there …

…now is testing and adding the local source for the map.

package.json

@@ -16,8 +16,6 @@
     "@maptiler/sdk": "^2.4.1",
     "@tresjs/cientos": "^4.0.3",
     "@tresjs/core": "^4.3.1",
-    "@types/geojson": "^7946.0.14",
-    "@types/leaflet": "^1.9.14",
     "leaflet": "^1.9.4",
     "pinia": "^2.2.5",
     "roslib": "^1.4.1",
@@ -28,6 +26,8 @@
   },
   "devDependencies": {
     "@eslint/compat": "^1.2.2",
+    "@types/geojson": "^7946.0.16",
+    "@types/leaflet": "^1.9.16",
     "@types/roslib": "^1.3.5",
     "@types/three": "^0.170.0",
     "@vitejs/plugin-vue": "^4.6.2",

src/components/map/InteractiveMap.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="map-wrap">
+    <div class="map" ref="mapContainer"></div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.map-wrap {
+  position: relative;
+  width: 100%;
+  height: calc(100vh - 77px); // calculate height of the screen minus the heading
+}
+
+.map {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+<script lang="ts" setup>
+import { Map, MapStyle, config, Marker, Popup } from '@maptiler/sdk';
+import { shallowRef, onMounted, onUnmounted, markRaw } from 'vue';
+import '@maptiler/sdk/dist/maptiler-sdk.css';
+
+const mapContainer = shallowRef<HTMLElement | null>(null);
+const map = shallowRef<Map | null>(null);
+
+onMounted(() => {
+  config.apiKey = 'Q7DDIQDDZYYErXyqd3qb';
+
+  // Set initial coordinates to a point in the Utah Desert
+  const initialState = { lng: -111.950684, lat: 39.41922, zoom: 14 };
+
+  map.value = markRaw(
+    new Map({
+      container: mapContainer.value as HTMLElement,
+      style: MapStyle.SATELLITE,
+      center: [initialState.lng, initialState.lat],
+      zoom: initialState.zoom,
+    }),
+  );
+});
+
+onUnmounted(() => {
+  map.value?.remove();
+});
+
+function addPin(lat: number, lng: number): void {
+  if (map.value) {
+    const timestamp = new Date().toISOString();
+    const popupContent = `Latitude: ${lat}<br>Longitude: ${lng}<br>Timestamp: ${timestamp}`;
+
+    const popup = new Popup().setHTML(popupContent);
+
+    new Marker().setLngLat([lng, lat]).setPopup(popup).addTo(map.value);
+  }
+}
+</script>

src/pages/Map.vue

@@ -1,59 +1,20 @@
+<script setup lang="ts">
+import InteractiveMap from '@/components/map/InteractiveMap.vue';
+</script>
+
 <template>
-  <div class="map-wrap">
-    <div class="map" ref="mapContainer"></div>
+  <div class="two-by-three-grid-page">
+    <InteractiveMap />
+    <h1>Not yet Implemented</h1>
+    <h1>Not yet Implemented</h1>
   </div>
 </template>
 
-<script lang="ts" setup>
-import { Map, MapStyle, config, Marker, Popup } from '@maptiler/sdk';
-import { shallowRef, onMounted, onUnmounted, markRaw } from 'vue';
-import '@maptiler/sdk/dist/maptiler-sdk.css';
-
-const mapContainer = shallowRef<HTMLElement | null>(null);
-const map = shallowRef<Map | null>(null);
-
-onMounted(() => {
-  config.apiKey = 'Q7DDIQDDZYYErXyqd3qb';
-
-  // Set initial coordinates to a point in the Utah Desert
-  const initialState = { lng: -111.950684, lat: 39.41922, zoom: 14 };
-
-  map.value = markRaw(
-    new Map({
-      container: mapContainer.value as HTMLElement,
-      style: MapStyle.SATELLITE,
-      center: [initialState.lng, initialState.lat],
-      zoom: initialState.zoom,
-    }),
-  );
-});
-
-onUnmounted(() => {
-  map.value?.remove();
-});
-
-function addPin(lat: number, lng: number): void {
-  if (map.value) {
-    const timestamp = new Date().toISOString();
-    const popupContent = `Latitude: ${lat}<br>Longitude: ${lng}<br>Timestamp: ${timestamp}`;
-
-    const popup = new Popup().setHTML(popupContent);
-
-    new Marker().setLngLat([lng, lat]).setPopup(popup).addTo(map.value);
-  }
-}
-</script>
-
 <style lang="scss" scoped>
-.map-wrap {
-  position: relative;
-  width: 100%;
-  height: calc(100vh - 77px); // calculate height of the screen minus the heading
-}
-
-.map {
-  position: absolute;
-  width: 100%;
+#map {
   height: 100%;
+  width: 100%;
+  grid-column: 1 / span 2;
+  grid-row: 1 / span 2;
 }
 </style>