CODEWITHSUNDEEP
javascriptreactjsleafletmapbox
balloway
balloway

Reputation: 181

React and Leaflet

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.

Upvotes: 3

Views: 5120

Answers (4)

devsaw
devsaw

Reputation: 1047

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.

Upvotes: 4

Mohammed Ishaan
Mohammed Ishaan

Reputation: 397

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>
  }
}

Upvotes: 1

Bimal Grg
Bimal Grg

Reputation: 8156

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>
  }
}

Upvotes: 0

Oleksandr T.
Oleksandr T.

Reputation: 77522

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

Upvotes: 4

Related Questions