fix(types): correct typings for LMap

Signed-off-by: GitHub <[email protected]>

package.json

@@ -38,9 +38,9 @@
     "date-fns": "3.3.1",
     "defu": "6.1.4",
     "destr": "2.0.3",
+    "leaflet": "1.9.4",
     "radix-vue": "1.4.9",
     "vue": "3.4.21",
-    "leaflet": "1.9.4",
     "vue-i18n": "9.9.1",
     "vue-router": "4.3.0"
   },
@@ -50,10 +50,11 @@
     "@intlify/unplugin-vue-i18n": "2.0.0",
     "@rollup/plugin-virtual": "3.0.2",
     "@stylistic/eslint-plugin": "1.6.2",
+    "@types/geojson": "7946.0.14",
+    "@types/leaflet": "1.9.8",
     "@types/node": "20.11.22",
     "@typescript-eslint/eslint-plugin": "7.1.0",
     "@typescript-eslint/parser": "7.1.0",
-    "@types/leaflet": "1.9.8",
     "@vitejs/plugin-vue": "5.0.4",
     "browserslist": "4.23.0",
     "confusing-browser-globals": "1.0.11",

src/components/LMap.vue

@@ -1,11 +1,13 @@
 <template>
-  <div id="mapContainer" />
+  <div
+    ref="mapContainer"
+    class="mapContainer" />
 </template>
 
 <script setup lang="ts">
-import { onMounted, onBeforeUnmount } from 'vue';
+import { onBeforeUnmount, ref, watch } from 'vue';
 import 'leaflet/dist/leaflet.css';
-import L from 'leaflet';
+import { map, icon, marker } from 'leaflet';
 import Azul from '@/assets/pin/Pin_Azul.png';
 import Dot from '@/assets/pin/dot.png';
 
@@ -17,45 +19,55 @@ interface MapMarker {
 }
 
 const props = defineProps<{ markers: Array<MapMarker> }>();
-let map: ReturnType<typeof L> ;
-let userLocationMarker: ReturnType<typeof L.marker>;
-let watchId: number | null = null;
-
-onMounted(() => {
-  console.log(props.markers);
-  createMapLayer();
-});
+const mapContainer = ref<HTMLDivElement>();
+let mapInstance: ReturnType<typeof map> | undefined;
+let watchId: number | undefined;
 
 onBeforeUnmount(() => {
-  if (map) {
-    map.remove();
-  }
+  disposeMap();
 
-  if (watchId !== null) {
+  if (watchId !== undefined) {
     navigator.geolocation.clearWatch(watchId);
   }
 });
 
+/**
+ * Coloca los marcadores en el mapa
+ */
+function setMarkers(): void {
+  if (mapInstance) {
+    for (const mapMarker of props.markers) {
+      const customIcon = L.icon({
+        iconUrl: Azul,
+        iconSize: [22, 30],
+        iconAnchor: [11, 6]
+      });
+
+      marker([mapMarker.latitud, mapMarker.longitud], { icon: customIcon }).addTo(mapInstance).bindPopup(`Evento: ${mapMarker.description}`);
+    }
+  }
+};
 
-const createMapLayer = (): void => {
+/**
+ * Crea la instancia de Leaflet e inicia la geolocalización
+ */
+function createMapLayer(): void {
   if (navigator.geolocation) {
     navigator.geolocation.getCurrentPosition(
       (position) => {
         const { latitude, longitude } = position.coords;
 
-        map = L.map('mapContainer').setView([latitude, longitude], 13);
-        L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
-          attribution:
-        '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
-        }).addTo(map);
+        mapInstance = map('mapContainer');
+        mapInstance.setView([latitude, longitude], 15);
 
-        const userIcon = L.icon({
+        const userIcon = icon({
           iconUrl: Dot,
           iconSize: [20, 20],
           iconAnchor: [10, 10]
         });
 
-        userLocationMarker = L.marker([latitude, longitude], { icon: userIcon }).addTo(map);
+        const userLocationMarker = marker([latitude, longitude], { icon: userIcon }).addTo(mapInstance);
+
         userLocationMarker.bindPopup('Tu ubicación');
 
         if (props.markers.length > 0) {
@@ -72,23 +84,31 @@ const createMapLayer = (): void => {
   }
 };
 
-const setMarkers = (): void => {
-  for (const marker of props.markers) {
-    const customIcon = L.icon({
-      iconUrl: Azul,
-      iconSize: [22, 30],
-      iconAnchor: [11, 6]});
-
-    L.marker([marker.latitud, marker.longitud], { icon: customIcon }).addTo(map)
-      .bindPopup('Evento:'+marker.description);
+/**
+ * Dispose the map instance
+ */
+function disposeMap(): void {
+  if (mapInstance) {
+    mapInstance.remove();
+    mapInstance = undefined;
   }
-};
+}
+
+/**
+ * Este watcher trackea cuando el elemento div cambia para crear el mapa (ahora mismo no cambia nunca
+ * solo en mount, pero es posible que en un futuro, dependiendo del dispositivo, cambiemos el objeto DOM
+ * al que haga referencia con un `<component :is="" ....>`)
+ */
+watch(mapContainer, () => {
+  disposeMap();
+  createMapLayer();
+});
 </script>
 
 <style scoped>
-  #mapContainer {
-    width: 95%;
-    height: 90vh;
-    margin: 2% 2%;
-  }
-  </style>
+.mapContainer {
+  width: 95%;
+  height: 90vh;
+  margin: 2% 2%;
+}
+</style>