Commit 51d9af60 authored by Michael Underwood's avatar Michael Underwood
Browse files

Add generic map control component

parent 155ac931

src/components/LControl.vue

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

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

import { props, setup as controlSetup, render } from "../functions/control";

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



export default {

  name: "LControl",

  props,

  setup(props, context) {

    const leafletRef = ref({});

    const root = ref(null);



    const registerControl = inject("registerControl");

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

    onMounted(async () => {

      const { Control, setOptions } = await import(

        "leaflet/dist/leaflet-src.esm"

      );



      const LControl = Control.extend({

        onAdd() {

          return root.value;

        },

      });

      leafletRef.value = new LControl(options);

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

      registerControl({ leafletObject: leafletRef.value });

    });



    return render(context, root);

  },

};

</script>

src/components/index.js

+1 −0
Original line number Diff line number Diff line
@@ -2,6 +2,7 @@ export { default as LControlAttribution } from "./LControlAttribution.vue"; 
export { default as LControlLayers } from "./LControlLayers.vue";

export { default as LControlScale } from "./LControlScale.vue";

export { default as LControlZoom } from "./LControlZoom.vue";

export { default as LControl } from "./LControl.vue";

export { default as LMap } from "./LMap.vue";

export { default as LMarker } from "./LMarker.vue";

export { default as LTileLayer } from "./LTileLayer.vue";

src/functions/control.js

+9 −1
Original line number Diff line number Diff line 
import { onUnmounted } from "vue";

import { onUnmounted, h } from "vue";



export const props = {

  position: {
@@ -6,6 +6,7 @@ export const props = { 
    default: "topright",

  },

};



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

  const options = {

    position: props.position,
@@ -27,3 +28,10 @@ export const setup = (props, leafletRef) => { 


  return { options, methods };

};



export const render = (context, root) => () => {

  if (context.slots.default) {

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

  }

  return null;

};