I'm trying to use Leaflet in my React App. I'm running into an issue. Leaflet.js requires the div ponent to pre-exist when initiating the map. React doesn't "create" the div until it renders the ponent, 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/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="">OpenStreetMap</a> contributors'
}).addTo(map);

    return (

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

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

Thanks.

I'm trying to use Leaflet in my React App. I'm running into an issue. Leaflet.js requires the div ponent to pre-exist when initiating the map. React doesn't "create" the div until it renders the ponent, 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/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

    return (

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

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

Thanks.

• javascript
• reactjs
• leaflet
• mapbox

4 Answers 4

You can initialize map inside ponentDidMount

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

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

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

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

Example

The other answers are great if you're using class ponents. If you have to use it with functional ponents (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.

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 {


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

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

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

class Map extends React.Component {

  ponentDidMount() {
    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>
  }
}