Add marker for place search

Author: MaxDouglas1991

client/src/components/MapSearch.vue

@@ -111,7 +111,6 @@
 <script setup>
 import { getPlaceByNameSearch, getWatershedBySearch, getWatershedLicenceBySearch } from '@/utils/api.js';
 import { ref, onMounted } from 'vue';
-import { env } from '@/env';
 
 const emit = defineEmits(['go-to-location', 'select-point', 'select-watershed', 'place-marker']);
 
@@ -135,12 +134,11 @@ const allSearchOptions = ref([
     { label: 'Place Name', value: 'place' },
     { label: 'Lng/Lat', value: 'coord' }
 ]);
-const searchType = ref(allSearchOptions[0]);
+const searchType = ref(allSearchOptions.value[0].value);
 const searchTerm = ref('');
 const loadingResults = ref(false);
 const searchResults = ref(null);
-const placeholderText = ref('Search');
-const marker = ref(null);
+const placeholderText = ref('Search Term');
 
 onMounted(() => {
     // append the page-specific search options to the default search options
@@ -278,6 +276,7 @@ const selectSearchResult = (result) => {
             center: [ result.longitude, result.latitude],
             zoom: 9
         });
+        emit('place-marker', [result.longitude, result.latitude])
     } else if (searchType.value === 'coord') {
         props.map.flyTo({
             center: [ parseFloat(result[1]), parseFloat(result[0]) ],

client/src/utils/api.js

@@ -5,12 +5,11 @@ import cache from './cache';
 const requestWithErrorCatch = async (url, fetchType) => {
     try{
         const response = await fetch(url);
-        if(response.status === 404){
+        if (response.status === 404) {
             if(fetchType === 'report') throw { message: 'No report data for the selected point. Try selecting another point.' };
             else if (fetchType === 'watershedLookup') throw { message: 'No watershed data for selected point, please ensure you are selecting a point within highlighted region'};
-            throw { message: 'No data found.' }
-        }
-        if(response.status === 500){
+            else if (fetchType !== 'search') throw { message: 'No data found.' };
+        } else if (response.status === 500) {
             if(fetchType === 'report') throw { message: 'There was a problem getting report data. Please try again later. ' };
             throw { message: 'There was a problem fetching data. Please try again later.' };
         }
@@ -33,19 +32,19 @@ export const getAllWatershedLicences = async () => {
 }
 
 export const getWatershedBySearch = async (wfi) => {
-    return await requestWithErrorCatch(`${env.VITE_BASE_API_URL}/watershed/search?wfi=${wfi}`)
+    return await requestWithErrorCatch(`${env.VITE_BASE_API_URL}/watershed/search?wfi=${wfi}`, 'search')
 }
 
 export const getWatershedByWFI = async (wfi) => {
     return await requestWithErrorCatch(`${env.VITE_BASE_API_URL}/watershed/${wfi}`)
 }
 
 export const getWatershedLicenceBySearch = async (licence_no) => {
-    return await requestWithErrorCatch(`${env.VITE_BASE_API_URL}/watershed/licences/search?licence_no=${licence_no}`)
+    return await requestWithErrorCatch(`${env.VITE_BASE_API_URL}/watershed/licences/search?licence_no=${licence_no}`, 'search')
 }
 
 export const getPlaceByNameSearch = async (location_name) => {
-    return await requestWithErrorCatch(`${env.VITE_BASE_API_URL}/watershed/location/search?location_name=${location_name}`)
+    return await requestWithErrorCatch(`${env.VITE_BASE_API_URL}/watershed/location/search?location_name=${location_name}`, 'search')
 }
 
 export const getWatershedByLatLng = async (lngLat) => {
@@ -67,7 +66,7 @@ export const getWaterPortalStations = async (viewType) => {
     else if(viewType === 'surface') response = await getSurfaceWaterStations();
     else if(viewType === 'ground') response = await getGroundWaterQualityStations();
     else if(viewType === 'climate') response = await getClimateStations();
-    return response; 
+    return response;
 }
 
 export const getWaterPortalReportDataByIdAndType = async (id, viewType) => {
@@ -77,7 +76,7 @@ export const getWaterPortalReportDataByIdAndType = async (id, viewType) => {
     else if(viewType === 'surface') response = await getSurfaceWaterReportDataById(id);
     else if(viewType === 'ground') response = await getGroundWaterQualityReportById(id);
     else if(viewType === 'climate') response = await getClimateReportById(id);
-    return response; 
+    return response;
 }
 
 export const getStreamflowStations = async () => {

client/src/utils/mapHelpers.js

@@ -117,17 +117,17 @@ export const createMarker = (marker = null, mapObj, coords) => {
     marker = new mapboxgl.Marker()
         .setLngLat({ lng: coords[0], lat: coords[1]})
         .addTo(mapObj)
-    
+
     return marker
-}
+};
 
 export const goToLocation = (polygon, mapObj) => {
     const boundingBox = bbox(polygon);
     mapObj.fitBounds(boundingBox, { padding: 50 });
 };
 
 /**
- * 
+ *
  * @param viewType the current water portal view type
  * @param points list of points to generate filters from
  * @returns {Object} filterable properties object
@@ -203,7 +203,7 @@ export const getFilterablePropertiesByViewType = (viewType, points) => {
         min: Math.min(...min),
         max: Math.max(...max)
     }
-    
+
     if(viewType === 'streams') {
         defaultFilters.uniqueFilters.hasArea = true;
     }