Leaflet: Add image overlay with a GeoJSON mask - javascript

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.

Related

keeping a drawing canvas visible behind an image

I wonder if anyone could assist me with this?
I am writing a webpage with a drawing area ("GraphicsArea", below) that loads a map as a SVG image into the innerHTML of the "DiagramArea" div contained in it. The SVG has defined areas which have events attached to them and css styling that allows me to highlight areas as I mouseover them, and fill them with a highlight colour when I click on them. This all works fine.
I have, superimposed over the "DiagramArea", a HTML5 canvas element ("CanvasArea"). I have some javascript that allows me to draw inside this freehand with the mouse. The canvas is transparent, and I can see the map underneath it when I draw.
I can toggle between the drawing canvas layer and the "DiagramArea" with the SVG which I am using as an imagemap, by setting zIndex. I have a button that does this, allowing me to swap between functionality to highlight areas of the map, and the freehand drawing functionality.
My problem is that if I toggle away from the canvas, its drawing is hidden while I use the image map functionality. I can toggle it back again to display the drawing overlay after I have highlighted the areas I want to highlight, but it's a bit clumsy
Is there a way to keep the canvas contents visible while I'm using the rollover and click events attached to the SVG? I'm not particularly fussy as to whether it's a style or code solution. I'd prefer to avoid having to use an external library, if possible.
<div id="GraphicsArea">
<canvas id='CanvasArea'></canvas>
<div id="DiagramArea"></div>
</div>
Many thanks.

CSS 2D Transform Matrix decimal place limits

Perhaps this is an unusual way to do things, but I am creating an interactive map that has landmark markers embedded in the actual map image (a colored circle with a number inside of it). The image is in a div that allows you to pan and zoom with you mouse and mousewheel. I am using CSS transforms to accomplish that pan and zoom. This part is working great.
The issue is that I have 90 landmarks on the map that need to be able to have the user click on them and have a tooltip/popup open with more info. I am accomplishing this with an image map and specifying the coordinates. That is all working as well.
However, I want the user to be able to hover over the image map area and have an alternate image display over the top of the main map image to effectively "highlight" the landmark circle on hover. Then I use the same alternate image when they click on the landmark to show a "highlighted" circle for the selected landmark.
I have this working by using a single div for the hover image display, moving it off canvas and then applying a CSS transform to move it into place and show the right background image when the user hovers over the image map area.
This is all working except for one very teeny tiny problem:
I am passing in transform values to the CSS through jQuery and they are being rounded to 3 decimal places when the transform is applied. Here is javascript used to set an example transform.
$(function(){
$('#landmarkHighlightSelected').css({
'transform-origin': '0px 0px 0px',
'transform': 'translate(121.11172485351563px, 335.38427734375000px) scale(1)',
});
});
When I inspect the transform in Chrome dev tools, I see that the translate values have been converted to 3 decimal places (rounding applied). The matrix value is listed as the following:
matrix(1, 0, 0, 1, 112.112, 335.384)
Under "normal" circumstances, this likely wouldn't matter. But the effect that I am getting is that the "highlight" div that is moved into place is "close" to where it should be, but depending on what the results are of the calculation taking into account image pan/zoom values, I will get a "shift" effect and you can see that the "highlight" div is offset ever so slightly from the landmark in the resized/moved map image behind it.
So what I am seeing is that the CSS transforms are limited to 3 decimal places? Is that right? Is there any way to get them to accept more decimal places?
I understand that what I am doing is a bit unorthodox and that by embedding the "off" state landmark markers in the map image, it's allowing the pan and zoom to move the landmark to values that the browser appears not to be able to render.
But I went with this approach because trying to move 90 divs around in the browser allowing pan and zoom in case the user moused over it was causing a huge jerking/dragging/delayed response in the movement because the code was trying to recalculate the positions of all of those divs as the user moved things around.
Any help or insight on this would be SO SO SO appreciated it. I have been getting nowhere on this for over a week and just figured out that it was the 3 decimal place limit causing the rendered div to appear to shift.
Thank you so much,
Jenny

At a high zoom feature icons disappear

When zoomed into a feature icon, the larger scale it is the more chance it has of not being displayed when partially off screen.
The geom point is center of the icon, so at a high zoom the geom point being off screen put it outside of the extent (fine), but I need the icon to still display partially within the extent. The effect is that it stays partially onscreen until it hits just past half way off screen at which point it stops displaying.
I've looked at ol.extent.buffer but I don't think it's for me. Is there a 'buffer ' I can set that means that the view is rendering an extent larger than it so icons will still display partially?
ol.layer.Vector takes a renderBuffer argument, which lets you specify a buffer around the viewport which will be included in the rendering. The default is 100px.

how to use transparent effect for only a part of the image

I am not sure if it is possible. But let's say there are two images, one over another. Then I will have a circle size 100px around my cursor. So when I move the cursor over the image, it shows part of image that is under the front image. So the back image is hidden and visible only if the circle size 100px is over some part of it.
Unfortunately I have no code as I am not sure if it is possible to create.
However, any idea about it?
I would try actually stacking the hidden image above the visible one, then use HTML5's canvas to track your mouse cursor, clip a circular area underneath your cursor, then draw your image above it. This gives the illusion that you're "revealing" an underlying image, when in fact you're really revealing a small portion of an image stacked on top. Repeat this any time the user moves his/her cursor.
Here are some resources you might find useful in coding this:
HTML5 Canvas Clipping Region Tutorial
HTML5 Canvas Mouse Coordinates
Stack Overflow: clearing circular regions from HTML5 Canvas

openlayers heatmap shows red lines on map

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.

Categories

Resources