Leaflet-react

app.js

import React, { Component } from 'react';
import { ImageOverlay, Map, Marker, Popup } from 'react-leaflet';
import L from 'leaflet';
import './App.css';
import '../node_modules/leaflet/dist/leaflet.css';
import customImage from './test-map.png';
import customPortrait from './portrait.jpg';

class CustomMap extends Component {

  state = {
    draggable: false,
    position: [100,100]
  };

  handleOnclick = (ev) => {
    this.setState({
      draggable: !this.state.draggable,
    });
  };

  onDragend = (ev) => {
    const tempLatLng = ev.target.getLatLng();
    console.log(ev.target.options.id);
    this.setState({
      position: [tempLatLng.lat, tempLatLng.lng]
    });
  };

  render () {
    const bounds = [[0, 0], [1000, 1000]];
    const customIcon = L.icon({
      iconUrl: customPortrait,
      iconSize: [60,90]
    });
    return (
      <div>
        <Map
          crs={ L.CRS.Simple }
          bounds={ bounds }
          id='mapContainer'
          maxBounds={ bounds }
          maxBoundsViscosity={.7}
          maxZoom={4}
        >
          <ImageOverlay url={customImage} bounds={ bounds } />
          <Marker
            position={this.state.position}
            icon={customIcon}
            draggable={this.state.draggable}
            ondragend={this.onDragend}
            id="STEVE"
          >
            <Popup>
              <span> Hi </span>
            </Popup>
          </Marker>
        </Map>
        <button onClick={this.handleOnclick}>Click</button>
      </div>
    );
  }
}

export default CustomMap;