React-leaflet LayersControl throws error when moving code into function

Question

Sorry if it this has been answered somewhere else before! I am new to react-leaflet and struggle with this issue for some time now.

The following code does not compile and and the chrome developer tools tell me: 3 errors on this page:
1) "TypeError: addOverlay is not a function",
2) "TypeError: addOverlay is not a function" and ",
3) "TypeError: this.props.removeLayer is not a function".

What I do not understand is: if I comment out the "TestOverlay" component, it compiles. There seems to happen some magic with putting the code into a function, but I have no clue what is the problem..

Using: "leaflet": "1.7.1", "react": "16.14.0", "react-dom": "16.14.0", "react-leaflet": "2.7.0",

Thanks a lot for the help!

import React from "react";
import { Map, TileLayer, LayersControl, Marker, LayerGroup } from "react-leaflet";

import "./App.css";

function TestOverlay() {
  return <LayersControl.Overlay checked name="Random layer 2">
  <Marker position={[52.339545, 4.900526]} />
</LayersControl.Overlay>;

}

export default function App() {
  return (
    <Map center={[52.339545, 4.900526]} zoom={14}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
      <LayersControl position="topright">
        <LayersControl.Overlay checked name="Random layer">
          <Marker position={[52.339545, 4.900526]} />
        </LayersControl.Overlay>
        <TestOverlay/>
      </LayersControl>
    </Map>);
}

kboul · Accepted Answer · 2020-11-20 22:49:15Z

1

From the documentation1, documentation2

Map: top-level component instantiating a Leaflet map and providing it to its children.

All components are React wrappers for Leaflet elements and layers, they need a map instance and therefore must be included in a top-level component.

LayersControl.Overlay uses Overlay class( doc) and inside Overlay class there is the following code:

 class Overlay extends ControlledLayer {
  constructor(props: ControlledLayerProps) {
    super(props)
    this.contextValue = {
      ...props.leaflet,
      layerContainer: {
        addLayer: this.addLayer.bind(this),
        removeLayer: this.removeLayer.bind(this),
      },
    }
  }

  addLayer = (layer: Layer) => {
    this.layer = layer // Keep layer reference to handle dynamic changes of props
    const { addOverlay, checked, name } = this.props
    addOverlay(layer, name, checked)
  }
}

in the constructor addLayer is assigned a method which is this.addLayer. inside this.addLayer addOverlay is being destructured via props. Most likely at that point props do not contain addOverlay method and therefore cannot be retrieved so the error occurs.

As a result you cannot use LayersControl.Overlay the way you are trying to. There is not such an example and I think it is not possible as the map instance is not provided the way it should to LayersControl.Overlay

edited Nov 20, 2020 at 22:49

answered Nov 20, 2020 at 22:32

kboul

14.7k5 gold badges50 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mohab Khaled Over a year ago

the first two links documentation1, documentation2-> page not found.

kboul Over a year ago

This is because the library owner modified the url links and their content due to new version release and now they do not work.

Collectives™ on Stack Overflow

React-leaflet LayersControl throws error when moving code into function

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related