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

Merge pull request #62 from vue-leaflet/l-feature-group 

L feature group
parents 215dcc9d 915e05c0

src/components/LFeatureGroup.vue

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

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

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

import { props, setup as featureGroupSetup } from "../functions/featureGroup";

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



export default {

  props,

  setup(props, context) {

    const leafletRef = ref({});

    const ready = ref(false);



    const addLayer = inject("addLayer");



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



    onMounted(async () => {

      const { featureGroup, DomEvent } = await import(

        "leaflet/dist/leaflet-src.esm"

      );



      leafletRef.value = featureGroup(options);



      const listeners = remapEvents(context.attrs);

      DomEvent.on(leafletRef.value, listeners);



      propsBinder(methods, leafletRef.value, props);

      addLayer({

        ...props,

        ...methods,

        leafletObject: leafletRef.value,

      });

      ready.value = true;

      nextTick(() => context.emit("ready", leafletRef.value));

    });

    return { ready, leafletObject: leafletRef };

  },

  render() {

    return render(this.ready, this.$slots);

  },

};

</script>

src/components/index.js

+1 −0
Original line number Diff line number Diff line
@@ -5,6 +5,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 LFeatureGroup } from "./LFeatureGroup.vue";

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

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

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

src/functions/featureGroup.js

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

  props as layerGroupProps,

  setup as layerGroupSetup,

} from "./layerGroup";



export const props = {

  ...layerGroupProps,

};



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

  const { options: layerOptions, methods: layerGroupMethods } = layerGroupSetup(

    props,

    leafletRef

  );



  const options = {

    ...layerOptions,

    ...props,

  };



  const methods = {

    ...layerGroupMethods,

  };



  return { options, methods };

};

src/playground/App.vue

+1 −0
Original line number Diff line number Diff line
@@ -2,6 +2,7 @@ 
  <div class="main-wrapper">

    <div class="menu">

      <router-link to="/">Home</router-link>

      <router-link to="/feature-group">Feature Group</router-link>

      <router-link to="/circle">Circle</router-link>

      <router-link to="/circle-marker">CircleMarker</router-link>

      <router-link to="/control-attribution">Attribution</router-link>

src/playground/index.js

+4 −0
Original line number Diff line number Diff line
@@ -6,6 +6,10 @@ import Home from "./views/Home.vue"; 


const routes = [

  { path: "/", component: Home },

  {

    path: "/feature-group",

    component: () => import("./views/FeatureGroup.vue"),

  },

  { path: "/circle", component: () => import("./views/Circle.vue") },

  {

    path: "/circle-marker",