react-leaflet Components cannot be wrapped in React components

[uniphil]

In apps I work on, we often want to do things like:

• Have different views over the same map (maybe controlled by react-router)
• Share customized Marker wrapper code between different views.

For both of these use-cases we should be able to make new React components that can be placed on the map, containing only react-leaflet children.

Example code:

import React, { Component } from 'react';
import { Map, Marker } from 'react-leaflet';

class WrappedMarker extends Component {
  render() {
    return <Marker position={[51.505, -0.09]} />;
  }
}

export default class MapView extends Component {
  render() {
    return (
      <Map center={[51.505, -0.09]} zoom={13}>
        <WrappedMarker />
      </Map>
    );
  }
}

The above does not show the marker, and logs a warning:

Uncaught TypeError: Cannot read property 'addLayer' of undefined

[uniphil]

Since React.Children.map only does a shallow mapping, this cannot be handled automatically.

The wrapping component can pass this.props.map down to its child manually and it works.

[Smallmelo]

@uniphil i'm running into this same problem, and if you closed this ticket because you found a solution, it is unclear to me what it was. can you elaborate?

[jgimbel]

Here is an example of how to create custom components, and the documentation.

TLDR; Notice line 5. When creating a custom component, the map and layerContainer props must be passed down.

The initial example can be fixed by adding these props to the Marker.

import React, { Component } from 'react';
import { Map, Marker } from 'react-leaflet';

class WrappedMarker extends Component {
  render() {
    const { map, layerContainer } = this.props; //Given by the `Map` component
    return (
      <Marker 
        map={map} /* pass down to Marker */
        layerContainer={layerContainer} /* pass down to Marker */
        position={[51.505, -0.09]} 
      />
    );
  }
}

export default class MapView extends Component {
  render() {
    return (
      <Map center={[51.505, -0.09]} zoom={13}>
        <WrappedMarker />
      </Map>
    );
  }
}

[Smallmelo]

thank you, @jgimbel. that cleared things up. makes much more sense.

[taozhi8833998]

in react-leaflet 1.1.1version, the map and layerContainer is not in props of child component

[Nazmulho71]

Attempted import error: 'Map' is not exported from 'react-leaflet' (imported as 'LeafletMap').

[cbrizuelaromero]

Attempted import error: 'Map' is not exported from 'react-leaflet' (imported as 'LeafletMap').

I changed 'Map' to 'MapContainer' in the import:

import { MapContainer as LeaftletMap, TileLayer } from 'react-leaflet';

[leilabaneshi]

Attempted import error: 'Map' is not exported from 'react-leaflet' (imported as 'LeafletMap').

I changed 'Map' to 'MapContainer' in the import:

import { MapContainer as LeaftletMap, TileLayer } from 'react-leaflet';

thanks it works for me

[helinagirmay]

Attempted import error: 'MapContainer' is not exported from 'react-leaflet'....getting this error

[cbrizuelaromero]

Attempted import error: 'MapContainer' is not exported from 'react-leaflet'....getting this error

which version do you use?

[ashutoshm1771]

Use 'MapContainer' instead of 'Map'

[MichelMuemboIlunga]

After changed from 'Map' to 'MapContainer' in the import I got this error

C:/Users/Private/node_modules/@react-leaflet/core/esm/index.js
SyntaxError: C:\Users\Private\node_modules@react-leaflet\core\esm\index.js: Unexpected character '' (1:0)

1 |
| ^
at parser.next ()

[TimMcCauley]

I had a similar issue and came up with this solution https://codesandbox.io/s/react-leaflet-overlay-import-wu6ct?file=/src/index.js:333-704

[nirmalyathakurta]

After changed from 'Map' to 'MapContainer' in the import I got this error

C:/Users/Private/node_modules/@react-leaflet/core/esm/index.js
SyntaxError: C:\Users\Private\node_modules@react-leaflet\core\esm\index.js: Unexpected character '' (1:0)

1 |
| ^
at parser.next ()

Having the same issue after updating map to mapcontainer