Unverified Commit 580f83d0 authored by Michael Underwood's avatar Michael Underwood Committed by GitHub
Browse files

Merge pull request #38 from vue-leaflet/add-popup-component 

Add popup component
parents 2f8ec992 3811f85e

src/Playground.vue

+8 −0
Original line number Diff line number Diff line
@@ -20,6 +20,12 @@ 
        <l-icon :icon-url="iconUrl" :icon-size="iconSize" />

      </l-marker>



      <l-marker :lat-lng="[50, 50]" draggable @moveend="log('moveend')">

        <l-popup>

          lol

        </l-popup>

      </l-marker>



      <l-polyline

        :lat-lngs="[

          [47.334852, -1.509485],
@@ -40,6 +46,7 @@ import LTileLayer from "./components/LTileLayer.vue"; 
import LMarker from "./components/LMarker.vue";

import LControlLayers from "./components/LControlLayers.vue";

import LTooltip from "./components/LTooltip.vue";

import LPopup from "./components/LPopup.vue";

import LPolyline from "./components/LPolyline.vue";



export default {
@@ -50,6 +57,7 @@ export default { 
    LMarker,

    LControlLayers,

    LTooltip,

    LPopup,

    LPolyline,

  },

  data() {

src/components/LPopup.vue

0 → 100644
+45 −0
Original line number Diff line number Diff line 
<script>

import { onMounted, ref, h, inject } from "vue";

import { propsBinder, remapEvents } from "../utils.js";

import { setup as popupSetup, props } from "../functions/popup";



/**

 * Display a popup on the map

 */

export default {

  name: "LPopup",

  props,

  setup(props, context) {

    const leafletRef = ref({});

    const root = ref(null);



    const bindPopup = inject("bindPopup");

    const { options, methods } = popupSetup(props, leafletRef, context);



    onMounted(async () => {

      const { popup, DomEvent, setOptions } = await import(

        "leaflet/dist/leaflet-src.esm"

      );



      leafletRef.value = popup(options);



      if (props.latLng !== undefined) {

        leafletRef.value.setLatLng(props.latLng);

      }



      propsBinder(methods, leafletRef.value, props, setOptions);

      const listeners = remapEvents(context.attrs);

      DomEvent.on(leafletRef.value, listeners);

      leafletRef.value.setContent(props.content || root.value);

      bindPopup({ leafletObject: leafletRef.value });

    });

    return { root };

  },

  render() {

    if (this.$slots.default) {

      return h("div", { ref: "root" }, this.$slots.default());

    }

    return null;

  },

};

</script>

src/functions/layer.js

+5 −0
Original line number Diff line number Diff line
@@ -60,6 +60,9 @@ export const setup = (props, leafletRef, context) => { 
        }

      }

    },

    bindPopup({ leafletObject }) {

      leafletRef.value.bindPopup(leafletObject);

    },

    bindTooltip({ leafletObject }) {

      leafletRef.value.bindTooltip(leafletObject);

    },
@@ -85,8 +88,10 @@ export const setup = (props, leafletRef, context) => { 
    },

  };



  provide("bindPopup", methods.bindPopup);

  provide("bindTooltip", methods.bindTooltip);

  provide("unbindTooltip", methods.unbindTooltip);

  provide("unbindPopup", methods.unbindPopup);



  onUnmounted(() => {

    methods.unbindPopup();

src/functions/popup.js

0 → 100644
+21 −0
Original line number Diff line number Diff line 
import { onBeforeUnmount, inject } from "vue";

import { props as popperProps, setup as popperSetup } from "./popper";



export const props = {

  ...popperProps,

  latLng: {

    type: [Object, Array],

    default: () => [],

  },

};



export const setup = (props, leafletRef) => {

  const { options, methods } = popperSetup(props, leafletRef);

  const unbindPopup = inject("unbindPopup");



  onBeforeUnmount(() => {

    unbindPopup();

  });



  return { options, methods };

};