Vue2Leaflet is a great library that provides a very straightforward approach to using Leaflet maps in Vue applications. Leaflet.PolylineMeasure is a great Leaflet plugin that adds a tool to allow the user to measure distances along (poly)lines by drawing them on top of the map.
Today I released the initial version of a Vue2Leaflet plugin to provide a simple wrapper of the polyline measurement tool as a Vue2Leaflet plugin, via the vue2-leaflet-polyline-measure component. Usage is simple:
|
1 2 3 4 |
<l-map> <l-polyline-measure :options="{ showUnitControl: true }" position="bottomright"/> <!-- other map components --> </l-map> |
The options object is passed directly to the underlying library, so can be any of the polyline measurement options. The position parameter places the control in a corner of the map based on the available Leaflet control options.
I want to show the distance on firing “polylinemeasure:finish” event on modal. Please suggest how can I access the distance value.
Thanks for pointing out that these new events exist on Leaflet.PolylineMeasure now!
I have updated the Vue component to use the latest version, and added documentation to the readme about handling events—note that the events are actually fired by the Map component, *not* by the LControlPolylineMeasure one.
Please try upgrading to ^1.1.1, and let me know how it goes.