Don not show the locations icon if no locations are present

src/components/wms/LocationsLayerComponent.vue

@@ -1,11 +1,12 @@
 <template>
   <LocationsLayer
-    v-if="showLocationsLayer"
+    v-if="showLocationsLayer && hasLocations"
     :locationsGeoJson="locationsGeoJson"
     :selectedLocationId="props.locationId"
     @click="onLocationClick"
   />
   <v-chip
+    v-if="hasLocations"
     class="locations-layer__chip"
     :class="{ 'pr-0': showLocationsLayer }"
     pill
@@ -31,7 +32,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, watchEffect } from 'vue'
+import { ref, watch, watchEffect, computed } from 'vue'
 import LocationsSearchControl from './LocationsSearchControl.vue'
 import LocationsLayer from './LocationsLayer.vue'
 import { configManager } from '@/services/application-config'
@@ -81,6 +82,10 @@ watch(locationsGeoJson, () => {
   locations.value = convertGeoJsonToFewsPiLocation(locationsGeoJson.value)
 })
 
+const hasLocations = computed(() => {
+  return locations.value.length > 0
+})
+
 function onLocationClick(event: MapLayerMouseEvent | MapLayerTouchEvent): void {
   if (!event.features) return
   const locationId: string | undefined =

src/lib/topology/locations.ts

@@ -26,10 +26,13 @@ export async function fetchLocationsAsGeoJson(
     ),
   )
   // Merge them into a single GeoJSON.
-  const geojson = allGeoJson.reduce((prev, cur) => {
-    prev.features.concat(cur.features)
-    return prev
-  })
+  const geojson = allGeoJson.reduce(
+    (prev, cur) => {
+      prev.features = prev.features.concat(cur.features)
+      return prev
+    },
+    { type: 'FeatureCollection', features: [] },
+  )
   return geojson
 }