Ndtyjky

I can't seem to figure out how to properly update the coords of individual markers after storing them in the state. How it works currently is that when you click somewhere on the map, it adds a marker and stores its initial position in the state (in markerData) which is then displayed on the map through a map function. You can move the individual markers around but I'm having difficulty figuring out a possible solution to updating the specific markers position so that eventually I can send and store the marker information in the back end.

Here is my current code.

import React, { Component } from 'react';

import { ImageOverlay, Map, Marker, Popup } from 'react-leaflet';

import 'leaflet/dist/leaflet.css';

import 'leaflet/dist/leaflet.js';

import L from 'leaflet';



delete L.Icon.Default.prototype._getIconUrl;



L.Icon.Default.mergeOptions({

    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),

    iconUrl: require('leaflet/dist/images/marker-icon.png'),

    shadowUrl: require('leaflet/dist/images/marker-shadow.png')

});



export default class CustomMapExample extends Component {

  constructor(props) {

    super(props);

    this.state = {

      center: {

        lat: 512,

        lng: 1024,

      },

      zoom: 1,

      draggable: true,

      dimensions: [1024, 2048],

      markerData: ,

    };

  }



  toggleDraggable = () => {

    this.setState({ draggable: !this.state.draggable })

  }



  addMarker = (event) => {

    const {markerData} = this.state

    const coords = event.latlng

    markerData.push(coords)

    this.setState({markerData})

  }



  updateMarker = (event) => {

    console.log(event)

  }



  render () {

    const boundOrigin = [0, 0];

    const bounds = [boundOrigin, this.state.dimensions];

    const position = [this.state.center.lat, this.state.center.lng]



    return (

      <div>

        <Map

          id="map"

          crs={L.CRS.Simple}

          minZoom={-1}

          bounds={bounds}

          center={position}

          zoom={this.state.zoom}

          onClick={this.addMarker}

          >

          <ImageOverlay

            url='http://www.online-tabletop.com/wp-content/uploads/2017/01/tutoriala.jpg'

            bounds={bounds}

            />

          {this.state.markerData.map((element, index) =>

            <Marker

              key={index}

              position={element}

              draggable={this.state.draggable}

              onDragend={this.updateMarker}

              >

              <Popup>

                <span onClick={this.toggleDraggable}>

                  {this.state.draggable ? `Hello` : 'MARKER FIXED'}

                </span>

              </Popup>

            </Marker>

          )}

        </Map>

      </div>

    );

  }

}

Since Marker accepts options object as a second parameter, marker index could be introduced to reference which marker is getting updated:

<Marker

    key={index}

    marker_index={index}

    position={element}

    draggable={this.state.draggable}

    onDragend={this.updateMarker}

 />

And then markerData state could be updated like this once the marker is dragged:

updateMarker = event => {

   const latLng = event.target.getLatLng(); //get updated marker LatLng

   const markerIndex = event.target.options.marker_index; //get marker index

   //update 

   this.setState(prevState => {

     const markerData = [...prevState.markerData];

     markerData[markerIndex] = latLng;

     return { markerData: markerData };

   });

};

Demo