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

Merge pull request #50 from vue-leaflet/l-circles 

Add LCircleMarker and LCircle
parents 224845a3 e281a9b4

src/Playground.vue

+8 −0
Original line number Diff line number Diff line
@@ -112,7 +112,11 @@ 
          ]"

          color="green"

        ></l-polyline>

        <l-circle-marker :lat-lng="[35.865, 12.865]" :radius="10" />



        <l-circle :lat-lng="[35.865, 12.865]" :radius="10000" color="green" />

        <l-geo-json :geojson="geojson"></l-geo-json>



      </l-map>

      <button @click="changeIcon">New kitten icon</button>

      <label for="attributionPrefix">Attribution prefix:</label>
@@ -146,6 +150,8 @@ import { 
  LIcon,

  LTileLayer,

  LMarker,

  LCircle,

  LCircleMarker,

  LControlAttribution,

  LControlLayers,

  LControlScale,
@@ -167,6 +173,8 @@ export default { 
    LIcon,

    LTileLayer,

    LMarker,

    LCircle,

    LCircleMarker,

    LControlAttribution,

    LControlLayers,

    LControlScale,

src/components/LCircle.vue

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

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

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

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

import { render } from "../functions/layer";



/**

 * Circle component, lets you add and personalize circles on the map

 */

export default {

  name: "LCircle",

  props,

  setup(props, context) {

    const leafletRef = ref({});

    const ready = ref(false);



    const addLayer = inject("addLayer");



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



    onMounted(async () => {

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

        "leaflet/dist/leaflet-src.esm"

      );



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



      const listeners = remapEvents(context.attrs);

      DomEvent.on(leafletRef.value, listeners);



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



      addLayer({

        ...props,

        ...methods,

        leafletObject: leafletRef.value,

      });

      ready.value = true;

    });

    return render(ready, context);

  },

};

</script>

src/components/LCircleMarker.vue

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

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

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

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

import { render } from "../functions/layer";



/**

 * Circle Marker component, lets you add and personalize circle markers on the map

 */

export default {

  name: "LCircleMarker",

  props,

  setup(props, context) {

    const leafletRef = ref({});

    const ready = ref(false);



    const addLayer = inject("addLayer");



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



    onMounted(async () => {

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

        "leaflet/dist/leaflet-src.esm"

      );



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



      const listeners = remapEvents(context.attrs);

      DomEvent.on(leafletRef.value, listeners);



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



      addLayer({

        ...props,

        ...methods,

        leafletObject: leafletRef.value,

      });

      ready.value = true;

    });

    return render(ready, context);

  },

};

</script>

src/components/index.js

+2 −0
Original line number Diff line number Diff line 
export { default as LCircle } from "./LCircle.vue";

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

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

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

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

src/functions/circle.js

0 → 100644
+31 −0
Original line number Diff line number Diff line 
import {

  props as circleMarkerProps,

  setup as circleMarkerSetup,

} from "./circleMarker";



export const props = {

  ...circleMarkerProps,

  /**

   * Radius of the circle in meters.

   */

  radius: {

    type: Number,

    default: null,

  },

};



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

  const {

    options: circleMarkerOptions,

    methods: circleMarkerMethods,

  } = circleMarkerSetup(props, leafletRef, context);

  const options = {

    ...circleMarkerOptions,

    ...props,

  };

  const methods = {

    ...circleMarkerMethods,

  };



  return { options, methods };

};