vue2-leaflet-hotline

This is a fork of ikmolbo vue2-leaflet-hotline plugin, that solve the issue of intermediate value Error, and provide a demo like the original Leaflet.hotline demo

Also this is a hotline plugin extension for vue2-leaflet package

Install

npm install --save vue2-leaflet-hotline

For Demo Install

npm install leaflet vue2-leaflet --save

Demo

You can use the Demo.vue component, or check the demo

Usage

In <template> add

something like this

<v-map :zoom=10 :center="initialLocation">
  <v-tilelayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></v-tilelayer>
  <v-hotline :latlngs="latLngArray" :min="minValue" :max="maxValue"></v-hotline>
</v-map>

In <script> add

option 1

In the same template file, at <script> part, this will make the component available only to the template in this file

import Vue2LeafletHotline from 'vue2-leaflet-hotline'
...
export default {
  ...
  components: {
    'v-hotline': Vue2LeafletHotline
    ...
  },
  ...
}

option 2

At main Vue configuration, this will make the component available to all templates in your app

import Vue from 'vue'
import Vue2LeafletHotline from 'vue2-leaflet-hotline'
...
Vue.component('v-leaflet-hotline', Vue2LeafletHotline)

latlngs prop

The latlngs prop needs to be an array of LatLng points (a polyline) with an additional third element (z value) in each point; this determines which color from the palette to use.

Other props

You can use the following props to style the hotline:

• weight - Same as usual. 5 per default.
• outline-width - The width of the outline along the stroke in pixels. Can be 0. 1 per default.
• outline-color - The color of the outline. 'black' per default.
• palette - The config for the palette gradient in the form of { <stop>: '<color>' }. { 0.0: 'green', 0.5: 'yellow', 1.0: 'red' } per default. Stop values should be between 0 and 1.
• min - The smallest z value expected in the latlngs array. This maps to the 0 stop value. Any z values smaller than this will be considered as min when choosing the color to use.
• max - The largest z value expected in the latlngs array. This maps to the 1 stop value. Any z values greater than this will be considered as max when choosing the color to use.

Author

Ilya Oblomov

Acknowledgements

Thanks to iosphere GmbH, the authors of the Leaflet.Hotline plugin. This package has been used as the basis to build this plugin.

License

MIT