Merge pull request #77 from ua-snap/adaptive_map_cursor

Change cursor to "not allowed" when hovering over nonclickable area

README.md

@@ -11,7 +11,7 @@ Data for this project was provided in CSV format. This repo includes a preproces
 - Omit blank and infinite values
 - Optimize data by removing unused fields and rounding to sensible digits
 
-To generate the needed JSON files, download the five CSV data files from [Google Drive](https://drive.google.com/drive/folders/1hrGuRmQtx-gTepN_H9BEfcGmnl5MCeAK?usp=sharing) and store them in `scripts/input`. Then run the following commands to convert them to JSON:
+To generate the needed JSON files, download the five CSV data files from [Google Drive](https://drive.google.com/drive/folders/1hBjKEYzRPY7qQlbnqyMaYRMZSuMtIABB?usp=sharing) and store them in `scripts/input`. Then run the following commands to convert them to JSON:
 
 ```
 cd scripts
@@ -21,6 +21,36 @@ pipenv install
 
 The JSON files will appear in the `assets` subdirectory of this repo, where they will be imported by the Pinia store.
 
+### Generate AOI boundary and shadowmask
+
+The map component of this webapp uses a boundary GeoJSON file to determine the clickable area and adjust the mouse cursor accordingly. A shadow mask of the boundary is also loaded as a layer into the map make the unclickable areas darker.
+
+To generate both the boundary and shadowmask files, first download the AOI shapefile (ZIP) from [Google Drive](https://drive.google.com/drive/folders/1hBjKEYzRPY7qQlbnqyMaYRMZSuMtIABB?usp=sharing) and extract it into the `scripts/input` directory.
+
+#### Generate the boundary GeoJSON file
+
+```
+cd scripts
+pipenv install
+./boundary.py
+```
+
+The boundary GeoJSON file will appear in `assets/boundary.json`.
+
+#### Generate the boundary shadow mask shapefile
+
+Clone the [geospatial-vector-veracity](https://github.com/ua-snap/geospatial-vector-veracity) repo, then run:
+
+```
+cd geospatial-vector-veracity/utilities
+pipenv install
+pipenv run python symmetric_difference.py ../serdp-fish-and-fire/scripts/input/AOI_v2_1.shp \
+--bounds -180 -90 180 90 'SERDP Fish and Fire AOI shadow mask' 'AOI_v2_1_shadowmask' \
+AOI_v2_1_shadowmask.shp preview.png
+```
+
+The `AOI_v2_1_shadowmask` shapefile then needs to be uploaded to our GeoServer and added as a store and layer.
+
 ### Run the app
 
 ```

components/Map.vue

@@ -11,17 +11,23 @@
 :deep(path.leaflet-interactive:focus) {
   outline: none;
 }
+.leaflet-container {
+  cursor: not-allowed !important;
+}
 </style>
 
 <script setup lang="ts">
 import { useStore } from '~/stores/store'
+import boundaryJson from '~/assets/boundary.json'
+
 const { $turfArea } = useNuxtApp()
 const store = useStore()
 
 var map = undefined // Leaflet map object
 var polygonBounds = undefined
 var maxBounds = undefined
 var layerGroup = new L.LayerGroup()
+var boundaryLayer = undefined
 var shadowMask = undefined
 
 const resultMapFeature = ref(undefined)
@@ -126,17 +132,25 @@ onMounted(() => {
 })
 
 const addMapHandlers = () => {
-  map.on('click', e => {
-    if (!selectedArea.value) {
-      layerGroup.addTo(map)
-      store.fetchIntersectingAreas(e.latlng.lat, e.latlng.lng).then(() => {
-        if (store.matchedAreas.length > 0) {
-          map.off('click')
-          addMatchedAreas()
+  boundaryLayer = L.geoJSON(boundaryJson, {
+    onEachFeature: function (feature, layer) {
+      layer.on('click', e => {
+        if (!selectedArea.value) {
+          layerGroup.addTo(map)
+          store.fetchIntersectingAreas(e.latlng.lat, e.latlng.lng).then(() => {
+            if (store.matchedAreas.length > 0) {
+              boundaryLayer.off('click')
+              addMatchedAreas()
+            }
+          })
         }
       })
-    }
-  })
+    },
+    style: {
+      opacity: 0.0,
+      fillOpacity: 0.0,
+    },
+  }).addTo(map)
 }
 
 const addMatchedAreas = () => {

scripts/.gitignore

@@ -1,2 +1,2 @@
-input/*.csv
+input/
 output/

scripts/Pipfile

@@ -5,6 +5,7 @@ name = "pypi"
 
 [packages]
 pandas = "*"
+geopandas = "*"
 
 [dev-packages]
 

scripts/boundary.py

@@ -0,0 +1,14 @@
+#!/usr/bin/env python
+import geopandas as gpd
+from shapely.ops import unary_union
+
+# Read shapefile of all 300+ AOIs.
+gdf = gpd.read_file("input/AOI_v2_1.shp")
+
+# Get the boundary (perimeter) of entire set of AOIs.
+gdf = gpd.GeoDataFrame(
+    gpd.GeoSeries(unary_union(gdf.geometry.values)), columns=["geometry"]
+)
+
+# Write boundary as GeoJSON format for use with Leaflet.
+gdf.to_file("../assets/boundary.json")

scripts/input/README.md

@@ -1 +1 @@
-Download CSV files from [Google Drive](https://drive.google.com/drive/folders/1hrGuRmQtx-gTepN_H9BEfcGmnl5MCeAK?usp=sharing) into this folder.
+Download CSV and AOI files from [Google Drive](https://drive.google.com/drive/folders/1hBjKEYzRPY7qQlbnqyMaYRMZSuMtIABB?usp=sharing) into this folder.