Leaflet.ImageOverlay.Rotated

Display rotated and skewed images in your LeafletJS maps.

This LeafletJS plugin adds a new class, L.ImageOverlay.Rotated, subclass of
L.ImageOverlay. The main
difference is that the position of L.ImageOverlay is defined by a L.LatLngBounds
(the L.LatLngs of the top-left and bottom-right corners of the image),
whereas L.ImageOverlay.Rotated is defined by three points (the L.LatLngs
of the top-left, top-right and bottom-left corners of the image).

The image will be rotated and skewed (as the three corner points might not form
a 90-degree angle).

Demo

http://ivansanchez.github.io/Leaflet.ImageOverlay.Rotated/demo.html

$3

To instantiate a L.ImageOverlay.Rotated, specify the image URL, the three corner
points, and any L.ImageOverlay options in the L.imageOverlay.rotated factory
method, for example:

``js
var topleft = L.latLng(40.52256691873593, -3.7743186950683594),
topright = L.latLng(40.5210255066156, -3.7734764814376835),
bottomleft = L.latLng(40.52180437272552, -3.7768453359603886);

var overlay = L.imageOverlay.rotated("./palacio.jpg", topleft, topright, bottomleft, {
opacity: 0.4,
interactive: true,
attribution: "© Instituto Geográfico Nacional de España"
}).addTo(map);
`

topleft, topright and bottomleft are instances of L.LatLng, corresponding
to the locations of the corners of the image. These three L.LatLngs might not
neccesarily be at the top or at the left of each other.

Alternatively, the first parameter to the constructor can be an instance of
HTMLImage.


Additionally, the reposition method allows to reset the LatLngs for the corner
points, effectively moving the image:

`js
overlay.reposition(updatedTopLeft, updatedTopRight, updatedBottomLeft);
`

$3

The classic way: copy the Leaflet.ImageOverlay.Rotate.js file and include it
in your webpage.

npm install leaflet-imageoverlay-rotated can be used to include this project
as a dependency. The package.json file will allow webpack/browserify to work
its magic.

There is also some support for Bower (in the form of a bower.json` file), but
Bower is being deprecated, so NPM is preferred.

This plugin has been tested only with Leaflet 1.0.0-beta and 1.0.0-rc1. Don't
expect it to work with 0.7.x.

$3

The code for this plugin is under a Beerware license:

----------------------------------------------------------------------------

"THE BEER-WARE LICENSE":
wrote this file. As long as you retain this notice you
can do whatever you want with this stuff. If we meet some day, and you think
this stuff is worth it, you can buy me a beer in return.

----------------------------------------------------------------------------

The demo uses an historical building plan dated from 1863, from the archives of the
Instituto Geográfico Nacional de España. These images
are available under a non-commercial license.