Getting bounds for Leaflet ImageOverlay - leaflet

Here's a mapbox example of using Leaflet image overlay: https://www.mapbox.com/mapbox.js/example/v1.0.0/imageoverlay-georeferenced/
Say I got a custom map, and I want to overlay an image on it. How would I go about getting the bounds for the location I want to put it in. How would I maintain the aspect ratio of the image?

Related

How to add a tile overlay to MKMapSnapshotter?

Is there any way to get a map snapshot with a tile overlay, for example for sharing or widgets?
MKMapView contains an addOverlay function that adds an MKTileOverlay overlay to the map. This is easy to do.
It is not possible to get a snapshot of such a composite view.
To get a snapshot of the map I used MKMapSnapshotter, which simply supplies a snapshot of any map slice. However, MKMapSnapshotter only gives the original map. If I need to add a layer, I have to draw it into the map snapshot. For simple layers like icons this is easy. But I don't know how to do it at all with a tile overlay.
I suppose I need to use MKTileOverlay to get an overlay image for the same area as the map snapshot. It is not a problem to merge such images. Unfortunately I don't know how to get it.
How to get a map image with a tile overlay?

Can I draw with client coordinates in Leaflet?

I am aware of this question, and the answer works ok for me but I would like the drawn polygons (hexagons) not to move or scale with the map.
Is there a way to do besides overlaying an SVG on top of the map and drawing on it?

Processing tiles generated by gdal2tiles.py in leaflet

I used gdal2tiles.py to split a large image into 256x256 tiles.
I then used leaflet to visualize this large image. This image is georeferenced and appears rotated on the screen. Everything is fine.
I'd like to process the 256x256 tiles of my image before there are displayed.
It is possible to watch load event to have opportunity to process tile but the tiles we get in load event are not in my image space. There are vertically aligned tiles in map, and my image is rotated.
Is there a plugin to handle this case ?
There is one to get coordinates in image space from a point clicked on map, but knowing which image tiles are hitting a map tile requires more than an inverse transform.

Cytoscape.js with leaflet

I want to use leaflet as Map library and use Cytoscape.js to display nodes as overlay. Also node locations are updated with zoom in and zoom out. What are the challenges on the way. Any suggestions?
I have list can anyone support :
Use canvas element as overlay on leaflet.
how to translate geo location to canvas location
relocating nodes on zoom in and zoom out.
What are the challenges on the way?
A lot. You'll have to be more specific when asking.
Use canvas element as overlay on leaflet.
See the documentation for L.Canvas (and its source code if you want to implement something similar).
how to translate geo location to canvas location relocating nodes on zoom in and zoom out.
See the L.Map.LatLngToContainerPoint() method. Zoom animations are handled via CSS and screen coordinates of map layers are not recalculated during zoom animation frames.

Apply Masking in Bing Map AJAX

I am trying to overlay an image in bing map and then mask certain parts of the image.I tried the below link and I could overlay the image. However my next step is to mask.I want the image of a particular region and not a entire rectangular image.
http://blogs.bing.com/maps/2013/05/22/image-overlays-with-bing-maps-javascript/
Any inputs on this? Does Bing Map have coordinate based masking.
Thanks!