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???

Dordogne

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.

Dordogne

Hi, can you link an example with the react-leaflet v2 working properly, please? – Frigorific

Answer 2

Yeah this used to be very straightforward with v1.x of react-leaflet

I've run into a similar extension problem and I've opened an issue on the react-leaflet github repo in the hopes that Paul will show us the way. https://github.com/PaulLeCam/react-leaflet/issues/506

For now downgrading to v1.9 works for me.

Skiing