Cómo crear mapas con React y Leaflet

 

 

 

  • SmashingConf UX y diseño, Amberes 2024
  • ¡Registro!

  • Índice
    1. ¿Qué es el folleto?
    2. Creando un mapa
    3. Creando una capa
    4. Marcadores y círculos
    5. Ventanas emergentes
    6. Folleto de reacción
      1. Acceder a la clave API
      2. aplicación.js
      3. Mapa.js
    7. Terminando

    Leaflet es una herramienta muy poderosa y podemos crear muchos tipos diferentes de mapas. Este tutorial le ayudará a comprender cómo crear un mapa avanzado con la ayuda de React y Vanilla JS.

     

    Captar información de un archivo CSV o JSON no sólo es complicado, sino también tedioso. Representar los mismos datos en forma de ayuda visual es más sencillo. En este artículo, representaremos en un mapa las ubicaciones de los incidentes de incendio no médicos a los que respondió el Departamento de Bomberos de San Francisco.

    Para este tutorial, utilizaremos las siguientes herramientas:

    • Folleto
      Una biblioteca de JavaScript para mapas interactivos
    • React
      Una biblioteca de JavaScript para crear interfaces de usuario
    • React-Leaflet
      Componentes de React para mapas de Leaflet

    ¿Qué es el folleto?

    Con aproximadamente 27.000 estrellas, Leaflet.js es una de las principales bibliotecas de JavaScript de código abierto para mapas interactivos aptos para dispositivos móviles. Aprovecha HTML5 y CSS3 en los navegadores modernos y, al mismo tiempo, es accesible en los más antiguos. En definitiva, es compatible con todas las plataformas móviles y de escritorio principales.

    Leaflet pesa alrededor de 38 KB y funciona perfectamente para cosas básicas. Para extensiones adicionales, se puede ampliar con una gran cantidad de complementos .

    Muchos periódicos, incluidos NPR, Washington Post, Boston Globe, entre otros, y otras organizaciones utilizan Leaflet para sus proyectos de datos en profundidad.

    El San Francisco Chronicle, por ejemplo, realizó un proyecto llamado California Fire tracker , un mapa interactivo que proporciona información sobre los incendios forestales que arden en California, utilizando Leaflet. No sólo señalaron el origen del incendio, sino que también nos mostraron la trayectoria del mismo.

    Dado que este es un tutorial introductorio, solo marcaremos las ubicaciones de los incidentes de incendio y mostraremos algunos detalles al respecto.

     

    Antes de pasar a React, comprendamos los conceptos básicos de Leaflet. Para esto, crearemos un ejemplo simple en el que configuraremos un mapa de Folleto, trabajaremos con marcadores y ventanas emergentes.

    Primero, creemos archivos index.html y app.js/project en nuestra carpeta y vinculemos este último a nuestro archivo index.html .

    Para comenzar a usar Leaflet, debemos vincular Leaflet CSS y Leaflet JS en nuestras etiquetas principales. Una cosa a tener en cuenta es que Leaflet CSS viene antes que Leaflet JS. Eso es todo para Folleto.

    Hay una cosa más que debemos agregar a nuestro archivo index.html : un contenedor que contendrá nuestro mapa.

    div/div

    Antes de que lo olvidemos, demos altura a nuestro div.

    #mapid { height: 1000px; }

    Ahora viene la parte divertida. Ya sea que decida crear un nuevo archivo JavaScript o continuar con las etiquetas de script, asegúrese divde agregarlo al dom antes de llamar L.map('mapid').

    Probablemente te estés preguntando “Pero, ¿por qué?” Bueno, es porque te dará un error si vinculas el mapa a un contenedor que aún no existe.

    Uncaught Error: Map container not found

    Creando un mapa

    Ahora, pasemos a la parte divertida. Para inicializar el mapa, pasamos nuestro div L.map()con algunas opciones.

    const myMap = L.map('mapid', { center: [37.7749, -122.4194], zoom: 13})

    Vayamos paso a paso para entender lo que acaba de pasar. Usamos la clase Map de Leaflet API para crear un mapa en la página. Pasamos dos parámetros a esta clase:

    1. Pasamos una variable de cadena que representa el DOMID.
    2. Un literal de objeto opcional con opciones de mapa.

    Hay muchas opciones que podríamos pasar a nuestra clase, pero las dos opciones principales son el centro y el zoom. El centro define un centro geográfico inicial del mapa, mientras que el zoom especifica un nivel de zoom inicial del mapa. Ambos no están definidos de forma predeterminada.

    Para el centro, pasamos las coordenadas de San Francisco. Hay muchos lugares donde podemos realizar geocodificación directa e inversa, pero para búsquedas básicas como esta, podemos buscar en Google.

    Normalmente, el valor del zoom dependerá de lo que desee mostrar. ¿Quieres mostrar una ciudad o un estado? ¿País o continente? Continúe y juegue con el valor del zoom para tener una mejor idea. Para este ejemplo, elegimos 13 porque muestra toda la ciudad.

    Otra forma de inicializar el mapa es mediante setView(). Toma una serie de coordenadas y un número entero para el nivel de zoom.

    const myMap = L.map('map').setView([37.7749, -122.4194], 13);

    De forma predeterminada, todas las interacciones táctiles y del mouse en el mapa están habilitadas y tiene controles de zoom y atribución.

     

    Creando una capa

    A continuación, agregaremos una capa de mosaicos a nuestro mapa; en nuestro caso, es una capa de mosaicos de Mapbox Streets. Podemos agregar varios tipos de capas de mosaicos creando una instancia de la clase TileLayer.

    Para crear una capa de mosaico, debemos configurar la plantilla de URL para la imagen del mosaico, el texto de atribución y el nivel de zoom máximo de la capa. La plantilla de URL es lo que nos da acceso a la capa de mosaicos deseada por parte del proveedor de servicios. Dado que estamos utilizando la API Static Tiles de Mapbox , necesitaremos solicitar un token de acceso .

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', { attribution: 'Map data © a href="https://www.openstreetmap.org/"OpenStreetMap/a contributors, a href="https://creativecommons.org/licenses/by-sa/2.0/"CC-BY-SA/a, Imagery (c) a href="https://www.mapbox.com/"Mapbox/a',maxZoom: 18, id: 'mapbox/streets-v11', accessToken: 'your.mapbox.access.token' }).addTo(mymap);

    En este punto, si abrimos nuestro index.html en un navegador, deberíamos poder ver un mapa de San Francisco. Coloquemos un marcador en el mapa.

    Marcadores y círculos

    Tenemos el mapa y la capa, pero no nos indica nada específico. Para señalar una ubicación concreta en el mapa, Leaflet nos proporciona marcadores.

    Para fijar una ubicación, creamos una instancia del marcador usando la clase Marker, pasamos las coordenadas y lo agregamos al mapa. Aquí estamos usando las coordenadas de Twin Peaks en la ciudad.

    const marker = L.marker([37.7544, -122.4477]).addTo(mymap);

    De manera similar, podemos vincular un círculo al mapa usando una Circleclase. Pasamos algunas opciones opcionales, como radio, color, etc. Para el circlemarcador, pasamos las coordenadas del faro de Point Bonita. Todos sobre leds e iluminación

    const circle = L.circle([37.8157, -122.5295], { color: 'gold', fillColor: '#f03', fillOpacity: 0.5, radius: 200}).addTo(mymap);

    Ventanas emergentes

    Todo esto es genial, pero ¿qué pasa si queremos pasar más información sobre la ubicación? Hacemos esto usando una ventana emergente.

    circle.bindPopup("I am pointing to Point Bonita Lighthouse");marker.bindPopup("I am pointing to Twin Peaks");

    El método bindPopup toma un contenido HTML específico y lo agrega al marcador, por lo que aparece la ventana emergente cuando hace clic en el marcador.

    Folleto de reacción

    Ahora sabemos cómo crear un mapa y agregar marcadores usando Leaflet y JavaScript básico. Veamos cómo podemos lograr los mismos resultados con React. No vamos a hacer la misma aplicación, sino que vamos a hacer una aplicación avanzada.

    La primera tarea para nosotros es obtener un token de acceso del portal de datos abiertos de San Francisco . Es un portal en línea donde podemos encontrar cientos de conjuntos de datos de la ciudad y el condado de San Francisco. Decidí usar este recurso, pero existen muchos otros recursos que podemos usar en su lugar.

    Acceder a la clave API

    1. Cree una cuenta e inicie sesión en el portal.
    2. Haga clic en el enlace administrar en la parte inferior derecha.
    3. Haga clic en Crear nueva clave API y asígnele un nombre.
    4. Copie su ID de clave y su clave secreta. Necesitaría esto para acceder a los datos.

    Para esto, usaremos React-Leaflet: componentes de reacción para mapas de Leaflet. Creemos una aplicación de reacción.

     

    npx create-react-app react-fire-incidentscd react-fire-incidents

    Luego instalemos react-leaflety Leaflet ejecutando el siguiente comando en nuestra terminal:

    npm install react-leaflet leaflet

    aplicación.js

    Creemos una carpeta /componentsdentro src. Dentro de los componentes , creemos un archivo llamado Map.js. Aquí es donde vivirá nuestro Mapa. Ahora editemos App.js eliminando el código innecesario e importando módulos desde react-leaflet axiosel Map.js recién creado .

    import React, { Component, Fragment } from 'react';import axios from 'axios';import Map from './components/Map'

    En nuestra clase de aplicación, definiremos una matriz en nuestro estado llamada incidentes; cuando se cargue la página, insertaremos nuestros datos en esta matriz.

    class App extends Component { state = { incidents: [], } render() { return ( div /div ); }}export default App;

    A continuación, realizaremos una solicitud GET cuando se monte el componente. Tenemos el token de la aplicación, pero aún necesitamos un punto final. ¿Dónde encontramos el punto final?

    Vayamos al portal y hagamos clic en Explorar datos. En la barra de búsqueda, busquemos incidentes de incendio. El primer resultado que aparece es el que estamos buscando. Una vez que hacemos clic en el enlace, podemos obtener la URL haciendo clic en el botón API en la parte superior derecha.

    Pasaremos el punto final a nuestra solicitud GET y pasaremos un límite y el token de nuestra aplicación como parámetros. Los datos originales tienen miles de registros, pero para simplificar las cosas, los hemos limitado a 500. Actualizamos nuestra matriz de incidentes con nuestros resultados.

    Una vez que obtenemos los datos, actualizamos nuestro estado.

    async componentDidMount() { const res = await axios.get('https://data.sfgov.org/resource/wr8u-xric.json', { params: { "$limit": 500, "$$app_token": YOUR_APP_TOKEN } }) const incidents = res.data; this.setState({incidents: incidents }); };

    Así es como debería verse nuestro App.js.

    class App extends Component {state = { incidents: [],}async componentDidMount() { const res = await axios.get('https://data.sfgov.org/resource/wr8u-xric.json', { params: { "$limit": 500, "$$app_token": YOUR_APP_TOKEN } }) const incidents = res.data; this.setState({incidents: incidents });};render() { return (Map incidents={this.state.incidents}/ );}}export default App;

    Mapa.js

    Como ya sabemos cómo crear un mapa de Folleto, esta parte será relativamente fácil. Importaremos componentes de Map, TileLayer, Marker.Popupreact-leaflet

    import React, { Component } from 'react'import { Map, TileLayer, Marker, Popup } from 'react-leaflet'

    Si recordamos del ejemplo anterior, necesitamos coordenadas y un nivel de zoom para inicializar el mapa. En nuestra Mapclase, los definimos en nuestro estado usando laty lngvariables zoom.

     

    export default class Map extends Component { state = { lat: 37.7749, lng: -122.4194, zoom: 13, } render() { return ( div/div ) }}

    Luego comprobaremos si nuestro conjunto de incidentes está vacío. Si está vacío, devolveremos un mensaje que dice “Se están cargando datos”; de lo contrario, le devolveremos un mapa.

    En nuestro react-leafletcomponente Map, pasaremos las coordenadas centrales y un nivel de zoom junto con algo de estilo. En nuestro TileLayercomponente, pasaremos una atribución y una URL similar a nuestro ejemplo anterior.

    render() { return ( this.props.incidents ? Map center={[this.state.lat, this.state.lng]} zoom={this.state.zoom} style={{ width: '100%', height: '900px'}} TileLayer attribution='copy a href="https://osm.org/copyright"OpenStreetMap/a contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" / /Map : 'Data is loading...' ) }}

    A continuación, recorremos nuestro props.incidenty pasamos las coordenadas de cada incidente al componente Marcador. Dado que React nos advierte que pasemos una clave a cada elemento de una matriz, también pasaremos una clave a Marker.

    Dentro del Markercomponente, pasamos un Popupcomponente. Agregué información sobre el incidente dentro de la ventana emergente.

    Map center={[this.state.lat, this.state.lng]} zoom={this.state.zoom} style={{ width: '100%', height: '900px'}} TileLayer attribution='copy a href="https://osm.org/copyright"OpenStreetMap/a contributors' url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" / { this.props.incidents.map(incident = { const point = [incident['point']['coordinates'][1], incident['point']['coordinates'][0]] return ( Marker position={point} key={incident['incident_number']} Popup spanADDRESS: {incident['address']}, {incident['city']} - {incident['zip_code']}/span br/ spanBATTALION: {incident['battalion']}/spanbr/ /Popup /Marker ) })}/Map

    Y esto es todo. Si ejecutamos nuestra aplicación y todo salió bien, deberíamos poder ver un mapa de San Francisco con 500 marcadores que nos indican las ubicaciones de los incidentes de incendio. Si pulsamos sobre uno de esos marcadores aparecerá una ventana emergente con más información sobre la incidencia.

    Terminando

    Aunque cubrimos mucho, esto fue solo lo básico. Leaflet es una herramienta muy poderosa y podemos crear muchos tipos diferentes de mapas. Si quieres jugar, intenta agregar otra capa o un ícono personalizado . O tal vez le gustaría crear un mapa de coropletas interactivo .

    (dm, il)Explora más en

    • Reaccionar
    • javascript
    • La interacción del usuario





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    Cómo crear mapas con React y Leaflet

    Cómo crear mapas con React y Leaflet

    SmashingConf UX y diseño, Amberes 2024 ¡Registro! Índice ¿Qué es el folleto?

    programar

    es

    https://pseint.es/static/images/programar-como-crear-mapas-con-react-y-leaflet-1012-0.jpg

    2024-04-04

     

    Cómo crear mapas con React y Leaflet
    Cómo crear mapas con React y Leaflet

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20