Commit c62e1222 authored by Michael Underwood's avatar Michael Underwood
Browse files

Make `useGlobalLeaflet` prop of `LMap` only 

Previously `useGlobalLeaflet` was an element of the `options` object on
every component, but only `LMap` actually did anything with the value.
Now the configuration option is explicitly only a prop on `LMap`, which
`provide`s its value to its children so that all components comprising a
single map will have the same setting value.
parent 63f6e407

src/components/LMap.vue

+17 −11
Original line number Diff line number Diff line 
<script>

import {

  onMounted,

  onBeforeUnmount,

  computed,

  h,

  nextTick,

  onBeforeUnmount,

  onMounted,

  provide,

  reactive,

  ref,

  nextTick,

  h,

} from "vue";

import {

  remapEvents,
@@ -15,17 +16,14 @@ import { 
  resetWebpackIcon,

  provideLeafletWrapper,

  updateLeafletWrapper,

  WINDOW_OR_GLOBAL,

  GLOBAL_LEAFLET_OPT,

} from "../utils.js";

import {

  props as componentProps,

  setup as componentSetup,

} from "../functions/component";



const WINDOW_OR_GLOBAL =

  (typeof self === "object" && self.self === self && self) ||

  (typeof global === "object" && global.global === global && global) ||

  undefined;



export default {

  emits: ["ready", "update:zoom", "update:center", "update:bounds"],

  props: {
@@ -150,6 +148,10 @@ export default { 
      type: Boolean,

      default: false,

    },

    useGlobalLeaflet: {

      type: Boolean,

      default: false,

    },

  },

  setup(props, context) {

    const root = ref(null);
@@ -184,6 +186,7 @@ export default { 
    const removeLayer = provideLeafletWrapper("removeLayer");

    const registerControl = provideLeafletWrapper("registerControl");

    const registerLayerControl = provideLeafletWrapper("registerLayerControl");

    provide(GLOBAL_LEAFLET_OPT, props.useGlobalLeaflet);



    const eventHandlers = {

      moveEndHandler() {
@@ -219,6 +222,9 @@ export default { 
    };



    onMounted(async () => {

      if (props.useGlobalLeaflet) {

        WINDOW_OR_GLOBAL.L = WINDOW_OR_GLOBAL.L || (await import("leaflet"));

      }

      const {

        map,

        CRS,
@@ -226,8 +232,8 @@ export default { 
        latLngBounds,

        latLng,

        DomEvent,

      } = options.useGlobalLeaflet

        ? (WINDOW_OR_GLOBAL.L = WINDOW_OR_GLOBAL.L || (await import("leaflet")))

      } = props.useGlobalLeaflet

        ? WINDOW_OR_GLOBAL.L

        : await import("leaflet/dist/leaflet-src.esm");



      try {

src/functions/component.js

+1 −1
Original line number Diff line number Diff line 
export const props = {

  options: {

    type: Object,

    default: () => ({ useGlobalLeaflet: false }),

    default: () => ({}),

  },

};

src/utils.js

+7 −0
Original line number Diff line number Diff line
@@ -102,3 +102,10 @@ export const provideLeafletWrapper = (methodName) => { 
 */

export const updateLeafletWrapper = (wrapper, leafletMethod) =>

  (wrapper.wrapped.value = leafletMethod);



export const WINDOW_OR_GLOBAL =

  (typeof self === "object" && self.self === self && self) ||

  (typeof global === "object" && global.global === global && global) ||

  undefined;



export const GLOBAL_LEAFLET_OPT = "useGlobalLeaflet";