Unverified Commit af04cb81 authored by Nicolò Maria Mezzopera's avatar Nicolò Maria Mezzopera Committed by GitHub
Browse files

Merge pull request #23 from vue-leaflet/l-tooltip 

L tooltip
parents 2b9d7a4d 094d5fec

src/Playground.vue

+7 −5
Original line number Diff line number Diff line
@@ -10,11 +10,11 @@ 
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

      ></l-tile-layer>

      <l-control-layers />

      <l-marker

        :lat-lng="[0, 0]"

        draggable

        @moveend="log('moveend')"

      ></l-marker>

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

        <l-tooltip>

          lol

        </l-tooltip>

      </l-marker>

    </l-map>

  </div>

</template>
@@ -23,6 +23,7 @@ import LMap from "./components/LMap.vue"; 
import LTileLayer from "./components/LTileLayer.vue";

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

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

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



export default {

  components: {
@@ -30,6 +31,7 @@ export default { 
    LTileLayer,

    LMarker,

    LControlLayers,

    LTooltip,

  },

  data() {

    return {

src/components/LMarker.vue

+3 −3
Original line number Diff line number Diff line 
<script>

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

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

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

import { props, setup as markerSetup } from "../functions/marker";
@@ -43,9 +43,9 @@ export default { 
    });

    return { ready };

  },

  render: function (h) {

  render() {

    if (this.ready && this.$slots.default) {

      return h("div", { style: { display: "none" } }, this.$slots.default);

      return h("div", { style: { display: "none" } }, this.$slots.default());

    }

    return null;

  },

src/components/LTooltip.vue

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

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

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

import { setup as tooltipSetup, props } from "../functions/tooltip";



/**

 * Display a tooltip on the map

 */

export default {

  name: "LTooltip",

  props,

  setup(props, context) {

    const mapRef = ref({});

    const root = ref(null);



    const lMethods = inject("leafLetMethods");

    const { options, methods } = tooltipSetup(props, mapRef, context, lMethods);



    onMounted(async () => {

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

        "leaflet/dist/leaflet-src.esm"

      );



      mapRef.value = tooltip(options);



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

      const listeners = remapEvents(context.attrs);

      DomEvent.on(mapRef.value, listeners);

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

      lMethods.bindTooltip({ mapObject: mapRef.value });

    });

    return { root };

  },

  render() {

    if (this.$slots.default) {

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

    }

    return null;

  },

};

</script>

src/functions/layer.js

+12 −19
Original line number Diff line number Diff line 
import { inject, onUnmounted } from "vue";

import { inject, onUnmounted, provide } from "vue";



export const props = {

  pane: {
@@ -28,21 +28,6 @@ export const props = { 


export const setup = (props, mapRef, context) => {

  const lMethods = inject("leafLetMethods");



  const unbindTooltip = () => {

    const tooltip = mapRef.value ? mapRef.value.getTooltip() : null;

    if (tooltip) {

      tooltip.unbindTooltip();

    }

  };



  const unbindPopup = () => {

    const popup = mapRef.value ? mapRef.value.getPopup() : null;

    if (popup) {

      popup.unbindPopup();

    }

  };



  const options = {

    attribution: props.attribution,

    pane: props.pane,
@@ -74,7 +59,9 @@ export const setup = (props, mapRef, context) => { 
        }

      }

    },



    bindTooltip({ mapObject }) {

      mapRef.value.bindTooltip(mapObject);

    },

    unbindTooltip() {

      const tooltip = mapRef.value ? mapRef.value.getTooltip() : null;

      if (tooltip) {
@@ -97,9 +84,15 @@ export const setup = (props, mapRef, context) => { 
    },

  };



  provide("leafLetMethods", {

    ...lMethods,

    bindTooltip: methods.bindTooltip,

    unbindTooltip: methods.unbindTooltip,

  });



  onUnmounted(() => {

    unbindPopup();

    unbindTooltip();

    methods.unbindPopup();

    methods.unbindTooltip();

    lMethods.removeLayer({ mapObject: mapRef.value });

  });

src/functions/popper.js

0 → 100644
+18 −0
Original line number Diff line number Diff line 
export const props = {

  content: {

    type: String,

    default: null,

  },

};



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

  const options = {};

  const methods = {

    setContent(newVal) {

      if (mapRef.value && newVal !== null && newVal !== undefined) {

        mapRef.value.setContent(newVal);

      }

    },

  };

  return { options, methods };

};