Displays rotated/slanted image overlays in Leaflet
npm install leaflet-imageoverlay-rotatedDisplay rotated and skewed images in your LeafletJS maps.
This LeafletJS plugin adds a new class, L.ImageOverlay.Rotated, subclass ofL.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).
http://ivansanchez.github.io/Leaflet.ImageOverlay.Rotated/demo.html
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, correspondingL.LatLng
to the locations of the corners of the image. These three s 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);
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 projectpackage.json
as a dependency. The 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.
The code for this plugin is under a Beerware license:
----------------------------------------------------------------------------
"THE BEER-WARE LICENSE":
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.