Package Exports

react-leaflet-distortable-imageoverlay

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-leaflet-distortable-imageoverlay) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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 'scale'. 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>
        )
    }
}