Cómo crear un mapa de Leaflet en una aplicación con React


En este tutorial aprenderemos cómo crear una aplicación con React consistente en un mapa básico de Leaflet utilizando la API React-Leaflet, que permite integrar esta librería de JavaScript en las aplicaciones React.

Probablemente ya todos conocéis Leaflet, puesto que existen multitud de tutoriales en geopois sobre esta librería de JavaScript que permite la creación de mapas interactivos con multitud de capacidades, de forma totalmente gratuita.

Por otro lado, encontramos a React, que se define como una librería JavaScript focalizada en el desarrollo de interfaces de usuario y en los últimos años se ha convertido en una de las librerías más utilizadas para el desarrollo web. Si queréis más información acerca de que es exactamente React y por que se ha vuelto tan popular, tan solo tenéis que googlearlo y encontrareis multitud de información, por lo que creo que no es necesario extenderse más en este aspecto más allá de comentar que el lenguaje que utilizaremos durante este tutorial es una extensión de JavaScript llamada JSX.

En cuanto a la aplicación que vamos a desarrollar, se trata de un mapa interactivo, en el cual, cuando el usuario haga clic en sobre el mapa, aparecerá en ese lugar un nuevo marker con un popup en el que se mostrará su latitud y longitud y además, el mapa se volverá a centrar en relación con la posición del nuevo marker.

En primer lugar, vamos a crear la aplicación de React utilizando las siguientes líneas en la consola de comandos de windows. Si no contáis con conocimientos previos sobre React, os invito a seguir el primer tutorial de esta serie, donde se explica cómo crear una aplicación React paso a paso.

Abrimos la consola y vamos a la ruta donde queremos crear la aplicación (cd ruta/completa). Una vez que estamos en la ruta seleccionada, corremos los siguientes comandos para crear la aplicación, la cual se ubicará en la carpeta my-app y la iniciamos.

						
npx create-react-app my-app
cd my-app
npm start
						
					

Una vez hemos creado la aplicación, vamos a añadir la librería React-Leaflet, que nos permitirá utilizar Leaflet dentro de la aplicación de React. Para ello, desde la ruta de my-app, ejecutamos el siguiente comando.

						
npm install react-leaflet
						
					

Ahora toca elaborar el código. En nuestro editor de código (en mi caso utilizo Visual Studio Code) abrimos la carpeta my-app. En ella, solo nos vamos a preocupar por la carpeta src, donde se encuentra el código JavaScript y css de la aplicación.

En la carpeta src, creamos un nuevo archivo llamado react-leaflet.css, para el establecer el estilo y añadimos el siguiente código:

						
.leaflet-container {
  width: 100vw;
  height: 100vh;
}
						
					

Para conseguir los representativos markers de Leaflet, creamos un nuevo archivo llamado react-leaflet-icon.js con el siguiente código, siendo el icono que exportamos aquí el que luego se utilizará a la hora de añadir en los nuevos markers.

						
import L from 'leaflet';
import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';

export const MarkerIcon = L.icon({
	iconUrl: icon,
	shadowUrl: iconShadow
});
						
					

Vamos con el script principal. Creamos un nuevo archivo llamado react-leaflet.js y le añadimos el siguiente código.

						
import React, { Component } from 'react';
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import 'leaflet/dist/leaflet.css';
import './react-leaflet.css';
import {MarkerIcon} from './react-leaflet-icon.js';

/*Creamos un nuevo Marker para que cada vez que aparezca un
nuevo marker, aparezca el popup*/
const CustomMarker = props => {
  const initMarker = ref => {
    if (ref) {
      ref.leafletElement.openPopup()
    }
  }
  return <Marker ref={initMarker} {...props}/>
}

class MapView extends Component {

  /*Función para capturar la latitud y la longitud*/
  handleClick(e){
    this.setState({ currentLocation: e.latlng });
  }

  constructor(props) {
    super(props);
    this.state = {
      currentLocation: { lat: 38.71, lng: -0.48 },
      zoom: 12,
    }
    this.handleClick = this.handleClick.bind(this);
  }

  render() {
    const { currentLocation, zoom } = this.state;
    return (
      <Map center={currentLocation} zoom={zoom} onClick={this.handleClick}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution="© <a href="https://osm.org/copyright">OpenStreetMap</a> contributors"
        />
        <CustomMarker position={currentLocation} icon={MarkerIcon} >
          <Popup><pre>{"Latitude: "+ currentLocation.lat.toFixed(2) + ", Longitude: "+ currentLocation.lng.toFixed(2)}</pre></Popup>
        </CustomMarker>
        </Map>
    );
  }
}

export default MapView;
						
					

En este script importamos el estilo del css react-leaflet.css y el MarkerIcon, que hemos customizado en el script react-leaflet-icon.js, además de las distintas clases que vamos a utilizar provenientes de React-Leaflet. Posteriormente, creamos las funcionalidades de nuestra aplicación y establecemos una ubicación inicial para el mapa, que en este caso será la ciudad de Alcoy.

Con la función handleClick, determinamos que las coordenadas que recoja ese clic sean las nuevas coordenadas del mapa y añadimos la función initMarker a la clase Marker, para cuando aparezca un nuevo marker, lo haga mostrando un popup.

Dentro de render, establecemos as clases típicas de Leaflet (Map, TileLayer, Marker, Popup) con las características que han sido definidas al inicio del render.

Finalmente, abrimos el script index.js para añadir el mapa a nuestra aplicación, para ello importamos la clase MapView del script react-leaflet.js y lo añadimos como <MapView/>.

						
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import MapView from './react-leaflet.js';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
<React.StrictMode>
<MapView/>
</React.StrictMode>,
document.getElementById('root')
);

serviceWorker.unregister();
						
					

Y este sería el resultado de nuestra aplicación React. Un saludo, espero que os resulte de interés y no dudéis en contactarme si os surge alguna duda.



*Extra point. Si queremos tener nuestra aplicación React funcionando en github pages, podemos seguir este tutorial en el que se nos muestra cómo hacerlo en unos minutos.

Si queréis probar a sumar Bootstrap a la ecuación, os recomiendo el blog de sig de letras podéis ver cómo utilizar React-Leaflet en una aplicación React junto a este Cascading Style Sheets, para combinar un mapa con un buscador de elementos por municipalidad.




Sobre el Autor


Ignacio Ponsoda Llorens

Graduado en Geografía y Ordenación del Territorio por la UA y MSc in Geospatial Technologies por la WWU, UJI y NOVA. A mi pasión por las montañas, de la cual tiene posiblemente la culpa mi Alcoy natal, se unió durante el bachillerato la de aprender sobre todos los aspectos de nuestro planeta a través de la geografía. Con la aplicación de las nuevas tecnologías a estas dos pasiones he podido desarrollarme profesionalmente en un campo que me entretiene y me fascina a partes iguales, y me permite seguir aprendiendo cada día.


¿Eres desarrollador? Únete a la red