Commit 2b33787a authored by Michael Underwood's avatar Michael Underwood
Browse files

Use same global L as LMap if set, else ESM import 

Each map component now `inject`s the setting from its ancestor `LMap` of
whether to use the global Leaflet instance. On mount, every component
now imports its required Leaflet methods from the same Leaflet instance
as the map that will contain it.
parent c62e1222

src/components/LCircle.vue

+10 −2
Original line number Diff line number Diff line 
<script>

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

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

import {

  remapEvents,

  propsBinder,

  WINDOW_OR_GLOBAL,

  GLOBAL_LEAFLET_OPT,

} from "../utils.js";

import { props, setup as circleSetup } from "../functions/circle";

import { render } from "../functions/layer";
@@ -14,12 +19,15 @@ export default { 
    const leafletRef = ref({});

    const ready = ref(false);



    const useGlobalLeaflet = inject(GLOBAL_LEAFLET_OPT);

    const addLayer = inject("addLayer");



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



    onMounted(async () => {

      const { circle, DomEvent } = await import("leaflet/dist/leaflet-src.esm");

      const { circle, DomEvent } = useGlobalLeaflet

        ? WINDOW_OR_GLOBAL.L

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



      leafletRef.value = circle(props.latLng, options);

src/components/LCircleMarker.vue

+10 −4
Original line number Diff line number Diff line 
<script>

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

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

import {

  remapEvents,

  propsBinder,

  WINDOW_OR_GLOBAL,

  GLOBAL_LEAFLET_OPT,

} from "../utils.js";

import { props, setup as circleMarkerSetup } from "../functions/circleMarker";

import { render } from "../functions/layer";
@@ -14,14 +19,15 @@ export default { 
    const leafletRef = ref({});

    const ready = ref(false);



    const useGlobalLeaflet = inject(GLOBAL_LEAFLET_OPT);

    const addLayer = inject("addLayer");



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



    onMounted(async () => {

      const { circleMarker, DomEvent } = await import(

        "leaflet/dist/leaflet-src.esm"

      );

      const { circleMarker, DomEvent } = useGlobalLeaflet

        ? WINDOW_OR_GLOBAL.L

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



      leafletRef.value = circleMarker(props.latLng, options);

src/components/LControl.vue

+7 −4
Original line number Diff line number Diff line
@@ -5,7 +5,7 @@ import { 
  setup as controlSetup,

  render,

} from "../functions/control";

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

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



export default {

  name: "LControl",
@@ -26,12 +26,15 @@ export default { 
    const leafletRef = ref({});

    const root = ref(null);



    const useGlobalLeaflet = inject(GLOBAL_LEAFLET_OPT);

    const registerControl = inject("registerControl");



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



    onMounted(async () => {

      const { Control, DomEvent } = await import(

        "leaflet/dist/leaflet-src.esm"

      );

      const { Control, DomEvent } = useGlobalLeaflet

        ? WINDOW_OR_GLOBAL.L

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



      const LControl = Control.extend({

        onAdd() {

src/components/LControlAttribution.vue

+7 −2
Original line number Diff line number Diff line
@@ -4,7 +4,7 @@ import { 
  props,

  setup as attributionControlSetup,

} from "../functions/controlAttribution";

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

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



export default {

  name: "LControlAttribution",
@@ -12,10 +12,15 @@ export default { 
  setup(props, context) {

    const leafletRef = ref({});



    const useGlobalLeaflet = inject(GLOBAL_LEAFLET_OPT);

    const registerControl = inject("registerControl");



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



    onMounted(async () => {

      const { control } = await import("leaflet/dist/leaflet-src.esm");

      const { control } = useGlobalLeaflet

        ? WINDOW_OR_GLOBAL.L

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



      leafletRef.value = control.attribution(options);

      propsBinder(methods, leafletRef.value, props);

src/components/LControlLayers.vue

+7 −2
Original line number Diff line number Diff line 
<script>

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

import { props, setup as layerControlSetup } from "../functions/controlLayers";

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

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



export default {

  name: "LControlLayers",
@@ -9,10 +9,15 @@ export default { 
  setup(props, context) {

    const leafletRef = ref({});



    const useGlobalLeaflet = inject(GLOBAL_LEAFLET_OPT);

    const registerLayerControl = inject("registerLayerControl");



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



    onMounted(async () => {

      const { control } = await import("leaflet/dist/leaflet-src.esm");

      const { control } = useGlobalLeaflet

        ? WINDOW_OR_GLOBAL.L

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



      leafletRef.value = control.layers(null, null, options);