Warning: The magic method SFML_Singleton::__wakeup() must have public visibility in /home/public/wp-content/plugins/sf-move-login/inc/classes/class-sfml-singleton.php on line 72

Warning: Cannot modify header information - headers already sent by (output started at /home/public/wp-content/plugins/sf-move-login/inc/classes/class-sfml-singleton.php:72) in /home/public/wp-includes/feed-rss2.php on line 8
leaflet – Thoughts, etc. https://www.munderwood.ca Tracking the occasional random walk Thu, 25 Apr 2019 18:08:05 +0000 en-CA hourly 1 https://wordpress.org/?v=5.7.2 https://www.munderwood.ca/wp-content/uploads/2016/03/photo-150x150.jpg leaflet – Thoughts, etc. https://www.munderwood.ca 32 32 Measuring distances on Leaflet maps in Vue applications https://www.munderwood.ca/index.php/2019/04/25/measuring-distances-on-leaflet-maps-in-vue/ https://www.munderwood.ca/index.php/2019/04/25/measuring-distances-on-leaflet-maps-in-vue/#comments Thu, 25 Apr 2019 18:08:05 +0000 http://www.munderwood.ca/?p=279 [Read more...]]]> 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:

<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.

]]>
https://www.munderwood.ca/index.php/2019/04/25/measuring-distances-on-leaflet-maps-in-vue/feed/ 2