React-leaflet: MapControl throws "createLeafletElement() must be implemented" error

[robinmetral]

Expected behavior

I want to use the <MapControl /> component to show a simple control with a button to trigger an action elsewhere in my app:

import React, { Component } from "react"
import { Map as LeafletMap, TileLayer, MapControl } from "react-leaflet"

class Map extends Component {
  render() {
    return (
      <LeafletMap center={} zoom={}>
        <TileLayer attribution={} url={} />

        // I want to show a simple custom control on the map
        <MapControl position="topright">
          <button onClick={this.props.triggered}>Trigger</button>
        </MapControl>

      </LeafletMap>
      )
  }
}

export default Map

Actual behavior

Error: createLeafletElement() must be implemented

I've looked this up and apparently it happens when people forget to implement createLeafletElement() when extending a component. It isn't my case since I don't want to extend MapControl in a custom component.

Ironically the other components that extend MapControl (LayersControl and friends) work out of the box.

Steps to reproduce

See my code snippet above or this CodePen forked from @PaulLeCam's SimpleExample.

[robinmetral]

These components are base classes used by other components. They can be extended to create custom components but should not be used directly.

Next time I'll read every single line before posting.

[robinmetral]

In case others end up in my situation: if you don't want to create your own custom component that extends MapControl, have a look at the react-leaflet-control plugin. There's no GitHub repo but it was updated 5 months ago to a V2.0.0.

Install it: npm i -S react-leaflet-control

Use it:

import React, { Component } from "react"
import { Map as LeafletMap, TileLayer } from "react-leaflet"
import Control from "react-leaflet-control"

class Map extends Component {
  render() {
    return (
      <LeafletMap center={} zoom={}>
        <TileLayer attribution={} url={} />

        // use react-leaflet-control to show a simple custom control on the map
        <Control position="topright">
          <button onClick={this.props.triggered}>Trigger</button>
        </Control>

      </LeafletMap>
      )
  }
}

export default Map

[clementallen]

@robinmetral I noticed the react-leaflet-control library didn't link to a github repo too a few months ago, and this has just prompted me to raise a PR to fix it in the repo FYI:

https://github.com/LiveBy/react-leaflet-control/pull/31

[robinmetral]

Thanks @clementallen I couldn't find any repo!