Enable to distort videos on Leaflet maps.
npm install leaflet-distortable-video* Add script to html. You can use index.js or index.min.js in ./dist folder.
``html`
* You can also use npm install leaflet-distortable-video or yarn add leaflet-distortable-video.
To instantiate a L.DistortableVideo, specify the video URL or videoElement, four cornerL.VideoOverlay
points, and any options in the L.distortableVideo factory
method, for example:
`js
var corners= {
topLeft: L.latLng([30,-129]),
topRight: L.latLng([32,-100]),
bottomRight: L.latLng([13,-97]),
bottomLeft: L.latLng([13,-130])
};
let layer = L.distortableVideoOverlay("https://www.mapbox.com/bites/00188/patricia_nasa.mp4", corners, {
opacity: 0.8
}).addTo(map);
`
topLeft, topRight, bottomLeft and bottomRight are instances of L.LatLng, correspondingcorners
to the locations of the corners of the video. can be also L.LatlngBounds in factory method.
Corners can be also array of points. The order of the points is topLeft, topRight, bottomRight and bottomLeft.
`js
var topLeft = L.latLng([30, -129]);
var topRight = L.latLng([32, -100]);
var bottomRight = L.latLng([13, -97]);
var bottomLeft = L.latLng([13, -130]);
var corners = [topLeft, topRight, bottomRight, bottomLeft];
let layer = L.distortableVideoOverlay("https://www.mapbox.com/bites/00188/patricia_nasa.mp4", corners, {
opacity: 0.8
}).addTo(map);
`
This function enables to relocate the video on the map, for example:
`js
var corners= {
topLeft: L.latLng([30,-129]),
topRight: L.latLng([32,-100]),
bottomRight: L.latLng([13,-97]),
bottomLeft: L.latLng([13,-130])
};
overlay.setCorners(corners);
`