Vue2-leaflet-hotline2 NPM

vue2-leaflet-hotline

This is a hotline plugin extension for vue2-leaflet package

Install

npm install --save vue2-leaflet-hotline

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.