react-leaflet-distortable-imageoverlay

Distortable ImageOverlay

Usage no npm install needed!

<script type="module">
  import reactLeafletDistortableImageoverlay from 'https://cdn.skypack.dev/react-leaflet-distortable-imageoverlay';
</script>

README

react-leaflet-distortable-imageoverlay

Scale, skew, rotate and translate image overlays in react

NPM JavaScript Style Guide

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>
        )
    }
}

License

MIT © ChrisLowe-Takor