Add leaflet plugins to React-Leaflet

Question

I'm trying to create a custom component in react-leaflet v2 extending a leaflet plugin EdgeMarker. The documentation does not really give details on how to do this. So I have copied the Leaflet.EdgeMarker.js file from the repo and added it to my implementation.

This is what I have done so far:

import PropTypes from 'prop-types';
import { MapLayer, withLeaflet } from 'react-leaflet';
import L from 'leaflet';
import '../EdgeMarker/EdgeMarker';


class EdgeMarkerComp extends MapLayer{

  static childContextTypes = {
    layerContainer: PropTypes.object
  }

  getChildContext () {
    return {
      layerContainer: this.leafletElement
    }
  }

  createLeafletElement(props) {
    const { options } = props;
    console.log("Options: ", options);
    return new L.EdgeMarker(options);
  }

}

export default withLeaflet(EdgeMarkerComp);

On my map:

const options = {
      icon: L.icon({ // style markers
          iconUrl: 'images/edge-arrow-marker-black.png',
          clickable: true,
          iconSize: [48, 48],
          iconAnchor: [24, 24]
      }),
      rotateIcons: true, 
      layerGroup: null 
};

<Map ...>
  <EdgeMarkerComp options={options} />
</Map>

Any help???

Answer 1

I finally solved the problem by using the map directly. This was even more convenient and gave me more freedom while adding interaction to the map. Simply define your map as following and use the map reference to perform any action:

<Map
  ref={Map => this.map = Map}
  ...
  >
  ...
<Map>

Now you can reference the map in any leaflet object using this.map.leafletElement defined by react-leaflet:

const polyline = L.polyline([p1,p2 ], {color: 'yellow'}).addTo(this.map.leafletElement);

The above code will add a new line on the map.

polyline.remove(); => will remove the line from the map.