Cleanup and change to orange

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

Hide file tree

Showing 3 changed files with 16 additions and 36 deletions.
diff --git a/frontend/src/common/mapbox/layers.js b/frontend/src/common/mapbox/layers.js
@@ -298,7 +298,7 @@ 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
+// 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, {
@@ -310,12 +310,14 @@ export function wellsBaseLayer (options = {}) {
 
   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
+// 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': '#EE14CA',
-    'circle-radius': 5.5,
+    '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)
@@ -486,7 +488,7 @@ export function wellLayerFilter (showUnpublishedWells) {
   ]
 }
 
-export function wellFilterId (id) {
+export function wellFilterOutId (id) {
   return ['!', ['==', ['get', 'well_tag_number'], id]]
 }
 

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,6 +20,7 @@ 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,
@@ -33,7 +34,8 @@ import {
   WELLS_SOURCE,
   wellsBaseLayer,
   highlightedWellsLayer,
-  wellFilterId
+  wellLayerFilter,
+  wellFilterOutId
 } from '../../common/mapbox/layers'
 import { setupFeatureTooltips } from '../../common/mapbox/popup'
 import { createWellPopupElement } from '../popup'
@@ -66,6 +68,9 @@ export default {
     this.map.remove()
     this.map = null
   },
+  computed: {
+    ...mapGetters(['userRoles']),
+  },
   methods: {
     initMapBox () {
       if (!mapboxgl.supported()) {
@@ -90,8 +95,8 @@ export default {
           layers: [
             DATABC_ROADS_LAYER,
             DATABC_CADASTREL_LAYER,
-            wellsBaseLayer({ filter: wellFilterId(this.id) }),
-            highlightedWellsLayer({ filter: ['!', wellFilterId(this.id)] })
+            wellsBaseLayer({ filter: ['all', wellFilterOutId(this.id),  wellLayerFilter(Boolean(this.userRoles.wells.edit))] }),
+            highlightedWellsLayer({ filter: ['!', wellFilterOutId(this.id)] })
           ]
         }
       }
@@ -114,36 +119,8 @@ 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)
-
           this.map.setZoom(12)
         }