Merge pull request #836 from bcgov/813-add-map-marker-to-map-on-search-result-selection

Search Bar Updates

Author: MaxDouglas1991

client/package-lock.json

@@ -19,6 +19,7 @@
         "html2pdf.js": "^0.14.0",
         "jspdf": "^4.1.0",
         "mapbox-gl": "^3.20.0",
+        "proj4": "^2.20.4",
         "quasar": "^2.18.1",
         "reductio": "^1.0.0",
         "vue": "^3.5.13",

client/package.json

@@ -79,7 +79,7 @@ onMounted(() => {
             </a>`,
         })
     );
-    if(props.scaleControl){
+    if (props.scaleControl) {
         map.value.addControl(new mapboxgl.ScaleControl(), "bottom-right");
     }
     // Map Style Control (street || satellite)
@@ -136,11 +136,11 @@ onMounted(() => {
             return;
         }
     };
-    if(props.styleControl){
+    if (props.styleControl) {
         map.value.addControl(mapStyleControl, 'bottom-right');
     }
 
-    if(props.navControl){
+    if (props.navControl) {
         map.value.addControl(new mapboxgl.NavigationControl({ showCompass: true }), 'bottom-right');
     }
     map.value.on("load", () => {

client/src/components/Map.vue

@@ -6,7 +6,7 @@
             </div>
             <p>{{ props.paragraph }}</p>
             <q-card
-                v-if="activePoint && Object.keys(activePoint.properties).length"
+                v-if="activePoint?.properties && Object.keys(activePoint.properties).length"
                 class="selected-point q-pa-sm q-ma-sm"
                 flat
                 bordered
@@ -276,8 +276,8 @@
                                         outlined
                                         @update:model-value="(newval) => {
                                             localFilters.uniqueFilters.yearRange.min = newval;
-                                            if(newval && newval.toString().length === 4){
-                                                if(newval && newval.toString().length === 4){
+                                            if (newval && newval.toString().length === 4) {
+                                                if (newval && newval.toString().length === 4) {
                                                     emit('update-filter', localFilters)
                                                 }
                                             }
@@ -291,7 +291,7 @@
                                         outlined
                                         @update:model-value="(newval) => {
                                             localFilters.uniqueFilters.yearRange.max = newval;
-                                            if(newval && newval.toString().length === 4){
+                                            if (newval && newval.toString().length === 4) {
                                                 emit('update-filter', localFilters)
                                             }
                                         }"
@@ -578,7 +578,7 @@ watch(() => props.selectedPointFromMap, (newval) => {
 });
 
 watch(() => props.filterableProperties, () => {
-    if(!props.filterableProperties || !('matchFilters' in props.filterableProperties) && !('uniqueFilters' in props.filterableProperties)) return;
+    if (!props.filterableProperties || !('matchFilters' in props.filterableProperties) && !('uniqueFilters' in props.filterableProperties)) return;
     localFilters.value = props.filterableProperties;
 
     // add a toggle-able model for the matching-type boolean filters
@@ -594,7 +594,7 @@ watch(() => props.filterableProperties, () => {
     if (props.filterableProperties.uniqueFilters.hasQuantity) {
         localFilters.value.uniqueFilters.quantity = JSON.parse(JSON.stringify(flowRangeDefault));
     }
-    if(props.filterableProperties.uniqueFilters.hasYearRange){
+    if (props.filterableProperties.uniqueFilters.hasYearRange) {
         yearRangeDefault.value = JSON.parse(JSON.stringify(props.filterableProperties.uniqueFilters.yearRange));
     }
 });
@@ -612,23 +612,23 @@ const selectPoint = (item) => {
 
 // search term filtering in sidebar
 const filteredPoints = computed(() => {
-    if(textFilter.value === '' || textFilter.value === null) return props.pointsToShow;
+    if (textFilter.value === '' || textFilter.value === null) return props.pointsToShow;
     return props.pointsToShow.filter((point) => {
-        if(props.page === 'water-portal'){
+        if (props.page === 'water-portal') {
             return (
                 point.properties.id.toString().includes(textFilter.value) ||
                 ('net' in point.properties && point.properties.net.toString().toLowerCase().includes(textFilter.value.toLowerCase())) ||
                 ('area' in point.properties && point.properties.area !== null && point.properties.area.toString().toLowerCase().includes(textFilter.value.toLowerCase())) ||
                 ('name' in point.properties && point.properties.name.toString().toLowerCase().includes(textFilter.value.toLowerCase()))
             )
         }
-        if(props.page === 'groundwater'){
+        if (props.page === 'groundwater') {
             return (
                 ('id' in point.properties && point.properties.id.toString().toLowerCase().includes(textFilter.value.toLowerCase())) ||
                 ('well_tag_no' in point.properties && point.properties.well_tag_no.toString().toLowerCase().includes(textFilter.value.toLowerCase()))
             )
         }
-        if(props.page === 'watershed'){
+        if (props.page === 'watershed') {
             return (
                 point.properties.id.toString().includes(textFilter.value) ||
                 ('lic' in point.properties && point.properties.lic.toString().toLowerCase().includes(textFilter.value.toLowerCase())) ||
@@ -642,45 +642,45 @@ const filteredPoints = computed(() => {
 });
 
 const resetFilters = () => {
-    if(!Object.keys(localFilters.value).length) return;
+    if (!Object.keys(localFilters.value).length) return;
     localFilters.value.matchFilters.forEach(category => {
         category.filters.forEach(filter => {
             filter.model = true;
         });
     });
 
     // special handling for the uniqueFilters categories
-    if(localFilters.value.uniqueFilters.hasArea){
+    if (localFilters.value.uniqueFilters.hasArea) {
         localFilters.value.uniqueFilters.areaRange = areaRangeDefaults;
     }
-    if(localFilters.value.uniqueFilters.hasQuantity){
+    if (localFilters.value.uniqueFilters.hasQuantity) {
         localFilters.value.uniqueFilters.quantity.forEach(el => {
             el.value = true;
         })
     }
-    if(localFilters.value.uniqueFilters.hasYearRange){
+    if (localFilters.value.uniqueFilters.hasYearRange) {
         localFilters.value.uniqueFilters.yearRange = yearRangeDefault.value;
     }
 
     emit('update-filter', localFilters.value);
 };
 
 const clearFilters = () => {
-    if(!Object.keys(localFilters.value).length) return;
+    if (!Object.keys(localFilters.value).length) return;
     localFilters.value.matchFilters.forEach(category => {
         category.filters.forEach(filter => {
             filter.model = false;
         });
     });
-    if(localFilters.value.uniqueFilters.hasQuantity){
+    if (localFilters.value.uniqueFilters.hasQuantity) {
         localFilters.value.uniqueFilters.quantity.forEach(el => {
             el.value = false;
         });
     }
-    if(localFilters.value.uniqueFilters.hasArea){
+    if (localFilters.value.uniqueFilters.hasArea) {
         localFilters.value.uniqueFilters.areaRange = areaRangeDefaults;
     }
-    if(localFilters.value.uniqueFilters.hasYearRange){
+    if (localFilters.value.uniqueFilters.hasYearRange) {
         localFilters.value.uniqueFilters.yearRange = {
             min: '',
             max: ''