This is a hotline plugin extension for vue2-leaflet package
npm install --save vue2-leaflet-hotline
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 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
...
},
...
}
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
propThe 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.
You can use the following props to style the hotline:
5
per default.0
. 1
per default.'black'
per default.{ <stop>: '<color>' }
. { 0.0: 'green', 0.5: 'yellow', 1.0: 'red' }
per default. Stop values should be between 0
and 1
.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.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.Thanks to iosphere GmbH, the authors of the Leaflet.Hotline plugin. This package has been used as the basis to build this plugin.
MIT