Tenerife Comercio: un atlas comercial georreferenciado
Rediseño y ampliación del atlas comercial del Cabildo de Tenerife: un mapa interactivo de unos 40.000 comercios con capas socioeconómicas, informes descargables y un pipeline de datos basado en estadísticas oficiales.
- Rol
- Desarrollador y responsable del mantenimiento; único desarrollador del código
- Cliente
- Cabildo de Tenerife, Unidad de Banco de Datos y Centro de Documentación
- Estado
- La versión nueva aún no está publicada; la web en línea es la anterior
- Tecnologías
- Joomla 6, PHP 8.2, JavaScript puro (módulos ES), Leaflet, Chart.js, jsPDF, Python, Figma
Contexto
La Unidad de Banco de Datos y Centro de Documentación del Cabildo de Tenerife lleva más de 30 años recopilando información sobre la isla. Su Atlas Comercial, creado en 2012, reúne la actividad comercial, industrial y socioeconómica de Tenerife y la muestra en un mapa georreferenciado. Su objetivo es promover el comercio local y facilitar el emprendimiento.
El reto
- Reunir en un único sitio contenidos que estaban dispersos (ayudas y subvenciones, datos de comercios, guía para crear una empresa, formularios de solicitud).
- Dar al mapa el contexto socioeconómico necesario para valorar la viabilidad de un negocio en cada zona, con datos que cualquiera pueda verificar.
- Hacer la herramienta accesible para personas sin formación técnica.
- Mantener la plataforma estable y documentada, para que no dependa de una sola persona.
Qué hice
Rediseño e integración
- Diseñé la nueva interfaz en Figma, la validé con la unidad y la construí en Joomla con HTML, CSS y JavaScript: componentes modulares, diseño responsive y variables de color compartidas para mantener la coherencia visual.
- Integré en un solo sitio los contenidos dispersos, incluidos los de otra web para autónomos y micropymes, y actualicé el portal a Joomla 6.
- Desarrollé tres componentes propios de Joomla: el mapa con su pipeline de datos, un formulario de plan de empresa que genera un PDF y un formulario para sugerir nuevos comercios.
El mapa interactivo
- Un mapa con Leaflet, con búsqueda y filtros sobre unos 40.000 comercios.
- Capas socioeconómicas seleccionables: renta media, densidad de población, envejecimiento, país de nacimiento de la población extranjera, equipamientos de proximidad, alojamiento turístico, tráfico de transporte público y accesibilidad para personas con movilidad reducida.
- Un selector de capas rediseñado (agrupado por tipo, con iconos y ayuda contextual que indica la fuente de cada dato) y un interruptor de nombres de calles y lugares, útil sobre la vista de satélite.
- Una herramienta de "área seleccionable": se delimita libremente una zona sobre el mapa y se obtiene el informe de los comercios de esa zona, en lugar de limitarse a un municipio.
- Un informe descargable (pantalla, CSV y PDF) con gráficos comparativos por municipio y la cita de la fuente de cada dato.
Datos y verificación
- Scripts en Python que descargan datos estadísticos del INE y del ISTAC y los convierten en el JSON que lee el mapa.
- Verificación cruzada de cada variable entre fuentes oficiales de datos abiertos, incluido el portal de datos del propio Cabildo, antes de publicarla en el mapa.
- Corrección de problemas de calidad de datos detectados por el camino, como nombres de municipio que no coincidían entre fuentes, y asignación de municipio a registros que no lo traían calculándolo geográficamente.
Decisiones técnicas
- JavaScript puro, sin jQuery ni frameworks. Las cinco librerías de terceros se sirven desde el propio sitio y no desde una CDN, y las más pesadas (Chart.js y jsPDF) solo se descargan cuando alguien abre el informe o exporta un PDF.
- Datos en ficheros en lugar de tablas propias: el mapa lee JSON estático generado a partir de CSV, y esos datos son de solo lectura en ejecución.
- Miniaturas WebP para las fotos de los comercios: 24.132 imágenes, de media un 36 % más ligeras. También probé AVIF y lo descarté: pesa un 40 % menos, pero tarda unos 870 ms por imagen en generarse en PHP para ahorrar solo unos 7 KB más por ventana emergente.
- Una variable del informe (locales y naves disponibles) se retiró a petición expresa de la unidad cuando dejó de ser relevante para el análisis.
Calidad y mantenimiento
- Corregí un problema de caché que podía hacer que las personas usuarias recurrentes vieran una versión desactualizada del mapa tras una actualización, y varios detalles de visualización en dispositivos móviles.
- Escribí pruebas de humo en modo headless para el generador de PDF y para módulos del mapa.
- Documenté el proyecto (manual de desarrollo, registro de cambios y catálogo de funcionalidades) para que cualquier persona técnica pueda mantenerlo.
En cifras
De una fotografía del repositorio en septiembre de 2026 (versión 0.8.0):
- Unos 40.000 comercios en el mapa.
- 602 commits en unos 8,5 meses, todos de un solo desarrollador.
- Unas 35.000 líneas de código propio en 148 ficheros: JavaScript 36 %, PHP 26 %, CSS 21 % y Python 16 %.
- Cinco librerías de terceros, todas servidas desde el mismo dominio, y ninguna tabla propia en la base de datos.
Resultado
- El atlas incluye ya las variables socioeconómicas previstas desde el inicio del proyecto.
- Cada variable indica su fuente, en pantalla y en el informe, para que cualquiera pueda comprobar de dónde sale una cifra.
- El selector de capas y la herramienta de área hacen el mapa más fácil de usar para personas sin formación técnica.
- El proyecto está documentado, de modo que su conocimiento no depende de una sola persona.