vue2-leaflet-heatmap
This is a heatmap extension for vue2-leaflet package.
Install
npm i vue2-leaflet-heatmap
Usage
In <template> add
something like this
<l-map :zoom=10 :center="initialLocation">
<l-tilelayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></v-tilelayer>
<LeafletHeatmap :lat-lng="latLngArray" :max="maxValue" :radius="15"></LeafletHeatmap>
</l-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 LeafletHeatmap from './LeafletHeatmap'
...
export default {
...
components: {
LeafletHeatmap
...
},
...
}
option 2
At main Vue configuration, this will make the component available to all templates in your app
import Vue from 'vue'
import LeafletHeatmap from './LeafletHeatmap'
...
Vue.component('LeafletHeatmap', LeafletHeatmap)
latlngs
prop
The lat-lng
prop needs to be an array of LatLng
points (a polyline) with an additional third element (intensity) in each point.
Other props
You can use the following props to style the hotline:
- min-opacity - the minimum opacity the heat will start at
- max-zoom - zoom level where the points reach maximum intensity (as intensity scales with zoom), equals
maxZoom
of the map by default - max - maximum point intensity,
1.0
by default - radius - radius of each "point" of the heatmap,
25
by default - blur - amount of blur,
15
by default - gradient - color gradient config, e.g.
{0.4: 'blue', 0.65: 'lime', 1: 'red'}
Author
Jurian Baas, Nicolò Maria Mezzopera
Acknowledgements
Nicolò Maria Mezzopera was nice enough to turn this into a proper npm module, thanks!
This is just a wrapper, all credit to the people who made Leaflet and Leaflet.heat, to Korigan, who made Vue2Leaflet, and to @jperelli and @ikmolbo for creating the Vue2Leaflet markercluster and Vue2Leaflet hotline plugins.
License
MIT