fix: execute init poi layer on feature watcher #480

components/MainMap/MapFeatures.vue

@@ -4,15 +4,14 @@ import type { MultiPolygon, Polygon } from 'geojson'
 import debounce from 'lodash.debounce'
 import type {
   FitBoundsOptions,
-  GeoJSONSource,
   LngLatBounds,
   Map,
   MapDataEvent,
   MapGeoJSONFeature,
   MapMouseEvent,
   Marker,
 } from 'maplibre-gl'
-import { mapActions, mapState, storeToRefs } from 'pinia'
+import { mapActions, storeToRefs } from 'pinia'
 import type { PropType } from 'vue'
 import { ref } from 'vue'
 import booleanIntersects from '@turf/boolean-intersects'
@@ -32,7 +31,7 @@ import { DEFAULT_MAP_STYLE, MAP_ZOOM } from '~/lib/constants'
 import type { VectorTilesPoi } from '~/lib/vectorTilesPois'
 import { vectorTilesPoi2ApiPoi } from '~/lib/vectorTilesPois'
 import { mapStore as useMapStore } from '~/stores/map'
-import { menuStore } from '~/stores/menu'
+import { menuStore as useMenuStore } from '~/stores/menu'
 import { siteStore as useSiteStore } from '~/stores/site'
 import { snackStore } from '~/stores/snack'
 import { filterRouteByCategories, filterRouteByPoiIds } from '~/utils/styles'
@@ -122,7 +121,9 @@ export default defineNuxtComponent({
 
   setup() {
     const device = useDevice()
-    const { config } = storeToRefs(useSiteStore())
+    const { featuresColor, isLoadingFeatures } = storeToRefs(useMenuStore())
+    const siteStore = useSiteStore()
+    const { config } = siteStore
     const mapStore = useMapStore()
     const { center, selectedFeature, teritorioCluster } = storeToRefs(mapStore)
     const mapStyleLoaded = ref(false)
@@ -136,6 +137,8 @@ export default defineNuxtComponent({
       mapStyleLoaded,
       selectedFeature,
       teritorioCluster,
+      featuresColor,
+      isLoadingFeatures,
     }
   },
 
@@ -152,8 +155,6 @@ export default defineNuxtComponent({
   },
 
   computed: {
-    ...mapState(menuStore, ['isLoadingFeatures']),
-
     availableStyles(): MapStyleEnum[] {
       const styles = [MapStyleEnum.vector, MapStyleEnum.aerial]
 
@@ -174,15 +175,14 @@ export default defineNuxtComponent({
       if (!this.map)
         return
 
-      // Change visible data
-      const source = this.map.getSource(POI_SOURCE)
-      if (source?.type === 'geojson' && 'setData' in source) {
-        (source as GeoJSONSource).setData({
-          type: 'FeatureCollection',
-          features: this.mapBase!.featuresPrepare(this.features),
-        })
-        this.showSelectedFeature()
-      }
+      this.mapBase!.initPoiLayer(this.features, this.featuresColor, [
+        'case',
+        ['all', ['has', 'display'], ['has', 'color_fill', ['get', 'display']]],
+        ['get', 'color_fill', ['get', 'display']],
+        '#000000',
+      ])
+
+      this.showSelectedFeature()
 
       this.handleResetMapZoom(
         this.$t('snack.noPoi.issue'),
@@ -259,20 +259,6 @@ export default defineNuxtComponent({
     },
 
     onMapStyleLoad() {
-      const colors = [
-        ...new Set(
-          this.categories
-            .filter(category => category.category)
-            .map(category => category.category.color_fill),
-        ),
-      ]
-      this.mapBase!.initPoiLayer(this.features, colors, [
-        'case',
-        ['all', ['has', 'display'], ['has', 'color_fill', ['get', 'display']]],
-        ['get', 'color_fill', ['get', 'display']],
-        '#000000',
-      ])
-
       STYLE_LAYERS.forEach((layer) => {
         this.map.on('mouseenter', layer, () => {
           this.map.getCanvas().style.cursor = 'pointer'

stores/menu.ts

@@ -48,6 +48,13 @@ export const menuStore = defineStore('menu', {
   }),
 
   getters: {
+    featuresColor: (state: State) => {
+      const colors = Object.values(state.features)
+        .flat()
+        .filter(feature => feature.properties.display)
+        .map(feature => feature.properties.display!.color_fill)
+      return [...new Set(colors)]
+    },
     apiMenuCategory: (state: State): ApiMenuCategory[] | undefined => {
       return state.menuItems === undefined
         ? undefined