nuxt-mapbox/dist/runtime/composables/defineMapboxPopup.js

Elegant Mapbox GL JS integration with Nuxt

import { Popup } from "mapbox-gl";
import { isRef, watch, inject, useMapbox, useMapboxPopupRef, onUnmounted } from "#imports";
import { whenever } from "@vueuse/core";
import { useState, ref } from "#imports";
export function defineMapboxPopup(popupID, options, popupHTML = ref(null), mapID = "") {
  const mapId = inject("MapID");
  if (import.meta.server) return;
  if (useMapboxPopupRef(popupID).value) {
    console.warn(`Mapbox marker with ID '${popupID}' was initialized multiple times. This can cause unexpected behaviour.`);
    return useMapboxPopupRef(popupID).value;
  }
  const popupInstances = useState("mapbox_popup_instances", () => {
    return {};
  });
  if (isRef(options)) {
    popupInstances.value[popupID] = new Popup(options.value);
    watch(options, () => {
      popupInstance.remove();
      delete popupInstances.value[popupID];
      popupInstances.value[popupID] = new Popup(options.value);
    });
  } else {
    popupInstances.value[popupID] = new Popup(options);
  }
  const popupInstance = popupInstances.value[popupID];
  useMapbox(mapId || mapID, (map) => {
    popupInstance.addTo(map);
  });
  whenever(popupHTML, () => {
    if (popupHTML.value) {
      popupHTML.value.hidden = false;
      popupInstance.setDOMContent(popupHTML.value);
    }
  }, { immediate: true });
  onUnmounted(() => {
    const currentPopup = useMapboxPopupRef(popupID);
    if (currentPopup.value) {
      currentPopup.value.remove();
      const mapbox_popup_instances = useState("mapbox_popup_instances", () => {
        return {};
      });
      delete mapbox_popup_instances.value[popupID];
    }
  });
  return popupInstance;
}