Aumento del 230% en la eficiencia de los datos geográficos mediante mapas web interactivos

Innowise ha desarrollado un mapa SVG ligero para visualizar datos geográficos y supervisar los proyectos internacionales del cliente.

Cliente

Industria

Fintech, Gobierno

Región

Cliente desde

2022

Nuestro cliente es una de las instituciones financieras más destacadas, que concede subvenciones y préstamos a proyectos públicos y privados clave. Con más de 100 sucursales en todo el mundo, ofrecen soluciones sostenibles cuyo objetivo es disminuir la pobreza mediante la realización de proyectos de capital.

La información detallada sobre el cliente no puede divulgarse en virtud de las disposiciones del acuerdo de confidencialidad.

Desafío: Superar la carga del papeleo con la visualización de datos en mapas interactivos

Desde su fundación, nuestro cliente ha supervisado miles de proyectos financieros, sociales, energéticos, educativos y medioambientales, entre otros, asociándose con gobiernos y empresas internacionales. Su objetivo es reducir la pobreza, aumentar la prosperidad compartida y promover el desarrollo sostenible financiando proyectos clave de importancia estratégica.

Aunque nuestro cliente tenía un flujo de trabajo y una presentación de datos claros y minuciosos, se enfrentaba a dificultades para analizar y evaluar la información textual. En lugar de utilizar un mapa interactivo visualización de datos para el análisis de datos, dependían de informes de varias páginas, lo que a menudo dificultaba la toma de decisiones informadas.

Al tener una cartera de proyectos global y polifacética, nuestro cliente buscaba una solución escalable, interactiva y personalizable con mapas geográficos para ayudar a los clientes a revisar rápidamente los detalles breves de los proyectos actuales y obtener información sobre las áreas de interés, incluidas las regiones, los países y las áreas personalizadas.

Solución: Desarrollar mapas interactivos que muestren proyectos personalizados en todo el mundo.

Tras analizar la petición del cliente, Innowise sugirió desarrollar un mapa SVG (gráficos vectoriales escalables). A diferencia de los mapas basados en píxeles, los mapas SVG utilizan ecuaciones matemáticas para definir los elementos del mapa, lo que permite ampliarlos y reducirlos sin pérdida de calidad.

En cuanto a la visualización de datos de localización, las opciones más populares incluyen bibliotecas como Google Maps y Open Street Maps. Los mapas SVG, sin embargo, son ligeros, personalizables y libres de licencia, por lo que son una buena opción cuando no se requiere ni alta resolución ni un detalle escrupuloso.

Una vez decidida la solución, nuestro equipo de proyecto avanzó por varias fases hasta entregar mapas SVG interactivos.

DIVISIONES ADMINISTRATIVAS DE PRIMER NIVEL

Antes de profundizar en la lógica central, Innowise aclaró las principales entidades que ilustra un mapa SVG. Además de establecer las fronteras geográficas correctas de los países, también tuvimos que garantizar divisiones administrativo-territoriales precisas y actualizadas. Por ejemplo, los distintos países se dividen en varias divisiones administrativas, como los estados en EE.UU., las provincias en Canadá y las regiones en Francia.

En consecuencia, nos propusimos recopilar datos cartográficos precisos de Natural Earth que reflejaran estas variaciones administrativas regionales. Natural Earth es un repositorio cartográfico gratuito que proporciona datos ráster y vectoriales a escalas de 1:10 m, 1:50 m y 1:110 millones, y sirve como plantilla de base adecuada para crear mapas digitales visualmente atractivos y elaborados por expertos utilizando software SIG.

DE SHP A SVG

Tras elegir las plantillas cartográficas adecuadas, nuestro equipo de proyecto convirtió los shapefiles multiformato originales (SHP) en gráficos vectoriales escalables. Estos gráficos proporcionaban rutas a cada división administrativa y se representaban mediante un archivo SVG, que es un archivo XML que contiene objetos geométricos como círculos, líneas, cuadrados y otros. Estos objetos se incrustaron como etiquetas SVG, lo que garantizó que las imágenes se mantuvieran suaves y proporcionales.

GUIÓN DE PITÓN

