vue2-leaflet-freedraw
v1.0.4
Published
A Vue2Leaflet wrapper for Freedraw
Downloads
345
Maintainers
Readme
Vue2-Leaflet-Freedraw
This is a FreeDraw plugin for Vue2-Leaflet
Install
npm install --save leaflet vue2-leaflet vue2-leaflet-freedraw
or with yarn:
yarn add leaflet vue2-leaflet vue2-leaflet-freedraw
Demo
git clone https://github.com/Esurnir/vue2-leaflet-freedraw.git
cd vue2-leaflet-freedraw
yarn
yarn serve
The demo should compile and be visible from http://localhost:8080/ The source code of the demo is in the dev folder.
Usage
on <template> add
<l-map :zoom="10" :center="center">
<l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png" />
<l-control position="topleft">
<button @click="flipActive">
{{ isActive ? 'Deactivate' : 'Activate' }}
</button>
</l-control>
<l-freedraw v-model="polygons" :mode="mode" />
</l-map>
on <script> add
import LFreeDraw from 'vue2-leaflet-freedraw';
import { NONE, ALL } from 'leaflet-freedraw';
...
export default {
components: {
...
LFreeDraw
},
data() {
return {
...
polygons: [],
isActive: false,
}
},
computed: {
mode() {
return this.isActive ? ALL: NONE;
}
},
methods: {
flipActive() {
this.isActive = !this.isActive;
}
}
}
Access freedraw directly
If you need to access the freeDraw Object directly :
you can do it with a ref on the markercluster vue element and using the mapObject
property
...
<l-freedraw ref="freeDrawRef"> ... </l-freedraw>
...
...
this.$refs.freeDrawRef.mapObject.clear()
...
Props
Options
Accept all options from FreeDraw
Mode
Accept a number corresponding to one of the valid modes of freeDraw:
/**
* @constant NONE
*/
export const NONE = 0;
/**
* @constant CREATE
*/
export const CREATE = 1;
/**
* @constant EDIT
*/
export const EDIT = 2;
/**
* @constant DELETE
*/
export const DELETE = 4;
/**
* @constant APPEND
*/
export const APPEND = 8;
/**
* @constant EDIT_APPEND
*/
export const EDIT_APPEND = 10;
/**
* @constant ALL
*/
export const ALL = 15;
value
The v-model property : Accept a LatLng[][]
debounce
From my experience the rate events happened when drawing was a bit excessive, so I throttled the rythm of emitted event by default, setting this to :debounce="false" allow to bypass this settings (I don't remember why I coded it in the first place, there must have been a reason at one point). This might be removed later on if I find there's no use case for it.
Author
Jean-Baptiste Zeller
License
MIT