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

Merge pull request #46 from vue-leaflet/l-controls 

Controls
parents d20a8341 24933e26

src/Playground.vue

+57 −11
Original line number Diff line number Diff line
@@ -7,10 +7,34 @@ 
        :center="[47.41322, -1.219482]"

        @move="log('move')"

      >

        <l-tile-layer

          url="http://tile.stamen.com/watercolor/{z}/{x}/{y}.jpg"

          layer-type="base"

          name="Stamen Watercolor"

          attribution="Map tiles by <a href='http://stamen.com'>Stamen Design</a>, under <a href='http://creativecommons.org/licenses/by/3.0'>CC BY 3.0</a>. Data by <a href='http://openstreetmap.org'>OpenStreetMap</a>, under <a href='http://creativecommons.org/licenses/by-sa/3.0'>CC BY SA</a>."

        />

        <l-tile-layer

          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"

          layer-type="base"

          name="OpenStreetMap"

        ></l-tile-layer>



        <l-control-layers />

        <l-control-zoom

          position="bottomright"

          zoom-in-text="*"

          zoom-out-text="/"

        />

        <l-control-attribution

          position="topleft"

          :prefix="customAttributionPrefix"

        />

        <l-control-scale position="bottomleft" />



        <l-control class="leaflet-control leaflet-demo-control"

          >Hello, Map!</l-control

        >



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

          <l-tooltip>

            lol
@@ -80,6 +104,8 @@ 
        ></l-polyline>

      </l-map>

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

      <label for="attributionPrefix">Attribution prefix:</label>

      <input name="attributionPrefix" v-model="customAttributionPrefix" />

    </div>

    <div style="height: 75vh; width: 50vw;">

      <l-map
@@ -104,17 +130,23 @@ 
  </div>

</template>

<script>

import LMap from "./components/LMap.vue";

import LIcon from "./components/LIcon.vue";

import LTileLayer from "./components/LTileLayer.vue";

import LMarker from "./components/LMarker.vue";

import LControlLayers from "./components/LControlLayers.vue";

import LTooltip from "./components/LTooltip.vue";

import LPopup from "./components/LPopup.vue";

import LPolyline from "./components/LPolyline.vue";

import LPolygon from "./components/LPolygon.vue";

import LRectangle from "./components/LRectangle.vue";

import LWmsTileLayer from "./components/LWmsTileLayer.vue";

import {

  LMap,

  LIcon,

  LTileLayer,

  LMarker,

  LControlAttribution,

  LControlLayers,

  LControlScale,

  LControlZoom,

  LControl,

  LTooltip,

  LPopup,

  LPolyline,

  LPolygon,

  LRectangle,

  LWmsTileLayer,

} from "./components";



export default {

  components: {
@@ -122,7 +154,11 @@ export default { 
    LIcon,

    LTileLayer,

    LMarker,

    LControlAttribution,

    LControlLayers,

    LControlScale,

    LControlZoom,

    LControl,

    LTooltip,

    LPopup,

    LPolyline,
@@ -146,6 +182,7 @@ export default { 
          attribution: "Weather data © 2012 IEM Nexrad",

        },

      ],

      customAttributionPrefix: "lol",

    };

  },

  computed: {
@@ -169,3 +206,12 @@ export default { 
  },

};

</script>



<style>

.leaflet-demo-control {

  background: white;

  border: 1px solid steelblue;

  border-radius: 0.6em;

  padding: 0.2em;

}

</style>

src/components/LControl.vue

0 → 100644
+53 −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: {

    ...props,

    disableClickPropagation: {

      type: Boolean,

      custom: true,

      default: true,

    },

    disableScrollPropagation: {

      type: Boolean,

      custom: true,

      default: false,

    },

  },

  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, DomEvent } = 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 });



      if (props.disableClickPropagation) {

        DomEvent.disableClickPropagation(root.value);

      }

      if (props.disableScrollPropagation) {

        DomEvent.disableScrollPropagation(root.value);

      }

    });



    return render(context, root);

  },

};

</script>

src/components/LControlAttribution.vue

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

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

import {

  props,

  setup as attributionControlSetup,

} from "../functions/controlAttribution";

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



export default {

  name: "LControlAttribution",

  props,

  setup(props) {

    const leafletRef = ref({});



    const registerControl = inject("registerControl");

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

    onMounted(async () => {

      const { control, setOptions } = await import(

        "leaflet/dist/leaflet-src.esm"

      );



      leafletRef.value = control.attribution(options);

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

      registerControl({ leafletObject: leafletRef.value });

    });

  },

  render() {

    return null;

  },

};

</script>

src/components/LControlLayers.vue

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

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

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

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

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



export default {
@@ -10,7 +10,7 @@ export default { 
    const leafletRef = ref({});



    const registerLayerControl = inject("registerLayerControl");

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

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

    onMounted(async () => {

      const { control, setOptions } = await import(

        "leaflet/dist/leaflet-src.esm"

src/components/LControlScale.vue

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

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

import { props, setup as scaleControlSetup } from "../functions/controlScale";

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



export default {

  name: "LControlScale",

  props,

  setup(props) {

    const leafletRef = ref({});



    const registerControl = inject("registerControl");

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

    onMounted(async () => {

      const { control, setOptions } = await import(

        "leaflet/dist/leaflet-src.esm"

      );



      leafletRef.value = control.scale(options);

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

      registerControl({ leafletObject: leafletRef.value });

    });

  },

  render() {

    return null;

  },

};

</script>