search

datosgcba / Ciudad-3D

Repositorio Frontend Ciudad 3D
https://ciudad3d.buenosaires.gob.ar/
10 stars 11 forks source link
3d catastro foss4g maps opensource osgeo urbanismo vector-tiles

readme

Ciudad 3D

logo

Ciudad 3D es una plataforma para la visualización de información en 3D, a traves de figuras geográficas, del actual Código Urbanístico del Gobierno de la Ciudad de Buenos Aires.

Indice

Nota del autor:

Este proyecto depende fuertemente de la clase src/utils/MapaInteractivoGL.js que intenta reemplazar la librería publicada en npm de mapainteractivo para lograr la visualización de Vector Tile con diferentes estilos, esto se logra utilizando la libreria de Mapbox-GL-js en su versión 1.0.

Para la siguiente versión se reemplazará la con la libreria MapLibre-GL-js.

Stack de Tecnológia

En el actual repositorio se encuentra el desarrollo del Frontend, pero la aplicación cuenta con otros componentes de uso común, siendo los siguientes:



Estructura del proyecto

Volver


A continuación especificamos la estructura de carpeta del proyecto. Inicialmente esta dividida en:

.
├── docs
│   └── images
└── source
    ├── public
    └── src
        ├── components
        │   ├── Alerts
        │   ├── Categories
        │   ├── FeatureInfo
        │   ├── Logo
        │   ├── Map
        │   ├── Marker
        │   ├── Parcel
        │   ├── Popup
        │   ├── Sections
        │   ├── Seeker
        │   └── SideBar
        ├── containers
        │   └── Home
        ├── img
        ├── state
        │   └── ducks
        ├── theme
        │   ├── FontsTest
        │   └── wrappers
        └── utils
            └── layer-builders

Carpeta Source



Arquitectura de la Aplicación

Volver


Arquitectura de la aplicación

Librerias

Las librerias utilizadas en el proyecto son:

EmailJs

EmailJs es una librería que permite enviar mails desde el frontend con JavaScript. Para este projecto se utiliza con el fin de que los usuarios puedan enviar sus sugerencias y consultas sobre el uso de la aplicación.

La configuración del servicio y el template a utilizar se deben hacer desde EmailJs accediendo con el usuario especifico. El id del usuario, servicio y el template deben ser colocados dentro del Reducer contact el cuál se encarga de utilizar esta librería. Para más información ver la guía de emailJs.

Sobre la librería Mapbox GL JS el componente Map y las utilidades mapboxUtils y MapaInteractivoGL

Como se dijo el corazón de la aplicación es Mapbox GL JS esta es una excelente librería para el uso de mapas, lamentablemente está librería está orientada a un paradigma de eventos y objetos donde cada uno mantiene su propia fuente de estado. Mientras por otro lado la aplicación se basa en el principio de redux en mantener una única fuente de datos. Para lograr acoplar estos dos tan diferentes estilos de desarrollo se opta por realizar llamadas a promesas desde el middleware que invoquen los eventos ofrecidos y métodos ofrecidos por mapbox y al terminar el middleware actualizara el estado para que los componentes puedan utilizarlo. Esto se realiza se realiza a través de mapBoxUtils y MapaInteractivoGL. Debido a que las nuevas versiones de la libreria no Open Source, para futuras versiones se planifica su reemplazo por MapLibre-GL-js.

Configuración de la Aplicación

En la variable REACT_APP_URL_CONFIG del archivo .env se configura una url que obtiene un json entregado por un servicio que contiene toda la información necesaria que la aplicación pueda ser fácilmente adaptada. Se recomienda fuertemente que solo acceda a estas configuraciones a través de configQueries con el objetivo de mantener desacoplado la configuración de los componentes siendo almacenada en memoria o en el sessionStorage según sea conveniente. En este archivo se configuran los grupos y las capas que figurarán en el panel lateral y las secciones que se abren al seleccionar cada categoría así como también la visualización de sus capas.

API REST

Para la publicación de información se utiliza una API REST donde se configura en \source\src\utils\apiConfig.js



Ambiente de Desarrollo

Volver


Entorno

Se ha probado utilizando node 12.18.2 (lts/erbium) con npm 6.14.5, específicamente se ha desarrollado sobre windows 10, Linux Ubuntu y macOS Catalina, es de suponer se puede continuar el desarrollo en cualquier sistema operativo que soporte node 12 o superior.

IDE de desarrollo

Si bien el proyecto debería poder ser utilizado con cualquier IDE, se recomienda fuertemente utilizar VSCode con las siguientes dos extensiones:

Otras extensiones útiles:



Deploy de la Aplicación

Volver


Para realizar el deploy de la aplicación hay que seguir los siguientes pasos:

  1. Clonar el repositorio
git clone <url repositorio>
  1. Ejecutar desde la consola:
cd source
npm install
npm start

Esto como resultado abrirá una solapa en http://localhost:3000. Si se quiere cambiar el puerto por defecto setear la variable PORT definida en .env

Entorno Producción

En el caso de realizarlo en un entorno de producción, seguimos los siguientes pasos:

  1. Clonar el repositorio
git clone <url repositorio>
  1. Ejecutar desde la consola:
cd source
npm install

Nota: Previo a realizar el build del proyecto hay que considerar que la aplicación utiliza dentro del archivo .env la variable REACT_APP_URL_CONFIG para conectarse a la API que retorna la configuración de la aplicación. Para este entorno utilizar esta configuración.

  1. Realizar el build con el siguiente comando
npm run build

Dicho comando genera una carpeta build la cuál puede ser publicada como un sitio estático, en el servidor que se desee, como por ejemplo nginx, apache, express, serve, entre otros.

Para más información:

Utilizando Docker

Nota: previo a realizar el build del proyecto actualizar la variable REACT_APP_URL_CONFIG que se encuentra dentro del archivo .env por el valor que corresponda.

Si la intención es usar este Docker para realizar unas pruebas y no en producción, puede ser muy útil asignar el REACT_APP_URL_CONFIG=appConfig.json y revisar el archivo public/appConfig.json se encuentré configurado como sea conveniente.

Para generar la imagen

docker build -t react-httpd .

Para generar el contendor

docker run -it --name react-httpd -p 8080:80 react-httpd

Para inciarlo luego

docker start react-httpd