[Fuente: https://github.com/PaulLeCam/react-leaflet/blob/master/docs/Getting%20started.md]

Sobre React-Leaflet

Esta librería proporciona una abstracción de Leaflet en forma de React components.

No reemplaza a Leaflet, sólo se basa en los React’s lifecycle methods para invocar los handlers relevantes de Leaflet. Puedes leer más información sobre el proceso del ciclo de vida en How it works. Por favor asegúrate que entiendes todos los core concepts y limitations para evaluar si esta librería es apropiada para tus necesidades.

React-Leaflet permite convertir este ejemplo de código de la documentación de Leaflet:

import L from 'leaflet';

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

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

L.marker(position).addTo(map)
  .bindPopup('A pretty CSS3 popup. <br> Easily customizable.');

a componentes React:

import React from 'react';
import { render } from 'react-dom';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';

const position = [51.505, -0.09];
const map = (
  <Map center={position} zoom={13}>
    <TileLayer
      url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
      attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    />
    <Marker position={position}>
      <Popup>
        <span>A pretty CSS3 popup.<br/>Easily customizable.</span>
      </Popup>
    </Marker>
  </Map>
);

render(map, document.getElementById('map-container'));

Notar que el  <Map> component crea su propio <div> container para el mapa, no está linkado a un nodo existente.

Se puede ver este ejemplo en this jsfiddle.

Leaflet setup

If you are not familiar with Leaflet, make sure you read its quick start guide before using this library.
You will notably need to add its CSS to your page to render the map properly, and set the height of the <Map>container.

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

Installation

Using npm

npm install react-leaflet@next

React, ReactDOM and Leaflet are peer dependencies, if you haven’t already installed them you can use:

npm install leaflet@1.0.0-rc.2 react react-dom react-leaflet@next

Cómo funciona

Conceptos claves

React-Leaflet usa los métodos del ciclo de vida de React (React’s lifecycle methods) para invocar a los handlers relevantes de Leaflet, lo cual tiene unas cuentas consecuencias:

DOM rendering

React no renderiza layers de Leaflet en el DOM, este renderizado es hecho por Leaflet por si mismo. React sólo renderiza el map container dentro del Map component y potenciales elementos <div> vacíos en componentes que tengán varios hijos.

Component properties

Las properties que se pasan a los componentes son utilizados para crear la intancia Leaflet correspondiente cuando el componente sea montado. Cuando se añada un componente, todas estas propiedades deben ser soportadas si la versión de Leaflet la soporta, pero no serán actualizadas en el UI cuando cambian a menos que sean referenciados en la documentación como dynamic.

Component context

React-Leaflet utiliza el API context de React (context API) para fabricar los elementos Leaflet disponibles a otros elementos que lo necesiten.

Si creas custom components, necesitas acceder a las siguientes instancias desde el contexto:

• map: The Leaflet.Map instance created by the <Map> component.
• layerContainer: The containing layer, for example a LayerGroup instance. Defaults to the map value if no other container is set.
• popupContainer: The layer that could contain a popup.

Lifecycle process

1. El Map de nivel más alto renderiza un <div> vacío para contener el mapa.
2. El método componentDidMount() de Map instancia un Leaflet.Map() para el <div> creado con las component properties y setea la instancia en ese estado. Esta instancia es hecha disponible en el contexto.
3. El método render() de Map es ejecutado otra vez, esta vez renderinzando sus componentes hijos.
4. Para cada componente hijo, se invocará el método componentWillMount() e instanciará la instancia Leaflet correspondiente para este elemento utilizando las propiedades del componente y su contexto.
5. El método render() es invocado par cada hijo, que retornará o null o renderizará sus propios hijos.
6. Cuando el método componentDidUpdate de un componente es invocado , actualiza su intancia Leaflet de acuerdo a sus propiedades dinámicas soportadas.
7. Cuando el método componentWillMount de un componente es llamado, elimina su layer del map.

Limitations

• Leaflet hace llamadas directas al DOM cuando es cargado, por lo tanto esta librería no es compatible con server-side rendering.
• Los componentes expuestos son abstracciones para los Leaflet layers, y no de elementos DOM. Algunos de ellos tienen propiedades que pueden ser actualizadas directamente invocando los métodos setters expuestos por Leaflet mientras otros deben ser completamente reemplazados , configurando un valor único en su propiedad key de forma que pueda ser manejado apropiadamente por el algoritmo de React.

dsd
f
df
df
df
df
df
df
df
dfd
fd
fd
fd
fd
fd
fd
fd
fd
fdf
df
df
df
df
df