Merge pull request #42 from CUAHSI/adjust-map-view

adjusted the map view
CUAHSI · Feb 4, 2025 · 6a65676 · 6a65676
2 parents a866d26 + 10a778a
commit 6a65676
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/frontend/src/components/TheLeafletMap.vue b/frontend/src/components/TheLeafletMap.vue
@@ -59,6 +59,12 @@ onMounted(async () => {
     // query the api for the features
     await mapStore.fetchPerceptualModelsGeojson()
 
+    // Convert to Leaflet LatLngBounds
+    const bounds = L.latLngBounds(mapStore.allAvailableCoordinates);
+
+    // Restrict panning to within bounds
+    leaflet.setMaxBounds(bounds);
+
     // layer toggling
     let mixed = {
         "Perceptual Models": layerGroup,

diff --git a/frontend/src/stores/map.js b/frontend/src/stores/map.js
@@ -12,6 +12,7 @@ export const useMapStore = defineStore('map', () => {
   const perceptualModelsGeojson = ref([])
   const mapLoaded = ref(false)
   let currentFilteredData = ref([])
+  const allAvailableCoordinates = []
   const markerClusterGroup = L.markerClusterGroup({
     iconCreateFunction: (cluster) => {
       const childCount = cluster.getChildCount();
@@ -41,9 +42,8 @@ export const useMapStore = defineStore('map', () => {
     },
   });
 
-  function onEachFeature(feature, layer) {
+  function onEachFeature(feature, layer) {    
     let content = `<h3>Perceptual model of <strong>${feature.properties.location.long_name}</strong></h3>`
-
     if(feature.properties.citation.url) {
       content += '<br>'
       content += '<h4 class="d-inline-block mr-2">URL:</h4>'
@@ -104,6 +104,9 @@ export const useMapStore = defineStore('map', () => {
       content += '<h4>Temporal zone:</h4>'
       content += `${feature.properties.temporal_zone_type.temporal_property}`
     }
+
+    allAvailableCoordinates.push(adjustLatLon(feature.properties.location.lat, feature.properties.location.lon))
+
     layer.bindPopup(content, {
       maxWidth: 400,
       maxHeight: 300,
@@ -183,6 +186,12 @@ export const useMapStore = defineStore('map', () => {
     layerGroup.value.addLayer(markerClusterGroup);
   }
 
+  function adjustLatLon(lat, lon) {
+    return [
+        lat < 0 ? lat - 10 : lat + 10,
+        lon < 0 ? lon - 10 : lon + 10
+  ];
+}
   return {
     leaflet,
     modelFeatures,
@@ -191,6 +200,7 @@ export const useMapStore = defineStore('map', () => {
     fetchPerceptualModelsGeojson,
     filterFeatures,
     resetFilter,
-    currentFilteredData
+    currentFilteredData,
+    allAvailableCoordinates
   }
 })