Para crear un proyecto con React, Vite, y soporte para Leaflet, puedes seguir estos pasos:
Configurar el proyecto con Vite y React:
Primero, abre tu terminal y ejecuta el siguiente comando para crear un nuevo proyecto con Vite y React:
Windows PowerShell
Copyright (C) Microsoft Corporation. Todos los derechos reservados.
Instale la versión más reciente de PowerShell para obtener nuevas características y mejoras. https://aka.ms/PSWindows
PS D:\ReIngeneriaCapas> npm create vite@latest reingmapas
> npx
> create-vite reingmapas
│
│ Select a framework:
│ ○ Vanilla
│ ○ Vue
◆ ● React
│ ○ Preact
│ ○ Lit
│ ○ Svelte
│ ○ Solid
│ ○ Qwik
│ ○ Angular
│ ○ Marko
│ ○ Others
└
◆ Select a variant:
│ ○ TypeScript
│ ● TypeScript + SWC
│ ○ JavaScript
│ ○ JavaScript + SWC
│ ○ React Router v7 ↗
│ ○ TanStack Router ↗
│ ○ RedwoodSDK ↗
│ ○ RSC ↗
└
│
◇ Scaffolding project in D:\ReIngeneriaCapas\reingmapas...
│
└ Done. Now run:
cd reingmapas
npm install
npm run dev
entra a la carpeta del proyecto
cd reingmapas
Verificar la instalación de Node.js y npm:
Asegúrate de tener Node.js y npm instalados correctamente. Puedes verificar esto ejecutando:
node -v
npm -v
Esto debería mostrar las versiones de Node.js y npm instaladas. Si no están instalados, descarga e instala Node.js desde nodejs.org.
Instalar las dependencias del proyecto:
Navega al directorio de tu proyecto y ejecuta el siguiente comando para instalar todas las dependencias necesarias:
npm install
Usar la ruta completa de npm para ejecutar Vite:
Si Vite no se reconoce como comando, puedes intentar ejecutarlo usando npx, que viene con npm y se utiliza para ejecutar paquetes de Node:
npx vite
ó
npm run dev
VITE v7.0.6 ready in 240 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
Se creara un proyecto dedicado a los mapas con una Geoestructura basica , tocando cada punto importante. Para comenzar intalaremos las dependencias a utilizar.
npm install react-leaflet turf/turf leaflet-polylinedecorator axios chroma-js chromadb cors express geojson-stream leaflet leaflet-geometryutil leaflet-polylinedecorator leaflet-routing-machine leaflet.heat leaflet.wms mgrs multer papaparse proj4 proj4-fully-loaded react react-dom react-leaflet react-leaflet-cluster shapefile uuid
Aquí tienes una descripción de cada una de las dependencias que has listado, junto con sus usos comunes:
- @react-leaflet/core: Proporciona los componentes principales para usar Leaflet con React. Es una dependencia esencial para integrar mapas Leaflet en una aplicación React.
- @turf/turf: Una biblioteca para análisis y manipulación de datos geoespaciales. Turf proporciona funciones para realizar operaciones geográficas avanzadas.
- @types/leaflet-polylinedecorator: Proporciona definiciones de tipos TypeScript para la biblioteca leaflet-polylinedecorator.
- axios: Una biblioteca para hacer solicitudes HTTP desde el navegador o Node.js. Es útil para interactuar con APIs RESTful.
- chroma-js: Una biblioteca para trabajar con colores y escalas de colores. Es útil para la visualización de datos.
- chromadb: Una base de datos vectorial para almacenar y consultar embeddings, útil en aplicaciones de inteligencia artificial y aprendizaje automático.
- cors: Middleware para Express que permite la configuración de CORS (Cross-Origin Resource Sharing), esencial para aplicaciones web que necesitan hacer solicitudes entre diferentes dominios.
- express: Un framework para aplicaciones web en Node.js. Se utiliza para construir APIs y manejar solicitudes HTTP.
- geojson-stream: Una herramienta para trabajar con flujos de datos GeoJSON, útil para procesar grandes conjuntos de datos geográficos.
- leaflet: La biblioteca principal para crear mapas interactivos en la web.
- leaflet-geometryutil: Extensión de Leaflet para realizar operaciones geométricas en el mapa.
- leaflet-polylinedecorator: Una biblioteca para decorar polilíneas en Leaflet, útil para añadir patrones y estilos a las líneas en los mapas.
- leaflet-routing-machine: Proporciona funcionalidad de enrutamiento para Leaflet, permitiendo calcular y mostrar rutas en el mapa.
- leaflet.heat: Una biblioteca para crear mapas de calor en Leaflet.
- leaflet.wms: Extensión para trabajar con servicios WMS (Web Map Service) en Leaflet.
- mgrs: Una biblioteca para convertir entre coordenadas MGRS (Military Grid Reference System) y otros sistemas de coordenadas.
- multer: Middleware para Express que facilita la gestión de subidas de archivos.
- papaparse: Una biblioteca para analizar y generar archivos CSV.
- proj4: Una biblioteca para convertir coordenadas entre diferentes sistemas de referencia de coordenadas.
- proj4-fully-loaded: Una versión de proj4 que incluye todas las definiciones de proyección.
- react: La biblioteca principal para construir interfaces de usuario en aplicaciones web.
- react-dom: Proporciona métodos específicos del DOM para React, esencial para renderizar componentes React en el navegador.
- react-leaflet: Componentes React para Leaflet, facilitando la integración de mapas Leaflet en aplicaciones React.
- react-leaflet-cluster: Proporciona componentes para agrupar marcadores en mapas Leaflet dentro de una aplicación React.
- shapefile: Una biblioteca para leer y escribir archivos shapefile, un formato común para datos geográficos vectoriales.
- uuid: Una biblioteca para generar identificadores únicos universales (UUIDs).
Crear un componente de mapa:
para crear un componente que muestre un mapa creraremos un componente ViewMaps y modificaremos el componente App , como primer paso modificaremos el componete App.tsx
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
function App() {
const [count, setCount] = useState(0)
return (
<>
<div>
<a href="https://vite.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.tsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
</>
)
}
export default App
lo modificaremos a :
import React from 'react';
import ViewMaps from './componets/Map/ViewMaps.tsx';
function App() {
return (
<div style={{ height: '100vh', width: '100%' }}>
<ViewMaps />
</div>
);
}
export default App;
Crear componente ViewMaps
En la carpeta src/ ,es la carpeta principal donde reside el código fuente de tu aplicación.Tenemos que crear la carpeta components/ donde se almacenan los componentes reutilizables. Cada componente suele tener su propia carpeta con un archivo .tsx y posiblemente un archivo de estilos asociado; Creamos la carpeta Map/ donde crearemos nuestro componente ViewMaps.tsx, nuestra ruta sera 'src/componets/Map/ViewMaps.tsx'