javascript - Add leaflet plugins to React-Leaflet - Stack Overflow

admin管理员组

文章数量:1426014

I'm trying to create a custom ponent 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???

I'm trying to create a custom ponent 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???

• javascript
• reactjs
• leaflet
• react-leaflet

Share Improve this question Follow asked Jul 3, 2018 at 20:47 danyhioldanyhiol 67922 gold badges88 silver badges2626 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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.

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./PaulLeCam/react-leaflet/issues/506

For now downgrading to v1.9 works for me.

本文标签： javascriptAdd leaflet plugins to ReactLeafletStack Overflow