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

Merge pull request #45 from vue-leaflet/l-geo-json 

LGeoJson and LLayerGroup
parents 5eb4724b 1de64021

src/Playground.vue

+26 −4
Original line number Diff line number Diff line
@@ -20,6 +20,7 @@ 
        ></l-tile-layer>



        <l-control-layers />



        <l-control-zoom

          position="bottomright"

          zoom-in-text="*"
@@ -41,9 +42,17 @@ 
          </l-tooltip>

        </l-marker>



        <l-layer-group>

          <l-marker :lat-lng="[0, 0]" draggable @moveend="log('moveend')">

            <l-tooltip>

              lol

            </l-tooltip>

          </l-marker>



          <l-marker :lat-lng="[47.41322, -1.219482]">

            <l-icon :icon-url="iconUrl" :icon-size="iconSize" />

          </l-marker>

        </l-layer-group>



        <l-marker :lat-lng="[50, 50]" draggable @moveend="log('moveend')">

          <l-popup>
@@ -59,7 +68,8 @@ 
            [47.234787, -1.358337],

          ]"

          color="green"

        ></l-polyline>

        />



        <l-polygon

          :lat-lngs="[

            [46.334852, -1.509485],
@@ -102,6 +112,7 @@ 
          ]"

          color="green"

        ></l-polyline>

        <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 +157,8 @@ import { 
  LPolygon,

  LRectangle,

  LWmsTileLayer,

  LGeoJson,

  LLayerGroup,

} from "./components";



export default {
@@ -165,12 +178,15 @@ export default { 
    LPolygon,

    LRectangle,

    LWmsTileLayer,

    LLayerGroup,

    LGeoJson,

  },

  data() {

    return {

      zoom: 2,

      iconWidth: 25,

      iconHeight: 40,

      geojson: null,

      baseUrl: "http://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r.cgi",

      wmsLayers: [

        {
@@ -193,6 +209,12 @@ export default { 
      return [this.iconWidth, this.iconHeight];

    },

  },

  async created() {

    const response = await fetch(

      "https://rawgit.com/gregoiredavid/france-geojson/master/regions/pays-de-la-loire/communes-pays-de-la-loire.geojson"

    );

    this.geojson = await response.json();

  },

  methods: {

    log(a) {

      console.log(a);

src/components/LGeoJson.vue

0 → 100644
+38 −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 geoJSONSetup } from "../functions/geoJSON";

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 } = geoJSONSetup(props, leafletRef);



    onMounted(async () => {

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

        "leaflet/dist/leaflet-src.esm"

      );



      leafletRef.value = geoJSON(props.geojson, 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/LLayerGroup.vue

0 → 100644
+37 −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 layerGroupSetup } from "../functions/layerGroup";

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



export default {

  props,

  setup(props, context) {

    const leafletRef = ref({});

    const ready = ref(false);



    const addLayer = inject("addLayer");



    const { methods } = layerGroupSetup(props, leafletRef);



    onMounted(async () => {

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

        "leaflet/dist/leaflet-src.esm"

      );

      leafletRef.value = layerGroup();



      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/LMap.vue

+6 −3
Original line number Diff line number Diff line
@@ -275,9 +275,12 @@ export default { 
        },



        setZoom(newVal) {

          const zoom = blueprint.leafletRef.getZoom();

          if (newVal !== zoom) {

            blueprint.leafletRef.setZoom(newVal, {

              animate: props.noBlockingAnimations ? false : null,

            });

          }

        },



        setPaddingBottomRight(newVal) {

src/components/LWmsTileLayer.vue

+0 −2
Original line number Diff line number Diff line
@@ -3,8 +3,6 @@ import { onMounted, ref, inject } from "vue"; 
import { remapEvents, propsBinder } from "../utils.js";

import { props, setup as wmsLayerSetup } from "../functions/wmsTileLayer";



console.log(props);



export default {

  props,

  setup(props, context) {