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

bcgov · Nov 26, 2024 · 1d591d3 · 1d591d3
1 parent 24ac1d3
commit 1d591d3
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 15 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,30 @@ export function wellsBaseAndArtesianLayer (options = {}) {
 
   return vectorLayerConfig(layerId, options.source || WELLS_SOURCE_ID, options.layerType || 'circle', styles, options.layout, filter)
 }
+// Same function as above, but using one color for all wells
+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)
+}
+// Same as above, with different id, color, and dot size
+export function highlightedWellsLayer (options = {}) {
+  const layerId = options.id || HIGHLIGHTED_WELL_LAYER_ID
+  const styles = defaultsDeep(options.styles, {
+    'circle-color': '#EE14CA',
+    'circle-radius': 5.5,
+  })
+
+  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 +486,10 @@ export function wellLayerFilter (showUnpublishedWells) {
   ]
 }
 
+export function wellFilterId (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/SingleWellMap.vue b/frontend/src/wells/components/SingleWellMap.vue
@@ -27,9 +27,16 @@ import {
   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,
+  wellFilterId
 } 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 +46,9 @@ export default {
     },
     longitude: {
       type: Number
+    },
+    id: {
+      type: String
     }
   },
   data () {
@@ -74,11 +84,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: wellFilterId(this.id) }),
+            highlightedWellsLayer({ filter: ['!', wellFilterId(this.id)] })
           ]
         }
       }
@@ -101,13 +114,52 @@ export default {
         customAttribution: 'MapBox | Government of British Columbia, DataBC, GeoBC '
       }))
 
+      /*
+      const layers = [{
+        show: true,
+        id: WELLS_BASE_AND_ARTESIAN_LAYER_ID,
+        label: 'Wells',
+        legend: [
+          {
+            imageSrc: wellsAllLegendSrc,
+            label: 'all'
+          },
+          {
+            imageSrc: wellsArtesianLegendSrc,
+            label: 'artesian'
+          },
+          {
+            imageSrc: wellsClosedLegendSrc,
+            label: 'closed/abandoned'
+          }
+        ],
+      }]
+      this.legendControl = new LegendControl({
+        layers: layers
+      })
+      this.map.addControl(this.legendControl, 'bottom-right')
+      */
+
       this.map.on('load', () => {
         if (this.longitude && this.latitude) {
-          buildLeafletStyleMarker(this.longitude, this.latitude).addTo(this.map)
+          // 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>