openlayers热图在地图上显示红线

Question

i got a problems using the heatmap-openlayers.js, i loaded a page with some default points that only shows the heatmap gradient, but when i dragged the image (map) or moved the gradient to the bottom of the image i found out that i also have a red line on the map, it's seems to be a replication of the gradient's set of points but couldn't figure out why it's happening..

i uploaded a sample to: http://hightech-library.com/heatmap

and i added a bit css so you will see the problem on the go, if you will drag the image to the left the red line will disappear like something is blocking it, and when dragging back it will reappear..

check out the source of the page and you'll see the sample code.

can anyone tell me if i'm doing anything wrong or how to fix it..

Answer 1

i figured out what the red line were, when drawing a heatmap it draws all the points with the max gradient color with an offset of 1000 from the position you requested and then it makes a shadow on the canvas of these points instead, this shadow is the heatmap that you see with all the gradient's colors.

When drawing on an image with a fixed color this offset of 1000 wasn't enough and when i dragged the map i saw the source of the shadow as "red lines".My solution was to increase this offset and push those "red lines" outside the canvas.