Aunque cada entidad del archivo SVG tiene su propia etiqueta de ruta, organizar los datos sistemáticamente sería más eficaz para cumplir los requisitos del proyecto. Ordenamos los datos del archivo SVG alfabéticamente por país y división administrativa utilizando un Script en Python. El resultado fue un conjunto de datos que contenía más de 4.500 divisiones administrativas de primer nivel situadas en 153 países de todo el mundo en los que el cliente tiene proyectos en curso o tiene previsto invertir fondos.

DE LA REFACTORIZACIÓN DEL CÓDIGO A LA APLICACIÓN WEB PROGRESIVA

Tras cargar los datos del mapa SVG para su compilación, el tamaño del archivo superaba los 16 MB de texto puro. Dado que una digitalización meticulosa provocaría congelaciones, fallos y otros problemas de rendimiento, nuestros especialistas decidieron utilizar Javascript para convertir el mapa interactivo en una aplicación web progresiva. Por lo tanto, nuestro equipo de proyecto incorporó los archivos SVG en el marcado HTML. Sin embargo, como el código superaba las 4.500 líneas, nuestros ingenieros de software añadieron marcos en línea (elementos HTML que cargan otra página HTML dentro del documento) y un archivo HTML independiente que contenía SVG. Esto ayudó a optimizar la carga del sistema y a garantizar un rendimiento sin problemas. Además, construimos un servidor local para permitir peticiones de origen cruzado desde múltiples usuarios.

INTERFAZ DE USUARIO

Además, nuestro equipo de proyecto creó una interfaz fácil de usar para facilitar la navegación por el mapa. Coloreamos el mapa, especificando tonos en función del número de proyectos en un país concreto. Además, nuestros desarrolladores crearon prácticos filtros para buscar proyectos específicos, destacando las regiones en función del estado del proyecto (activo, cerrado, suspendido). Los proyectos se clasifican según su finalidad (protección social, sanidad, agricultura, energía, etc.), países de aplicación y coste acumulado. Tras especificar los proyectos, los usuarios pueden descargar informes en PDF para saber más sobre ellos.

En general, Innowise ha implementado funciones como fondos de mapa (topográficos, imágenes con etiquetas y otros), configuración de mapas (por defecto en 2D o en forma de tabla), funciones de búsqueda avanzada (basadas en el nombre de la ubicación o en coordenadas geográficas en grados decimales/formato DMS) y opciones de acercamiento/alejamiento.

Tecnologías

Front-end

React, React-query, MaterialUI, D3.js

Back-end

Node.js, Express.js, Python

Base de datos

MongoDB

VCS

Github

DevOps

Docker, Jenkins, AWS

Proceso

A lo largo del proceso de desarrollo del software de mapeo empresarial, Innowise se adhirió a enfoques ágiles y se alineó con las necesidades del cliente. El equipo del proyecto siguió la metodología Scrum con sprints semanales, reuniones diarias del equipo e integración y pruebas continuas. Al comunicarnos con el cliente a través de Microsoft Teams, acomodamos fácilmente los cambios en el alcance y distribuimos las tareas según las competencias de los miembros del equipo.

Siguiendo la visión del proyecto, lanzamos un MVP completo con funcionalidades básicas. En la actualidad, el cliente está estudiando la posibilidad de añadir nuevas funciones e integrar el mapa SVG con servicios externos.

Equipo

Analista de negocio

Jefe de proyecto

Desarrolladores de Front-end

Desarrolladores de Back-end

Diseñador UI/UX

DevOps

Ingenieros de QA

Resultados: Mayor transparencia, escalabilidad e interactividad de los datos.

Innowise ha desarrollado un software de mapa empresarial para supervisar la información sobre los proyectos de los clientes en todo el mundo. Hemos proporcionado una plataforma única en la que el cliente puede gestionar los proyectos en curso, clasificarlos por varios factores y acceder a los detalles del proyecto. Los hermosos mapas SVG que hemos desarrollado ofrecen al cliente múltiples beneficios, tales como:

