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