feat(frontend): add well layer to Well Detail map (#215)

bcgov · Nov 27, 2024 · 61c3a8a · 61c3a8a
1 parent 916bdae
commit 61c3a8a
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 16 deletions.
diff --git a/frontend/src/common/mapbox/layers.js b/frontend/src/common/mapbox/layers.js
@@ -9,6 +9,8 @@ export const WELLS_UNCORRELATED_LAYER_ID = 'wells-uncorrelated'
 export const WELLS_EMS_LAYER_ID = 'wells-ems'
 export const WELLS_OBSERVATION_LAYER_ID = 'wells-observation'
 
+export const HIGHLIGHTED_WELL_LAYER_ID = 'highlighted-wells'
+
 export const SEARCHED_WELLS_SOURCE_ID = 'searched-wells'
 export const SEARCHED_WELLS_LAYER_ID = 'highlight-wells-with-artesian'
 
@@ -296,6 +298,32 @@ export function wellsBaseAndArtesianLayer (options = {}) {
 
   return vectorLayerConfig(layerId, options.source || WELLS_SOURCE_ID, options.layerType || 'circle', styles, options.layout, filter)
 }
+// Builds Mapbox layer config object for wells using a single color
+export function wellsBaseLayer (options = {}) {
+  const layerId = options.id || WELLS_BASE_AND_ARTESIAN_LAYER_ID
+  const styles = defaultsDeep(options.styles, {
+    'circle-color': '#0162FE',
+    'circle-radius': 3,
+  })
+
+  const filter = options.filter || wellLayerFilter(false)
+
+  return vectorLayerConfig(layerId, options.source || WELLS_SOURCE_ID, options.layerType || 'circle', styles, options.layout, filter)
+}
+// Builds Mapbox layer config object, meant to go with above layer, to highlight a well(s)
+export function highlightedWellsLayer (options = {}) {
+  const layerId = options.id || HIGHLIGHTED_WELL_LAYER_ID
+  const styles = defaultsDeep(options.styles, {
+    'circle-color': '#0162FE',
+    'circle-radius': 3,
+    'circle-stroke-color': '#FF5C00', // a shade of "neon orange"
+    'circle-stroke-width': 3
+  })
+
+  const filter = options.filter || wellLayerFilter(false)
+
+  return vectorLayerConfig(layerId, options.source || WELLS_SOURCE_ID, options.layerType || 'circle', styles, options.layout, filter)
+}
 // Builds MapBox layer config object for wells with aquifer parameters with a green outline
 export function wellsAquiferParameters (options = {}) {
   const layerId = options.id || WELLS_AQUIFER_PARAMETER_LAYER_ID
@@ -460,6 +488,10 @@ export function wellLayerFilter (showUnpublishedWells) {
   ]
 }
 
+export function wellFilterOutId (id) {
+  return ['!', ['==', ['get', 'well_tag_number'], id]]
+}
+
 export function aquiferLayerFilter (showUnpublishedAquifers, showRetiredAquifers) {
   return [
     'case',

diff --git a/frontend/src/common/mapbox/popup.js b/frontend/src/common/mapbox/popup.js
@@ -103,7 +103,7 @@ export function popupItem (item, $router, options = {}) {
     if (item.url || item.route) {
       // { name: 'aquifers-view', params: { id: aquiferId } }
       if (canInteract) {
-        const anchor = popupLink(item.url || item.route, $router, item.text)
+        const anchor = popupLink(item.url || item.route, $router, item.text, options.openInNewTab)
         li.appendChild(anchor)
       } else {
         li.appendChild(document.createTextNode(item.text))
@@ -128,21 +128,25 @@ export function popupItem (item, $router, options = {}) {
 }
 
 // Creates an HTML anchor to a Vue route or URL
-export function popupLink (route, $router, text) {
+export function popupLink (route, $router, text, openInNewTab) {
   const anchor = document.createElement('a')
   let url = route
 
   if (typeof route === 'string') {
-    if (url && url.startsWith('http')) {
+    if ((url && url.startsWith('http')) || openInNewTab) {
       anchor.setAttribute('target', '_blank')
     }
   } else {
     url = $router.resolve(route).href
-    anchor.onclick = (e) => {
-      if (!e.ctrlKey) {
-        e.preventDefault()
-        // The catch statement prevents duplicate route errors
-        $router.push(route).catch(()=>{})
+    if (openInNewTab) {
+      anchor.setAttribute('target', '_blank')
+    } else {
+      anchor.onclick = (e) => {
+        if (!e.ctrlKey) {
+          e.preventDefault()
+          // The catch statement prevents duplicate route errors
+          $router.push(route).catch(()=>{})
+        }
       }
     }
   }

diff --git a/frontend/src/wells/components/SearchMap.vue b/frontend/src/wells/components/SearchMap.vue
@@ -379,6 +379,7 @@ export default {
     createWellPopupElement (features, { canInteract }) {
       return createWellPopupElement(features, this.map, this.$router, {
         canInteract,
+        openInNewTab: true,
         wellLayerIds: [
           WELLS_BASE_AND_ARTESIAN_LAYER_ID,
           SEARCHED_WELLS_LAYER_ID

diff --git a/frontend/src/wells/components/SingleWellMap.vue b/frontend/src/wells/components/SingleWellMap.vue
@@ -20,16 +20,25 @@ Licensed under the Apache License, Version 2.0 (the "License");
 <script>
 import mapboxgl from 'mapbox-gl'
 import GestureHandling from '@geolonia/mbgl-gesture-handling'
+import { mapGetters } from 'vuex'
 
 import {
   DATABC_ROADS_SOURCE,
   DATABC_CADASTREL_SOURCE,
   DATABC_ROADS_SOURCE_ID,
   DATABC_CADASTREL_SOURCE_ID,
   DATABC_ROADS_LAYER,
-  DATABC_CADASTREL_LAYER
+  DATABC_CADASTREL_LAYER,
+  WELLS_BASE_AND_ARTESIAN_LAYER_ID,
+  WELLS_SOURCE_ID,
+  WELLS_SOURCE,
+  wellsBaseLayer,
+  highlightedWellsLayer,
+  wellLayerFilter,
+  wellFilterOutId
 } from '../../common/mapbox/layers'
-import { buildLeafletStyleMarker } from '../../common/mapbox/images'
+import { setupFeatureTooltips } from '../../common/mapbox/popup'
+import { createWellPopupElement } from '../popup'
 
 export default {
   name: 'SingleWellMap',
@@ -39,6 +48,9 @@ export default {
     },
     longitude: {
       type: Number
+    },
+    id: {
+      type: String
     }
   },
   data () {
@@ -56,6 +68,9 @@ export default {
     this.map.remove()
     this.map = null
   },
+  computed: {
+    ...mapGetters(['userRoles']),
+  },
   methods: {
     initMapBox () {
       if (!mapboxgl.supported()) {
@@ -74,11 +89,14 @@ export default {
           version: 8,
           sources: {
             [DATABC_ROADS_SOURCE_ID]: DATABC_ROADS_SOURCE,
-            [DATABC_CADASTREL_SOURCE_ID]: DATABC_CADASTREL_SOURCE
+            [DATABC_CADASTREL_SOURCE_ID]: DATABC_CADASTREL_SOURCE,
+            [WELLS_SOURCE_ID]: WELLS_SOURCE,
           },
           layers: [
             DATABC_ROADS_LAYER,
-            DATABC_CADASTREL_LAYER
+            DATABC_CADASTREL_LAYER,
+            wellsBaseLayer({ filter: ['all', wellFilterOutId(this.id),  wellLayerFilter(Boolean(this.userRoles.wells.edit))] }),
+            highlightedWellsLayer({ filter: ['!', wellFilterOutId(this.id)] })
           ]
         }
       }
@@ -103,11 +121,22 @@ export default {
 
       this.map.on('load', () => {
         if (this.longitude && this.latitude) {
-          buildLeafletStyleMarker(this.longitude, this.latitude).addTo(this.map)
-
           this.map.setZoom(12)
         }
 
+        const tooltipLayers = {
+          [WELLS_BASE_AND_ARTESIAN_LAYER_ID]: {
+            snapToCenter: true,
+            createTooltipContent: (features) => createWellPopupElement(
+              features,
+              this.map,
+              this.$router,
+              { canInteract: true, openInNewTab: true }
+            )
+          }
+        }
+        setupFeatureTooltips(this.map, tooltipLayers)
+
         this.$emit('mapLoaded')
       })
     }

diff --git a/frontend/src/wells/popup.js b/frontend/src/wells/popup.js
@@ -3,6 +3,7 @@ import { popupItems } from '../common/mapbox/popup'
 
 export function createWellPopupElement (features, map, $router, options = {}) {
   const canInteract = Boolean(options.canInteract)
+  const openInNewTab = Boolean(options.openInNewTab)
   const wellLayerIds = options.wellLayerIds || [ WELLS_BASE_AND_ARTESIAN_LAYER_ID ]
 
   // Filter the features to only the well layers we care about
@@ -35,5 +36,5 @@ export function createWellPopupElement (features, map, $router, options = {}) {
     }
   ]
 
-  return popupItems(items, $router, { className: 'mapbox-popup-well', canInteract })
+  return popupItems(items, $router, { className: 'mapbox-popup-well', canInteract, openInNewTab })
 }
diff --git a/frontend/src/wells/views/WellDetail.vue b/frontend/src/wells/views/WellDetail.vue
@@ -208,7 +208,7 @@ Licensed under the Apache License, Version 2.0 (the "License");
               </b-row>
             </b-col>
             <b-col cols="12" md="6" xl="6" offset-xl="1">
-              <single-well-map :latitude="well.latitude" :longitude="well.longitude"/>
+              <single-well-map :latitude="well.latitude" :longitude="well.longitude" :id="well.well_tag_number"/>
               <div class="font-weight-bold mt-5">
                 Geographic Coordinates - North American Datum of 1983 (NAD 83)
               </div>