Escalabilidad. Como los mapas SVG son vectoriales, pueden ampliarse o reducirse sin perder calidad ni pixelarse. Esto permite mostrar contenidos con distintos niveles de zoom o tamaños, lo que ofrece una mayor flexibilidad.
Interactividad. Los mapas SVG permiten a los usuarios interactuar con los elementos digitales haciendo clic o pasando el ratón por encima de distintas características, mostrando datos asociados a una zona geográfica concreta.
Ligeros. Los mapas SVG suelen tener un tamaño de archivo menor que otros formatos, como las imágenes rasterizadas. Esto hace que sean más fáciles de cargar y mostrar en una página web, garantizando una experiencia de usuario fluida.
Personalización. Nuestro equipo de proyecto personalizó y dio estilo al mapa utilizando CSS, lo que permitió un alto grado de control sobre el aspecto del mapa. Esto permite resaltar características específicas y que el mapa coincida con la marca del cliente, ofreciendo un toque personalizado.

Duración del proyecto

Junio 2022 - En curso

500+

proyectos en 150 países

230%

aumento de la eficacia de los datos geográficos

Casos relacionados

Póngase en contacto con nosotros

Reservar una llamada o rellene el siguiente formulario y nos pondremos en contacto con usted cuando hayamos procesado su solicitud.

Nombre

Empresa

Correo electrónico

Teléfono

Mensaje Por favor, facilítenos detalles del proyecto, duración, tecnologías, especialistas informáticos necesarios y otra información relevante.

Grabe un mensaje de voz sobre su proyecto
para ayudarnos a comprenderlo mejor.

Adjunte los documentos adicionales si es necesario

Cargar archivo

Puede adjuntar hasta 1 archivo de 2 MB en total. Archivos válidos: pdf, jpg, jpeg, png

Le informamos de que cuando haga clic en el botón Enviar, Innowise procesará sus datos personales de acuerdo con nuestra Política de privacidad con el fin de proporcionarle la información adecuada.

¿Qué pasa después?

Una vez recibida y procesada su solicitud, nos pondremos en contacto con usted para detallar las necesidades de su proyecto y firmar un acuerdo de confidencialidad que garantice la confidencialidad de la información.

Después de examinar los requisitos, nuestros analistas y desarrolladores elaboran una propuesta de proyecto con el alcance de las obras, el tamaño del equipo, el tiempo y las estimaciones de costos.

Concertamos una reunión con usted para discutir la oferta y llegar a un acuerdo.

Firmamos un contrato y comenzamos a trabajar en su proyecto lo más rápido posible.

¿Necesita otros servicios?

Servicios de desarrollo de software FinTech

AWS

Empresa de desarrollo de aplicaciones React Native

Empresa de desarrollo React.js

Servicios de consultoría en la nube de AWS

Servicios de consultoría FinTech

Soluciones informáticas gubernamentales

Servicios de desarrollo de software de inversión

Empresa de desarrollo en Python

Empresa de desarrollo de portales web B2B

Empresa de desarrollo web a medida

Empresa de desarrollo web Drupal

Aumento del 230% en la eficiencia de los datos geográficos mediante mapas web interactivos

Cliente

Desafío: Superar la carga del papeleo con la visualización de datos en mapas interactivos

Solución: Desarrollar mapas interactivos que muestren proyectos personalizados en todo el mundo.

Tecnologías

Proceso

Equipo

Resultados: Mayor transparencia, escalabilidad e interactividad de los datos.

Casos relacionados

Póngase en contacto con nosotros

¿Qué pasa después?

¿Necesita otros servicios?

Vamos a^●desarrollar
software juntos!

Cerrar

Aumento del 230% en la eficiencia de los datos geográficos mediante mapas web interactivos

Cliente

Desafío: Superar la carga del papeleo con la visualización de datos en mapas interactivos

Solución: Desarrollar mapas interactivos que muestren proyectos personalizados en todo el mundo.

Tecnologías

Proceso

Equipo

Resultados: Mayor transparencia, escalabilidad e interactividad de los datos.

Casos relacionados

Póngase en contacto con nosotros

¿Qué pasa después?

¿Necesita otros servicios?

Vamos a●desarrollar software juntos!

Cerrar

Vamos a^●desarrollar
software juntos!