fix: ref on slot not working 🚨

Signed-off-by: Vinayak Kulkarni <19776877+vinayakkulkarni@users.noreply.github.com>

src/markers/VMarker.vue

@@ -1,40 +1,42 @@
 <template>
-  <section :id="`marker-${Date.now()}`">
-    <v-popup
-      :marker="marker"
-      :options="popupOptions"
-      :coordinates="coordinates"
-    >
-      <slot />
-    </v-popup>
+  <section :id="`marker-${Date.now()}`" class="absolute">
+    <slot :set-ref="setSlotRef" name="markers" />
+    <template v-if="isMarkerAvailable">
+      <v-popup
+        :marker="marker"
+        :options="popupOptions"
+        :coordinates="coordinates"
+      >
+        <slot />
+      </v-popup>
+    </template>
   </section>
 </template>
 <script lang="ts">
   import type { LngLatLike, MarkerOptions, PopupOptions } from 'maplibre-gl';
   import { Marker } from 'maplibre-gl';
   import type { PropType, Ref } from 'vue';
-  import { defineComponent, onMounted, ref } from 'vue';
+  import { defineComponent, onMounted, onBeforeUnmount, ref, watch } from 'vue';
   import { markerDOMEvents, markerMapEvents } from '../constants/events';
   import VPopup from '../popups/VPopup.vue';
-  import { MapKey } from '../utils/symbols';
-  import { injectStrict } from '../utils';
+  import { injectStrict, MapKey } from '../utils';
 
   export default defineComponent({
     name: 'VMarker',
     components: {
       VPopup,
     },
     props: {
-      options: {
-        type: Object as PropType<MarkerOptions>,
-        default: () => ({} as MarkerOptions),
-        required: true,
-      },
       coordinates: {
         type: [Object, Array] as PropType<LngLatLike>,
         default: () => ({}),
         required: true,
       },
+      options: {
+        type: Object as PropType<MarkerOptions>,
+        default: () => ({} as MarkerOptions),
+        required: false,
+      },
       popupOptions: {
         type: Object as PropType<PopupOptions>,
         default: () => ({} as PopupOptions),
@@ -55,8 +57,50 @@
     ],
     setup(props, { emit }) {
       let map = injectStrict(MapKey);
-      let marker: Marker = new Marker(props.options);
+      let marker: Ref<Marker> = ref({}) as Ref<Marker>;
       let loaded: Ref<boolean> = ref(true);
+      let isMarkerAvailable = ref(false);
+      let slotRef: Ref<HTMLElement | null> = ref(null);
+
+      const setSlotRef = (el: HTMLElement) => {
+        slotRef.value = el;
+      };
+
+      watch(marker, (marker) => {
+        if ('_map' in marker) {
+          isMarkerAvailable.value = true;
+        } else {
+          isMarkerAvailable.value = false;
+        }
+      });
+
+      onMounted(() => {
+        if (loaded.value) {
+          if (slotRef.value !== null) {
+            // add marker to map
+            marker.value = new Marker({
+              element: slotRef.value!,
+              ...props.options,
+            });
+            setMarkerCoordinates(marker.value);
+            addToMap(marker.value);
+            setCursorPointer(marker.value);
+            listenMarkerEvents(marker.value);
+          } else {
+            marker.value = new Marker(props.options);
+            setMarkerCoordinates(marker.value);
+            addToMap(marker.value);
+            setCursorPointer(marker.value);
+            listenMarkerEvents(marker.value);
+          }
+        } else {
+          removeFromMap(marker.value);
+        }
+      });
+
+      onBeforeUnmount(() => {
+        removeFromMap(marker.value);
+      });
 
       map.value.on('style.load', () => {
         // https://github.com/mapbox/mapbox-gl-js/issues/2268#issuecomment-401979967
@@ -71,59 +115,55 @@
         styleTimeout();
       });
 
-      onMounted(() => {
-        if (loaded.value) {
-          setMarkerCoordinates();
-          addToMap();
-          setCursorPointer();
-        } else {
-          removeFromMap();
-        }
-        listenMarkerEvents();
-      });
-
       /**
        * Set marker coordinates
        *
+       * @param {Marker} marker - Marker
        * @returns {void}
        */
-      function setMarkerCoordinates(): void {
+      function setMarkerCoordinates(marker: Marker): void {
         marker.setLngLat(props.coordinates);
       }
       /**
        * Sets the Cursor to Pointer
        *
+       * @param {Marker} marker - Marker
        * @returns {void}
        */
-      function setCursorPointer(): void {
+      function setCursorPointer(marker: Marker): void {
         marker.getElement().style.cursor = props.cursor || 'default';
       }
 
       /**
        * Add marker to map
        *
+       * @param {Marker} marker - Marker
        * @returns {void}
        */
-      function addToMap(): void {
+      function addToMap(marker: Marker): void {
         marker.addTo(map.value);
         emit('added', { marker });
       }
       /**
        * Remove marker from map
        *
+       * @param {Marker} marker - Marker
        * @returns {void}
        */
-      function removeFromMap(): void {
-        marker.remove();
-        emit('removed');
+      function removeFromMap(marker: Marker): void {
+        if (isMarkerAvailable.value) {
+          marker.remove();
+          emit('removed');
+        }
       }
 
       /**
        * Listen to events
        *
+       * @param {Marker} marker - Marker
        * @returns {void}
        */
-      function listenMarkerEvents(): void {
+      function listenMarkerEvents(marker: Marker): void {
         let coordinates: LngLatLike;
         // Listen to Marker Mapbox events
         markerMapEvents.forEach((event: string) => {
@@ -148,8 +188,15 @@
       }
 
       return {
+        isMarkerAvailable,
         marker,
+        setSlotRef,
       };
     },
   });
 </script>
+<style>
+  .absolute {
+    position: absolute !important;
+  }
+</style>