Is it possible to stretch a imageOverlay in leaflet? - javascript

I am making a leafletjs based application and I want the user to be able to 'draw' a svg image on the map. To accomplish this I am tracking the mousedown and mouseup events to define the imageBounds and using an imageOverlay to draw a svg image.
I want the svg image to be stretched so it completely fits the defined imageBounds, but instead is it scaled so it fits within the imageBounds without distorting the aspect ratio.
Is there a way to enable imageOverlays to ignore their original aspect ratio and stretch to fit in the imageBounds?
imageBounds = [southwest, northeast];
_tempShape = L.imageOverlay(_imageUrl, imageBounds);
_tempShape.addTo(_map);
EDIT: Tried to do the same thing with a bitmap image instead and it does stretch, so it seams to be a SVG specific thing.

I figured it out. It was not a leaflet problem but an inherent SVG behaviour. To allow a SVG to stretch while scaling I added the preserveAspectRatio="none" attribute to the SVG root node.
For anybody looking for more information on SVG scaling: https://css-tricks.com/scale-svg/

Related

Leaflet: Add image overlay with a GeoJSON mask

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.

Openlayers: Why do my drawings on my image canvas layer move on zoom?

I have an OSM Layer, a static ImageLayer and a CanvasImageLayer on top. I want to draw at specific pixel positions (relative to the 0,0 origin of the canvas) icons, e.g. at position 10,10.
This works, however, I do not understand why my canvas is resized when I move and why my Icons are then at the wrong position?
Even if I calculate the positions based on the new canvas size, they move and don't stay in their position. I really would need an explanation to understand this.
I oriented myself on this ImageCanvas example.
I only found this related question, but it does not explain it, nor does it give a solution to the problem:
openlayers 3: how to draw sth using canvas.getContext('2d') on top of the map

Raphaƫl.js: How to scale a circle's fill image to fit the circle?

I'm trying to use Raphael's VML functionality for generating a circle with an image (fix for IE8 that lacks border-radius).
My problem is that if I use
circle.attr({fill: 'url(image.jpg)'});
and my image is larger than the circle the image is only partially showed and I can't find a way to downscale the image to the diameter of the circle.
How can I do this?
Are you serious about fixing IE8 border-radius with RaphaelJS?
I would suggest something like css3pie and there is even question in SO about usage.
But still, if you want to use RaphaelJS, you will need to use Element.transform to scale your image and only afterwards, set up rounded corners effect with another element.

get dimension of an svg including stroke

I want to place an svg precisely into the corner of a div. The svg has a dynamic generated stroke. If the shape of the svg is irregular or lets say a star, the distance to the outmost part of the border is hard to calculate.
The problem could be solved, if I would be able to get the dimensions of the svg including the stroke.
My idea is:
load the external svg
place it in the middle of the div
apply the desired stroke-width
get the outmost dimensions of the svg
place it in the corner
Can I get the width of the svg including the stroke? Any other ideas?
Thanks
getBoundingClientRect is the only way short of calculating it yourself from first principles. That method is only implemented in Firefox and IE9+ as far as I know though.
For example this returns 54 on Firefox.

HTML/CSS drawing a square window in a css mask

So I have a grid of images (map tiles) and I draw a semi-transparent mask over it using an absolutely positioned div with width and height set to 100%.
I now want the user to be able to draw out a rectangle on the mask, with the mouse using mouse-down, drag, mouse-up. The rectangle would be drawn dynamically as the mouse moves, and the rectangle would be like a window through the mask displaying the map tiles underneath with no semi-transparency.
I'm currently looking at using 5 divs - one for the window and 4 for the mask which would be resized using javascript as I drag the mouse. Does anyone know an easier way to do this ? I'm using jquery and I need to support IE7 upwards so html5 only technology is out.
Cheers,
Colm
I think the jQuery Crop plugin does exactly what you need (Demo here).
Maybe it's possible to carve that part out from it.
You should try out SVG canvas instead. There's a SVG js library, good for beginner:
http://raphaeljs.com/, check it out
PLEASE NOTE THAT THIS HAS NOTHING TO DO WITH HTML5 (PLEASE DONT MIX UP WITH HTML5 CANVAS, THIS IS SVG)

Categories

Resources