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..
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.
Related
I'm trying to add an image overlay on top a Leaflet map, but I want it to be drawn only in the area that a geo-json multipolygon closes (so treat the geo-json layer as a mask for the image). The image I want to display is rectangular, with no transparent areas.
By using a SVG mask, I achieve my purpose. As the geo-json is put in a SVG element, I'm able to fill it with my image.
https://gyazo.com/069ecec5904026d5f4d0624c6f1a2a7e
But the problem arises when I start zooming in. The SVG where the geo-json is placed changes its size and shape. It becomes smaller than it should be (because areas that are outside the map are removed from the SVG), so the image is not centered on its exact position anymore.
https://gyazo.com/68148043d5ff3d11c0a13aa1d29c197b
As you can see, both when zooming and when panning the map, the image moves, and that's because the SVG where the geo-json is displayed changes its width and height.
Here is a fiddle with the code I came up at the moment: https://jsfiddle.net/8n3m6t51/
I can think for several solutions:
Force Leaflet to always draw the full geo-json area, even those polygons or areas that are out of the screen.
Use a ImageOverlay and set it a mask (but I think this one would be impossible).
But at the moment I haven't figured out what to do to get this issue fixed.
I use hover tooltips in my map. When an area is hovered, I show a tooltip with a small XY shift to the top left corner so that the pointer of the tooltip is not covered by the mouse cursor.
When I move mouse cursor to another area, near its border, like show in the image, the area is highlighted which is under the cursor, not under the square pointer as should be.
What are options to fix this issue? In the ideal way, I would like hover effect to be applied not to the mouse cursor coordinates, but to the coordinates of some other point that is known and changes while mouse is moving.
I once had a similar problem that I tried to solve with a different approach. I wanted to calculate the centroid of the polygon and always place the marker (in your case square pointer) on the calculated position once the user hovers over the polygon.
Main problem I had was that my polygons were concave and had holes in them (you will have the same problem if you are working with country borders) so I found a good algorithm (library) that I used to do this called Polylabel.
You can read more on this topic and how the guys from MapBox used it to solve their label positioning problems on this link.
Although this is not the answer to your question I found that this solution is fast and usable but only if the relation between the zoom level and polygon surface makes sense.
If I wanted to do something like you are suggesting I would first have a default point offset and if that offset goes outside the polygon I would find the nearest point in the polygon coordinates and attach it to that point.
To do these calculations you can use turf.js library. It has the function to return boolean value if the second geometry is completely contained by the first geometry and others that can help you to find the nearest point on the polygon border. I hope this helps!
I currently have an issue whereby changing the fillStyle of a canvas is causing a smooth diagonal line to turn jagged and I don't know why.
I've created a JSBin where you can see the effect here: http://jsbin.com/fadeyiva/1/edit
I've set the background colour to black so you can more easily see the canvas and the jagged edge. The grey shape is the canvas, if you scroll down to the bottom of the page and then back up it should trigger the waypoint and change the canvas colour to orange.
However, if you look at the bottom diagonal line it starts off smooth when it's grey but when it changes colour the edge becomes very jagged. I don't know why this is happening because the code is only changing the fillStyle, it's not altering the shape of the canvas at all.
The reason is because your angled box is originally being drawn in your canvas with respect to dithering (this is taken care of natively). When you apply a fill change as you are, you throw out the idea of dithering and simply make every single pixel of the object the same color. The edges of the object need to blend with the background (thats what dithering means).
I suggest instead of just adjusting the fill value of the object, redraw the entire object as you did in your window.onload() function. Because you are calling a redraw, the browser will force the dithering on the object and adjust it for the new color.
This is about WEB development, Canvas, HTML5.
I'm developping a paint application with HTML5 Canvas and JQuery. You can draw several layers, and you got a dynamic zoom with a magnifying glass effect.
The architecture is multiple canvas :
background :
canvas-bg
layers :
layer0
layer1
layer2
...
layerN
tools :
ghost (to display a "ghost" line when the user want to draw a line. Releasing mouse confirm the draw)
magnify-layer
My problem is the zoom. To get the effect I want I redraw ALL LAYERS on the magnify-layer. Of course, when you are drawing a 2000*2000 picture, it is VERY slow. Moreoften, you can move the magnify-glass to zoom everywhere, and the redraw is recall on MouseMoveEvent.
To get it faster I only draw the little area under the glass (instead of entire layer). But it's still slow. How can I speed up know ?
illustration : http://imgur.com/hAtYsZi
You can see in the black circle the area is zoomed.
I used this code to start :
Démo : http://www.script-tutorials.com/demos/167/index.html
Try this...it might help.
I'm guessing you're doing traditional "magnifying": you're displaying at reduced resolution and then "magnifying" at full resolution.
So, when the user selects the magnifier tool, "flatten" all your layers onto another canvas.
Then cache the flat canvas to an image at 1/2 resolution. This becomes your unmagnified background.
Finally do your magnifying trick: Grabbing the appropriate pixels from the flattened canvas and show them in a floating magnifier.
Yes, there is some overhead+time in flattening your image, but that might be offset by the time it takes the user to select and position the magnifier.
I have some graphs on my page. When the user drags his cursor over the picture, I'd like to show a horizontal line over the graph.
The one above is the starting point and the latter shows what should happen when the user points his cursor over the graph. The line should stay on the same level with the cursor, when it's over the image.
Is this possible with Javascript, for example?
It is, you need e.g. a div box positioned at cursers Y value with 1px green border. Position has to be set to absolute. But you can't paint directly in the image.
You can use D3, and based on svg, to draw the graph and the hover line , you could add other graph component to interact as well such as a slider bar to select sub interval to enlarge, changing labels etc.
Take this as an example to develop:
http://mpf.vis.ywng.cloudbees.net/
(you can drag the yellow bar, and click the legend; for source code, click fork me on github)