Mapa de Mercados Públicos

Empresa: Secretaría de Desarrollo Económico de la CDMX

Rol: Technology Advisor and Head of Technology

Stack: React, TypeScript, Tailwind CSS, FastAPI, PostgreSQL

Mapa de Mercados Públicos

Los 340 mercados públicos de la Ciudad de México en un solo mapa: dónde está cada uno, en qué estado, qué necesita y a cuáles hay que entrarle primero.

Mapa de mercados de la CDMX — Los 340 mercados de la ciudad, sobre el relieve real del valle

Qué resuelve

El padrón de mercados vivía en hojas de cálculo: una por área, cada una con su versión de la verdad y ninguna con la ubicación. Para saber qué mercado estaba peor había que juntar cuatro archivos y confiar en que todos hablaban del mismo inmueble.

Aquí es una sola base y un solo mapa. Se acota por alcaldía, por nivel de riesgo, por lo que necesita y por si ya tuvo obra, y lo que queda se ve al momento sobre la ciudad.

El padrón filtrado por alcaldía — Cuauhtémoc: 39 mercados y 14,576 locales, con el padrón al lado

Por dónde empezar

La vista de prioridad ordena las 16 alcaldías por mercados en riesgo y desglosa qué hace falta —eléctrica, hidráulica, sanitaria, gas—. Es la pantalla con la que se decide a qué se le entra este año.

Prioridad de atención — Riesgo por alcaldía: se toca una y el mapa vuela hasta ella

El mapa es 3D, y eso sirve

Vista satelital, volumen de los edificios y relieve del valle. No es adorno: un mercado se reconoce por su techo y por la manzana que ocupa, y así quien lo conoce lo ubica sin leer la dirección.

::carousel images=[{"src": "/media/work-projects/images/mercados-cdmx/edificios.jpg", "alt": "Vista 3D del centro", "caption": "El centro en volumen, con los mercados marcados"}, {"src": "/media/work-projects/images/mercados-cdmx/reforma.jpg", "alt": "Reforma en 3D", "caption": "Reforma: satélite, edificios y padrón encima"}, {"src": "/media/work-projects/images/mercados-cdmx/zocalo.jpg", "alt": "El Centro Histórico", "caption": "El Centro Histórico visto desde el mapa"}]::

La ficha de cada mercado

Locales, superficie, año, fotos, estado del inmueble, lo que necesita y lo que se acordó hacerle. Todo lo que antes había que pedir por correo a tres áreas distintas.

Ficha de un mercado — La ficha de un mercado: estado real del inmueble y lo acordado

::two-columns split="50-50"::

Lo que hice

El mapa completo, el padrón y su ficha, los filtros y la vista de prioridad. Frontend y backend.

::column-break::

Lo que importaba

Que sirviera para decidir, no para consultar. Un padrón que sólo se mira no cambia nada; éste se filtra, se ordena por riesgo y termina en una lista de a quién le toca.

::/two-columns::

Filtros del padrón — Acotar el padrón: alcaldía, riesgo, obra, giro, tamaño

Stack

React con TypeScript y MapLibre sobre teselas vectoriales, contra una API en FastAPI y PostgreSQL. Los datos reservados no se esconden en la pantalla: el permiso se comprueba en el servidor y lo que no te toca ver no sale de ahí.