Si empezaste un proyecto de React hace unos años, probablemente usaste Create React App. Ese camino ya no es el que se recomienda: el equipo de React lo declaró obsoleto en febrero de 2025 y aconseja migrar a un framework o a una herramienta de compilación como Vite, Parcel o Rsbuild. En este tutorial nos [...]
La entrada Crea un mapa interactivo con React 19 y Vite se publicó primero en Cursos GIS | TYC GIS Formación.
Si empezaste un proyecto de React hace unos años, probablemente usaste Create React App. Ese camino ya no es el que se recomienda: el equipo de React lo declaró obsoleto en febrero de 2025 y aconseja migrar a un framework o a una herramienta de compilación como Vite, Parcel o Rsbuild. En este tutorial nos vamos por Vite, la más usada de las tres: en septiembre de 2026, npm registró unos 748 millones de descargas de Vite, frente a 7,5 millones de Rsbuild y 1,5 millones de Parcel.
Con Vite, crear un proyecto es más fácil y más rápido: un solo comando genera la estructura, el servidor de desarrollo arranca en cuestión de segundos y los cambios se ven en el navegador casi al instante. Eso se conoce como HMR, siglas de Hot Module Replacement o «reemplazo de módulos en caliente»: al guardar un cambio, el navegador actualiza solo la parte modificada, sin recargar la página completa ni perder el estado en que estabas, como la posición y el zoom del mapa. Para una aplicación de mapas de una sola página, donde quieres ver al momento cada capa o estilo que tocas, es una opción muy cómoda. Además, un proyecto creado con Vite resulta más ligero: en nuestra prueba, uno nuevo con Vite instaló unos 24 paquetes y ocupó unos 60 MB en la carpeta de desarrollo, frente a más de 1.300 paquetes y 365 MB de uno creado con Create React App. Vamos a comprobarlo creando un mapa con puntos de Bogotá y de Madrid.
Y de React 19, ¿qué ganas? Esta versión simplifica cosas que antes pedían más código. Un componente recibe ref como una propiedad más, así que ya no necesitas forwardRef. Una nueva función llamada, literalmente, use lee una promesa o un contexto durante el renderizado (por ejemplo, use(promesa)) y, a diferencia de los hooks, puede llamarse dentro de una condición. Las Actions y useActionState manejan por ti el estado de carga y los errores de un formulario. Y puedes usar <Context> directamente como proveedor, sin escribir. Provider. Nuestro mapa no necesita estas novedades, pero las encontrarás en cuanto tu aplicación crezca, y empezar ya con React 19 te evita migrar después.
Paso 1. Requisitos. Necesitas Node.js 20.19 o superior (o 22.12 o superior). Compruébalo con la instrucción node -v en tu consola. Si tu versión de Node es menor, el proyecto no se creará. Si ya usas una versión menor en otro proyecto, te conviene NVM (Node Version Manager), que te permite instalar la última versión de Node y, además, conservar las anteriores. En Windows se usa nvm-windows: instala la versión LTS con nvm install lts y actívala con nvm use seguido del número de versión (por ejemplo, nvm use 24.22.1). Para volver a la anterior, basta con nvm use y su número.
Paso 2. Crea el proyecto. Abre una terminal y ejecuta:
npm create vite@latest mapa-react -- --template react
El asistente te hará dos preguntas. En «Which linter to use?» («¿qué linter usar?», un linter es una herramienta que revisa tu código en busca de errores y malas prácticas) deja Oxlint, que ya viene marcado. En «Install with npm and start now?» («¿instalar con npm e iniciar ahora?») elige No, para hacer esos pasos a mano:
npm ls react npm run build
Paso 3. Añade la librería del mapa. Hay varias librerías de mapas; las dos más conocidas son Leaflet y OpenLayers. Para proyectos sencillos, Leaflet es más que suficiente y es más fácil de empezar a usar, mientras que para proyectos grandes y exigentes OpenLayers suele ser la mejor opción. Como aquí lo importante es React 19 y Vite, y no el mapa, usaremos Leaflet con react-leaflet, cuya versión 5 es la compatible con React 19:
npm install leaflet react-leaflet
Para comprobar qué versión de React quedó instalada, ejecuta npm ls react. En nuestra prueba salió React 19.3.1, y react-leaflet 5 la aceptó sin conflictos:
Paso 4. Crea tus puntos. Crea un archivo JSON dentro de la carpeta src de tu proyecto; la ruta será src/ciudades.json. Guarda en él las dos ciudades, cada una con el centro del mapa, el zoom y cinco puntos importantes:
{
"Bogotá": {
"centro": [4.65, -74.1],
"zoom": 12,
"puntos": [
{ "nombre": "Plaza de Bolívar", "lat": 4.5981, "lng": -74.0760 },
{ "nombre": "Universidad Nacional", "lat": 4.6382, "lng": -74.0840 },
{ "nombre": "Parque Simón Bolívar", "lat": 4.6586, "lng": -74.0937 },
{ "nombre": "Cerro de Monserrate", "lat": 4.6054, "lng": -74.0560 },
{ "nombre": "Aeropuerto El Dorado", "lat": 4.7016, "lng": -74.1469 }
]
},
"Madrid": {
"centro": [40.43, -3.67],
"zoom": 12,
"puntos": [
{ "nombre": "Puerta del Sol", "lat": 40.4167, "lng": -3.7039 },
{ "nombre": "Palacio Real", "lat": 40.4181, "lng": -3.7142 },
{ "nombre": "Parque del Retiro", "lat": 40.4150, "lng": -3.6839 },
{ "nombre": "Estadio Santiago Bernabéu", "lat": 40.4530, "lng": -3.6885 },
{ "nombre": "Aeropuerto Madrid-Barajas", "lat": 40.4722, "lng": -3.5608 }
]
}
}
Paso 5. Dibuja el mapa. Reemplaza el contenido de src/App.jsx:
import { useState } from ‘react’
import { MapContainer, TileLayer, CircleMarker, Popup } from ‘react-leaflet’
import ‘leaflet/dist/leaflet.css’
import ciudades from ‘./ciudades.json’
export default function App() {
const [ciudad, setCiudad] = useState(‘Bogotá’)
const { centro, zoom, puntos } = ciudades[ciudad]
return (
<>
<div className=»selector»>
{Object.keys(ciudades).map((nombre) => (
<button
key={nombre}
className={nombre === ciudad ? ‘activo’ : »}
onClick={() => setCiudad(nombre)}
>
{nombre}
</button>
))}
</div>
<MapContainer key={ciudad} center={centro} zoom={zoom} className=»mapa»>
<TileLayer
attribution=»© colaboradores de OpenStreetMap»
url=»https://tile.openstreetmap.org/{z}/{x}/{y}.png»
/>
{puntos.map((p) => (
<CircleMarker key={p.nombre} center={[p.lat, p.lng]} radius={9}>
<Popup>{p.nombre}</Popup>
</CircleMarker>
))}
</MapContainer>
</>
)
}
Con useState guardamos la ciudad elegida y, al cambiarla, el mapa se vuelve a crear centrado en ella. Los dos botones son los que verás arriba a la derecha.
Y en src/index.css deja solo esto, para que el mapa ocupe toda la pantalla y los botones de ciudad queden encima:
html, body, #root { height: 100%; margin: 0; }
.mapa { height: 100vh; }
.selector { position: absolute; top: 10px; right: 10px; z-index: 1000; display: flex; gap: 6px; }
.selector button { padding: 6px 12px; border: 1px solid #888; border-radius: 4px; background: #fff; cursor: pointer; }
.selector .activo { background: #2563eb; color: #fff; border-color: #2563eb; }
Paso 6. Arráncalo. En la terminal ejecuta npm run dev y abre http://localhost:5173 en tu navegador. También puedes ver el proyecto dentro de VS Code, en su navegador integrado. Verás el mapa de Bogotá con sus cinco puntos; con los botones de arriba a la derecha puedes pasar a Madrid. Al hacer clic en cada punto aparece su nombre. Para probar el HMR, mueve el mapa o cambia el zoom, y luego edita en src/App.jsx el valor radius={9} por radius={14} y guarda: los círculos crecen sin recargar la página y el mapa conserva su posición y su zoom.
Una nota sobre los mapas base: las teselas de OpenStreetMap son gratuitas para pruebas y proyectos pequeños, y la atribución es obligatoria. Si tu aplicación va a tener mucho tráfico, necesitarás otro proveedor.
Cuando quieras publicarlo, npm run build genera la versión optimizada en la carpeta dist. En el siguiente paso puedes cargar tus propias capas en GeoJSON. Si te interesa que lo veamos, déjanos un comentario.
Formación de calidad impartida por profesionales
Documentación
• Vite. Guía de inicio: vite.dev/guide
• React (14 de febrero de 2025). Sunsetting Create React App: react.dev/blog/2025/02/14/sunsetting-create-react-app
• React Leaflet: react-leaflet.js.org
• React (5 de diciembre de 2024). React 19: react.dev/blog/2024/12/05/react-19
La entrada Crea un mapa interactivo con React 19 y Vite se publicó primero en Cursos GIS | TYC GIS Formación.
Atenção
Período: 31/08 a 01/10/2026
Horário: das 19h às 22h
Carga horária: 48 horas – 16 aulas
As duas primeiras aulas serão gravadas. A partir de 02/09, os encontros serão online e ao vivo.
</figure>
Você sabe transformar isso em uma solução acessível na web?
Gerar mapas
Não.
PostgreSQL + PostGIS
GeoServer
GeoNode
Na prática, isso significa que você será capaz de:
Se você não pôde participar presencialmente ou deseja rever os conteúdos apresentados, todos os vídeos das palestras estão disponíveis gratuitamente no nosso canal do YouTube!
Continue acompanhando nossas redes sociais e site para ficar por dentro dos próximos encontros, oficinas e oportunidades de capacitação!