react-leaflet-distortable-imageoverlay

Scale, skew, rotate and translate image overlays in react

A react-leaflet ImageOverlay that supports stretching, skewing, distorting, rotating, translating and transparency. It is designed to allow positioning and rectification of aerial, drone and UAV imagery on a react-leaflet map.

It was built for the Soar platform by extending the functionality of Leaflet.DistortableImage and Leaflet.Path.Transform

Live Demo

Install

npm install --save react-leaflet-distortable-imageoverlay

Usage

The ReactLeafletImageOverlay component takes the corners of the ImageOverlay and updates the parent on changes with the onWellKnownTextUpdated and onCornersUpdated handlers. The editMode can be one of: 'rotate', 'translate', 'distort' and 'stretch'. The component itself has no toolbar or ability to switch between the edit modes so you should set them as state with a button or something (see example).

import React, { Component } from 'react'
import { Map, TileLayer } from 'react-leaflet'
import ReactDistortableImageOverlay from 'react-leaflet-distortable-imageoverlay'

class Example extends Component {

	onWellKnownTextUpdated(wkt) {
		console.log(wkt);
	}

	onCornersUpdated(corners) {
		console.log(wkt);
	}

	render () {
		return (
			<Map bounds={[[43.786293, 15.647650,0],[43.686293, 15.547650,0]]}>
				<TileLayer
				noWrap={true}
				attribution=""
				url="http://mt0.google.com/vt/lyrs=s&x={x}&y={y}&z={z}"/>

				<ReactDistortableImageOverlay 
					url="example.jpg"
					editMode={this.state.editMode}
					onCornersUpdated={this.onCornersUpdated.bind(this)}
					onWellKnownTextUpdated={this.onWellKnownTextUpdated.bind(this)}
					corners={[
						new L.latLng(43.78710550492949,15.647438805314396),
						new L.latLng(43.78710550492949,15.655914504316957),
						new L.latLng(43.78098644922989,15.647438805314396),
						new L.latLng(43.78098644922989,15.655914504316957)
					]}
				/>
			</Map>
		)
	}
}

License

MIT © ChrisLowe-Takor