React and Leaflet

Question

I'm trying to use Leaflet in my React App. I'm running into an issue. Leaflet.js requires the div component to pre-exist when initiating the map. React doesn't "create" the div until it renders the component, so leaflet is throwing an error. Both getDOMNode() and findDOMNode() return "not a function" for whatever reason.

Code:

import React from 'react';
import {render} from 'react-dom';
import L from 'leaflet';

...a little later

export default class Mapbox extends React.Component {
  render() {
    var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

    return (

      <div id="map">
    <h1>hi</h1>
    </div>
    );

This returns an error that "Map Container not Found".

Thanks.

Oleksandr T. · Accepted Answer · 2016-06-06 15:31:25Z

4

You can initialize map inside componentDidMount

class Mapbox extends React.Component {
  componentDidMount() {
    this.map();
  }

  map() {
    var map = L.map('map').setView([51.505, -0.09], 13);

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
  }

  render() {
    return <div id="map">xx</div>  
  }
}

Example

answered Jun 6, 2016 at 15:31

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

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

1 Comment

sophiestrachan Over a year ago

Oh my days it WORKS, the only thing I changed was adding a height to the div to get it to show up return <div id="map" style={{height: '200px'}}>xx</div>

devsaw · Accepted Answer · 2020-08-02 13:30:14Z

The other answers are great if you're using class components. If you have to use it with functional components (using Hooks) than you might need to code useRef.

function Map({}) {
  // define the ref here
  const mapRef = useRef(null);

  useEffect( () => {
// set the initialized map to the ref
    mapRef.current = L.map('map').setView([51.505, 3], 13);
    
    }, []);

// pass it in the required div node
  return (
    <div ref={mapRef} id="map" className="p-2">
    </div>
  );

}

In this way the map will be initialized after the DOM node is rendered.

Reference: React hooks.

lependu · Accepted Answer · 2018-11-14 18:01:00Z

1

Since react 16.3 there is a new method for creating references easily.

note:the references can be stored in constructor as the refernces can be created prior to the jsx div is created.

class Map extends React.Component {


  componentDidMount() {
   this.map = React.createRef();
   var map = L.map(this.map).setView([51.505, -0.09], 13);
  }

  render() {
    return <div ref={this.map}></div>
  }
}

edited Nov 14, 2018 at 18:01

lependu

1,1538 silver badges18 bronze badges

answered Nov 14, 2018 at 17:28

Mohammed Ishaan

3973 silver badges4 bronze badges

Comments

Bimal Grg · Accepted Answer · 2017-12-02 08:29:44Z

0

Use "refs". Refs is used to return a reference to the element. docs here

class Map extends React.Component {

  componentDidMount() {
    const node = this.node;
    var map = var map = L.map(node).setView([51.505, -0.09], 13);
  }

  render() {
    return <div ref={(node) => { this.node = node }}></div>
  }
}

edited Dec 2, 2017 at 8:29

answered Dec 2, 2017 at 8:10

Bimal Grg

8,1762 gold badges28 silver badges21 bronze badges

1 Comment

Second Son Over a year ago

I think React.createRef() is the way to go. The old callback refs isn’t recommended.

Collectives™ on Stack Overflow

React and Leaflet

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Linked

Related