leaflet / leaflet.heat Goto Github PK
View Code? Open in Web Editor NEWA tiny, simple and fast heatmap plugin for Leaflet.
Home Page: http://leaflet.github.io/Leaflet.heat/demo
License: BSD 2-Clause "Simplified" License
A tiny, simple and fast heatmap plugin for Leaflet.
Home Page: http://leaflet.github.io/Leaflet.heat/demo
License: BSD 2-Clause "Simplified" License
Could you please update project to be compatible with latest Leaflet 1.0.dev?
It has essential bug fixes, but with that one Leaflet.heat doesn't work at all.
All what do I have is this error "Uncaught TypeError: Cannot read property 'lat' of null"
Edited (in case it helps someone else): I've tried to do the following to make it work on iPad. I was expecting it to make the mouseover (or touch) work, but instead the map stays static and the touch events do not work. What's wrong?
Code follows below:
map.on ({
touchstart: function () { draw = false; },
touchend: function () { draw = true; },
touchmove: function (e) {
if (draw) {
heat.addLatLng(e.latlng);
}
}
})
Hi,
I would like to use your library for our development (replace the old git://github.com/johnthillaye/Leaflet.heat.git). We are using bower to pull the libraries, and is it possible to add bower support to your library?
Thanks
Jonathan
Is there any way to accomplish similar behavior to the ILayer BringToFront/Back? My use case is that I need to be able to reorder the layers on the map to, for example, send the heatmap layer below the other layers.
is it possible to add an option to leaflet.heat to expand the heatmap layer beyond the size of the map-view, say triple the length & height? so that when a user pans, the heatmap is not cutt off and instead feels "continous"?
After the heatmap has been drawn, I would like to get the heat value of one specific point by inputting the lat and lng.
Intensity does not work and there is NO real documentation for this plugin.
multiple developers have this problem. Please fix.
http://stackoverflow.com/questions/26767722/leaflet-heat-issue-with-adding-points-with-intensity
I see from #12 and other places that others besides me are very interested in using geojson files as sources for heat maps. After a little fiddling, I seem to have it working for myself. Any objections to adding fairly explicit instructions to the readme?
PS My own preference would be for built-in support, seeing how it's not very difficult and geojson is a fairly robust standard.
@mourner @meceo @tmcw @jfirebaugh @ddproxy
Hello Guys,
I am trying to create a heatmap based on the the values, I don't want to see the density as of now.
Is there a way I can avoid mixing the intensities as I zoom out? I tried playing with your library but no luck. It will be great if we can average out the intensities as we zoom out instead of adding them up.
From Leaflet/Leaflet#4511 by @mgleahy:
Hello all,
I'm trying out leaflet-heat, and would like to work with the 1.0.0-rc1 version of leaaflet. So far, pretty much everything is working fairly well, except that the pinch zoom of a leaflet-heat layer on a mobile device does not animate with the rest of the map. It works fine with leaflet-0.7.7.
I'm just wondering if someone knows what I would need to change in the leaflet-heat source to make it play nice with leaflet 1.0.0...any suggestions?
Here's a sample - open it on an iPad, or other touch device...then try a pinch zoom:
Since geojson is turning into a de-facto standard, it seems like it would be useful to have geojson support for adding points, similar to the standard leaflet library. It seems like it would be a fairly simple fix, and I would consider contributing if there is sufficient interest.
I try to put this heat map layer under some geojson layers, but failed. Is there any suggestion to do that?
Thank you.
Any examples of Leaflet.heat code following this structure would be very helpful eg.
L2 = leaflet() %>% addTiles()
L2 = L2 %>% registerPlugin(leafletHeatPlugin)
L2 = L2 %>% setView(29.7632836, -95.3632715, 10)
L2 = L2 %>% addLayersControl(
baseGroups = names(esri),
options = layersControlOptions(collapsed = TRUE)
)
L2 = L2 %>% addAssets
L2 = L2 %>% addHeatmap(addressPoints)
L2 = L2 %>% add
the Leaflet.heat approaches that seem to sort of work use L2$ and yet many examples of Leaflet in R are given using %>%:
L2 <- Leaflet$new()
L2$setView(c(47.5982623,-122.3415519), zoom=10)
L2$tileLayer(provider="Acetate.terrain")
L2$addAssets(jshead = c("http://leaflet.github.io/Leaflet.heat/dist/leaflet-heat.js"))
L2$setTemplate(afterScript = sprintf("
<script>
var addressPoints = %s
var heat = L.heatLayer(addressPoints).addTo(map)
</script>
", j
))
Hi,
great demo.
is the heatmap able to handle 200k data points (lat/long)? i plan to add the points on the fly, e.g. addLatLng, so will it slow down the rendering?
you set the default radius to 25, what does it mean? does the radius scale based on map zoom?
Thanks
Is it possible to supply a click or hover event on each point drawn, similar to maplarge's "Average Household Incomes" map - http://maplarge.com/demos
Hi,
My use case is as follows, I draw a shape (using the leaflet-draw plugin for shape drawing and editing) on the map to query some locations from a database in an area covered by that shape and show them on a map. I am also attaching a hover over label to the shape to show what data the locations represent. See screenshot below:
The problem is when I do a similar thing but with heatmap instead of markers, I lose the connection with the shape because the heatmap canvas gets placed on top of the svg shapes and I can't see the label anymore. Not only that I can't even remove the shape anymore because of this.
Is there a way to get around this problem in the current implementation of the leaflet-heat?
Thanks a bunch
Aman
Is there any way that I can create a heatmap directly from a GeoJSON?
Hi Vladimir,
I just noticed a small glitch with the heatmaps library for Leaflet: there’s no way to overlay two heatmaps one on top of the other.
Is it any simple to fix?
Hi,
I'd like my heat point around lat/lng
to have a fixed (zoom independent) radius of 500m : how can I specify this ?
Thank you
I found a bug that the heat map doesn't render the points when the global map is rotated over 360 deg.
The bug is caused by LatLngBounds.contains method which cannot handle the latLng point properly when the lng doesn't fit into [-180,180]
I have a fix for HeatLayer.js
var southWest = this._map.containerPointToLatLng(L.point([-r, -r]));
var northEast = this._map.containerPointToLatLng(size.add([r, r]));
var bounds = new L.LatLngBounds(southWest,northEast);
// console.time('process');
for (i = 0, len = this._latlngs.length; i < len; i++) {
var point = $.extend([],this._latlngs[i]);
while( point[1] < southWest.lng ) {
point[1] += 360;
}
while( point[1] > northEast.lng ) {
point[1] -= 360;
}
In example the heatmap is only loaded after a drag has ended, resulting in a half drawn heatmap.
See this picture for a visual explanation.
What can be done to draw heatmaps while dragging or alternatively always have the heatmap drawn even if not inside the current viewport?
How would you go about toggling a heat layer's opacity on/off and adjusting the Z index- in reference to having multiple heat layers on the same map? Mainly just worried about the opacity, but the z index would be nice.
Thanks!
There's any way to install it using Bower
Hello,
I would like to specify a heat map with negative and positive values. Is it possible ?
Example : [ P1 {lat:0, lng:0, value: -0.5}, P2 {lat:10, lng:0, value: -0.2}, P3 {lat:10, lng:10, value: 0.3} ]
I think about a solution but it doesn't work :
In this example, if I add 0.5 to the values I will have positive values. However, assuming 0 is blue and 1 is red, the fusion of P1 and P2 will produce a more red color although a fusion of negative values will produce a more blue color.
Thank you
When intesity is provided as altitude it isn't computed properly (the values are too small and everything is trated as value 1). To get it to work correctly I changed two bits of code in the _redraw function:
k = this._latlngs[i].alt || (1 * v);
Multiplying the alt with v makes it really small, so I went for not doing it.
Math.max(cell[2], 1)
If the values are too small in line 144 this will always be < 1 and after changing line 144 it will always be 1 if Math.min() is still used.
As far as I can see it produces a result which looks better, but still isn't really correct IMO. I used this data for testing:
{max: 70, data: [{lat: 0, lon: 0, value: 0},{lat: 10, lon: 10, value: 10},{lat: 20, lon: 20, value: 20},{lat: 30, lon: 30, value: 30},{lat: 40, lon: 40, value: 40},{lat: 50, lon: 50, value: 50},{lat: 60, lon: 60, value: 60},{lat: 70, lon: 70, value: 70}]}
and when zoomed out max it doesn't look correctly to me.
When updating the heatmap layer while panning the map, the heatmap layer displays with an offset compared to the base map layer so the heatmap doesn't follow exactly the basemap movements.
To reproduce, you can use this code: https://gist.github.com/josselin-c/d1ea2b6e1c0fddea4f1b
Is it possible to manipulate a singe Point? It would be very cool if you can change the Blur, Radius for a single Point
Is it possible to set a custom radius per point rather than a radius for the set of points. I am trying to construct a heatmap from polygon centroids and would be great to be able to set a larger radius for larger polygons. The resultant effect would then hopefully be that I could weight the intensities for smaller polygons over those of larger.
Hi!
Thanks for this library!
I'm trying to create a heatmap like the one below:
(Source: https://www.walkscore.com/choice/restaurants/NY/New_York)
It uses IDW - https://en.wikipedia.org/wiki/Inverse_distance_weighting. Notice also that the heatmap layer doesn't change as you zoom in/out.
I'm wondering if Leaflet.heat supports this kind of heatmap visualization? Or is it something I'd have to implement manually?
Thanks!
Leaflet.heat code contains one of the best canvas layer solution for Leaflet. Is there someone to make this separate project and maintain it?
/*
Generic Canvas Overlay for leaflet,
Stanislav Sumbera, April , 2014
*/
L.CanvasOverlay = L.Class.extend({
initialize: function (userDrawFunc, options) {
this._userDrawFunc = userDrawFunc;
L.setOptions(this, options);
},
drawing: function (userDrawFunc) {
this._userDrawFunc = userDrawFunc;
return this;
},
params:function(options){
L.setOptions(this, options);
return this;
},
canvas: function () {
return this._canvas;
},
redraw: function () {
if (!this._frame) {
this._frame = L.Util.requestAnimFrame(this._redraw, this);
}
return this;
},
onAdd: function (map) {
this._map = map;
this._canvas = L.DomUtil.create('canvas', 'leaflet-heatmap-layer');
var size = this._map.getSize();
this._canvas.width = size.x;
this._canvas.height = size.y;
var animated = this._map.options.zoomAnimation && L.Browser.any3d;
L.DomUtil.addClass(this._canvas, 'leaflet-zoom-' + (animated ? 'animated' : 'hide'));
map._panes.overlayPane.appendChild(this._canvas);
map.on('moveend', this._reset, this);
map.on('resize', this._resize, this);
if (map.options.zoomAnimation && L.Browser.any3d) {
map.on('zoomanim', this._animateZoom, this);
}
this._reset();
},
onRemove: function (map) {
map.getPanes().overlayPane.removeChild(this._canvas);
map.off('moveend', this._reset, this);
map.off('resize', this._resize, this);
if (map.options.zoomAnimation) {
map.off('zoomanim', this._animateZoom, this);
}
this_canvas = null;
},
addTo: function (map) {
map.addLayer(this);
return this;
},
_resize: function (resizeEvent) {
this._canvas.width = resizeEvent.newSize.x;
this._canvas.height = resizeEvent.newSize.y;
},
_reset: function () {
var topLeft = this._map.containerPointToLayerPoint([0, 0]);
L.DomUtil.setPosition(this._canvas, topLeft);
this._redraw();
},
_redraw: function () {
var size = this._map.getSize();
var bounds = this._map.getBounds();
var zoomScale = (size.x * 180) / (20037508.34 * (bounds.getEast() - bounds.getWest())); // resolution = 1/zoomScale
var zoom = this._map.getZoom();
// console.time('process');
if (this._userDrawFunc) {
this._userDrawFunc(this,
{
canvas :this._canvas,
bounds : bounds,
size : size,
zoomScale: zoomScale,
zoom : zoom,
options: this.options
});
}
// console.timeEnd('process');
this._frame = null;
},
_animateZoom: function (e) {
var scale = this._map.getZoomScale(e.zoom),
offset = this._map._getCenterOffset(e.center)._multiplyBy(-scale).subtract(this._map._getMapPanePos());
this._canvas.style[L.DomUtil.TRANSFORM] = L.DomUtil.getTranslateString(offset) + ' scale(' + scale + ')';
}
});
L.canvasOverlay = function (userDrawFunc, options) {
return new L.CanvasOverlay(userDrawFunc, options);
};
I have a need to specify minOpacity and pass it to draw like so:
this._heat.data(data).draw(this.options.minOpacity || 0.05);
I was hoping to submit a PR with this change, but I don't see a grunt or jake file or anything. How do I run a build for this?
There seems to be bug in heat map generation. For example there are five points with different weights and a defined color gradient. Expected output must be these points with different colors, yet the out shows same color for each point.
Below is the example code which generates incorrect output
`var map = L.map('map').setView([43.46811941, -90.04569087], 5);
var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
addressPoints = [[42.35810000, -71.06360000, 10.3],
[42.82995815, -74.78991444, 0.4],
[43.17929819, -78.56603306, 0.5],
[43.40320216, -82.37774519, 0.6],
[43.49975489, -86.20965845, 0.7],
[43.46811941, -90.04569087, 0.8],];
var heat = L.heatLayer(addressPoints, {minOpacity:1, blur:0, max: 1.0}).addTo(map);`
Please see the following fiddles
Fiddle with incorrect output using heat_map.js: https://jsfiddle.net/y20js9nm/13/
Fiddle with correct output using heatmap.js: https://jsfiddle.net/pz4usuLe/40/ (had problems with loading external js)
Fiddle with correct output using heatmap.js: https://jsfiddle.net/pz4usuLe/43/ (Fixed)
Doesn't seem like this is possible via the current API
I have a map that uses Google Maps and their visualization.HeatmapLayer with the default colours, and radius=20:
http://racelifts.org/Highland-Fling-2014/stats
I'm trying to reproduce this as closely as I can with Leaflet and Leaflet.heat - colours, opacity, etc. I've experimented with radius, blur, maxZoom & gradient settings, but I can't get close :( Is it possible? Thanks
It seems that the only way to have sections show up as higher color intensities is to have several points clustered close together.
In other words, when given individual points (that are far apart from another) with different altitude values, the heatmap will show the same color of intensity for all points. Is this expected behavior?
This package has npm versions but not corresponding git tags. Using npm version
will create the tag automatically: for future releases we should have git tags.
trying the 10.000 points example,
i got this error
"Uncaught TypeError: Cannot read property '0' of undefined "
sample of my data:
var addressPoints = [
[-35.4185239604101, -60.1819977605355,"540"],
[-35.4256691043552, -60.1671376727503,"711"]
.....
];
Any change for support for leaflet 0.8-dev?
Chrome throws following errror
Uncaught TypeError: Cannot read property 'call' of undefined leaflet.js:5
o.Map.o.Evented.extend.whenReady leaflet.js:5
o.Map.include.addLayer
I'm testing your examples but i can only get them to work on Safari, have you hear of any incompatibilities with other browsers?
It works here ( http://leaflet.github.io/Leaflet.heat/demo/draw.html ) without any flaws, but when i try to copy your code, and run in my app it only works with Safari, doesn't show any error, i can't see any heatmap points, just the map.
Any help would be appreciated.
Best regards,
João Rodrigues
I am pretty sure the answer is no, so I guess this is a feature request/call for help?
It would be very useful if there were events that we could listen for to know when the heatmap drawing has started and completed, similar to other leaflet layer types. I am building an time series animation with a heatmap layer but the drawing inevitably lags behind the time tick marker. In this case it would be nice to know when the heatmap render has completed and wait to advance the time tick marker until it has drawn.
Anyone have any suggestions?
I am trying to implement a heatmap with high opacity but when I set minOpacity it seems to not have any effect. Is there something I am missing?
@mourner Is it possible to change the radius based on zoom level. For eg. if I zoom out, the radius of a lat/lng should decrease and if we zoom in the radius should increase, but keeping the allocated intensity value to the given lat/lng value and not adding up the intensities on zoom out.
I tried to modify the draw() function but it doesnt work. The radius() function just gets called once upon initialization, I tried to call it on each zoom in/ out activity from redraw() but it doesn't work, following is the sample code of what I am trying to achieve:
draw: function(t) {
this._ctx.canvas.height = this._ctx.canvas.height + (this._r * 10);
this._ctx.canvas.width = this._ctx.canvas.width + (this._r * 10);
this._circle || this.radius(this.defaultRadius), this._grad || this.gradient(this.defaultGradient);
The canvas draw fails to plot the points on the map.
When I set the max value to 5, I am getting following error in my browser:
Uncaught IndexSizeError: Failed to execute 'addColorStop' on 'CanvasGradient': The provided value (5) is outside the range (0.0, 1.0)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.