fix(my-map): Fix my map not showing layers when coming from another page

CartONG · Dec 20, 2024 · f4fd41b · f4fd41b
1 parent 9c0bc63
commit f4fd41b
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 60 deletions.
diff --git a/vue/src/components/map/Map.vue b/vue/src/components/map/Map.vue
@@ -29,12 +29,10 @@ const hoveredFeatureId: Ref<string | null> = ref(null)
 const activeFeatureId: Ref<string | null> = ref(null)
 
 onMounted(() => {
-  const accessToken = '0tupl15DKhXOvwp27x8c'
+  const apiKey = import.meta.env.VITE_MAPTILER_API_KEY
   map.value = new maplibregl.Map({
     container: 'map',
-    // style: 'https://demotiles.maplibre.org/style.json',
-    // style: '
-    style: `https://api.maptiler.com/maps/openstreetmap/style.json?key=${accessToken}`,
+    style: `https://api.maptiler.com/maps/openstreetmap/style.json?key=${apiKey}`,
     center: [0, 0],
     zoom: 1,
     attributionControl: false

diff --git a/vue/src/views/map/components/MyMap.vue b/vue/src/views/map/components/MyMap.vue
@@ -36,12 +36,8 @@ const basemapPicker = useTemplateRef('basemap-picker')
 const map = computed(() => myMap.value?.map)
 
 onMounted(() => {
-  if (map.value) {
-    map.value.on('load', () => {
-      if (myMap.value) {
-        myMapStore.myMap = myMap.value
-      }
-    })
+  if (myMap.value) {
+    myMapStore.myMap = myMap.value
   }
   if (map.value != null) {
     map.value.addControl(new IControl(basemapPicker), 'bottom-right')
@@ -64,50 +60,6 @@ watch(
     }
   }
 )
-// const updatePin = () => {
-//   if (myMap.value) {
-//     myMap.value.setLayoutProperty(
-//       sources.projects,
-//       'icon-image',
-//       imageHoverFilter(projectsImageName, projectsImageHoverName)
-//     )
-//   }
-// }
-
-// const refreshProjectLayer = async () => {
-//   if (myMap.value) {
-//     myMap.value.setData(sources.projects, geojson.value)
-//   }
-// }
-
-// const imageHoverFilter = (
-//   imageName: string,
-//   imageHoverName: string
-// ): maplibregl.DataDrivenPropertyValueSpecification<ResolvedImageSpecification> => {
-//   return [
-//     'match',
-//     ['get', 'id'],
-//     [...new Set([projectStore.hoveredProjectId ?? '', projectStore.activeProjectId ?? ''])],
-//     imageHoverName,
-//     imageName
-//   ]
-// }
-
-// const setProjectLayer = async () => {
-//   if (myMap.value) {
-//     myMap.value.addSource(projectsSourceName, geojson.value)
-//     await myMap.value.addImage(projectIcon, projectsImageName)
-//     await myMap.value.addImage(projectHoverIcon, projectsImageHoverName)
-//     const layout: maplibregl.LayerSpecification['layout'] = {
-//       'icon-image': imageHoverFilter(projectsImageName, projectsImageHoverName),
-//       'icon-size': 0.45
-//     }
-//     myMap.value.addLayer(projectsLayerName, { layout })
-//     myMap.value.listenToHoveredFeature(projectsLayerName)
-//     myMap.value.addPopupOnClick(projectsLayerName, activeProjectCard.value)
-//   }
-//   return
-// }
 </script>
 
 <style lang="scss">

diff --git a/vue/src/views/map/components/MyMapPlatformLayers.vue b/vue/src/views/map/components/MyMapPlatformLayers.vue
@@ -54,9 +54,14 @@ onMounted(async () => {
     await resourceStore.getAll(),
     await actorStore.getAll(),
     await projectStore.getAll()
-  ]).then(() => {
-    if (map.value != null) {
-      setPlatformDataLayers()
+  ]).then(async () => {
+    if (map.value == null) return
+    if (map.value.loaded()) {
+      await setPlatformDataLayers()
+    } else {
+      map.value.on('load', async () => {
+        await setPlatformDataLayers()
+      })
     }
   })
 })
@@ -133,17 +138,14 @@ const setPlatformDataLayer = async (itemType: ItemType) => {
   if (myMap.value) {
     const geojson = getGeojsonPerItemType(itemType)
     const icon = new URL(`/src/assets/images/icons/map/${itemType}_icon.png`, import.meta.url).href
-    // const hoverIcon = new URL(`@/assets/images/icons/map/${itemType}_icon_hover.png`, import.meta.url).href
     myMap.value.addSource(itemType, geojson)
     await myMap.value.addImage(icon, itemType)
-    // await myMap.value.addImage(hoverIcon, itemType + '_hover')
     const layout: maplibregl.LayerSpecification['layout'] = {
       'icon-image': itemType,
       'icon-size': 0.4
     }
     myMap.value.addLayer(itemType, { layout })
     myMap.value.listenToHoveredFeature(itemType)
-    // myMap.value.addPopupOnClick(projectsLayerName, activeProjectCard.value)
   }
   return
 }