Reproyectar y visualizar GeoJSON

Introducción

Con la intención de aprovechar el paquete de NPM que cree anteriormente para reproyectar las coordenadas de objetos GeoJSON; decidí construir una herramienta web que lo implementara y fuera fácil de utilizar por cualquier usuario.

Reproyectar y visualizar GeoJSON es una herramienta en línea gratuita que permite reproyectar las coordenadas de un objeto GeoJSON y visualizarlo en el proceso. Para ello, el usuario debe especificar el código EPSG o bien, la cadena PROJ4 del SRC en la que se encuentra el objeto, así como el SRC objetivo para realizar la transformación. Posteriormente, se deberá pegar o importar el objeto GeoJSON, el bloque de código superior permitirá realizar cambios en este en tiempo real. Al especificar correctamente el SRC del objeto, el mapa mostrará el objeto y todos sus cambios. Finalmente, el usuario puede pegar en el portapapeles el resultado, o bien, descargarlo como un archivo.

Cualquier cambio que se haga como cambios en el objeto o el SRC, se realizará nuevamente la transformación y en el mapa se mostrarán los detalles.

Desarrollo

Mi primera incursión en el lenguaje TypeScript fue mediante un proyecto muy pequeño como lo fue el paquete de NPM reproject-crs-geojson. En este caso, para continuar con mi aprendizaje, decidí realizar algo un poco más grande como una aplicación web. Para ello, cree un proyecto de React con Vite, seleccionando TypeScript como lenguaje.

Para agregar un bloque de código en el navegador encontré bastantes alternativas. La que más me llamó la atención fue React CodeMirror debido a su sencillez y estilo moderno. Para la gestión de los estados nuevamente utilicé Zustand como en proyectos anteriores, al igual que i18next para el manejo de idiomas y MapLibre para la renderización del mapa interactivo. Para este último y dar un toque diferente, decidí implementar una proyección de Globo, lo que hace ver el mapa de forma esférica. Para las teselas vectoriales utilicé Open Free Map con estilos para modo claro y modo oscuro.

Utilicé un poco de React Helmet para agregar algunas etiquetas de SEO, modificar el título y descripción según el lenguaje, etc. Mientras que para el estilo de la web utilicé Flowbite React una librería de componentes basada en Tailwind CSS. Finalmente, decidí crear un pequeño tutorial interactivo para el manejo de la aplicación con Driver.js.