[OC] Empathizing Map: An offline-first PWA for urban navigation (CDMX, MapLibre, PMTiles for vectors & raster data, ~5.8 MB) Statistics
![[OC] Empathizing Map: An offline-first PWA for urban navigation (CDMX, MapLibre, PMTiles for vectors & raster data, ~5.8 MB) Statistics](/api/images/reddit-maps/1qt3a1n_1769968801160.jpg)
Data Analysis
What This Visualization Shows
This data visualization displays "[OC] Empathizing Map: An offline-first PWA for urban navigation (CDMX, MapLibre, PMTiles for vectors & raster data, ~5.8 MB)" and provides a clear visual representation of the underlying data patterns and trends. The visualization focuses on Image is only a screenshot, full map is here: https://safety-map.empathiz.ing
**TL;DR** Offline-first situational map for CDMX built with MapLibre + PMTiles. Looking for feedback on symbology, density methods, and ethical visualization.
I recently moved to Mexico City (CDMX) and found myself navigating a mix of transit complexity and safety uncertainty -- all while often on a limited data plan. I started building a personal map in QGIS to get my bearings, and was using it as a georeferenced PDF on my mobile; friends encouraged me to make it shareable, which pushed me to formalize it into something others might find useful.
**What it is**
[Empathizing Map](https://safety-map.empathiz.ing/) is a privacy-first, offline-capable PWA designed for situational awareness (transit navigation + contextual safety data). It is currently focused on CDMX because that is where I live and can validate the ground truth.
*Screenshot: Centro Historico showing Metro lines (pink/blue), Metrobús (red), and relative incident density in warm thermal gradients.*
**Technical constraints I set for myself**
- **Offline-first** after the initial visit: app shell + cached layers ~5.8 MB total (~4.8 MB transferred on first load; repeat visits load from the worker cache). When offline, the basemap drops away but cached layers still render. - **No user tracking and no server-side user state** (location stays on-device; shared links are stateless snapshots, not live tracking) - **Progressive Web App** (installable, full-screen, works without a data plan once cached) - **GPS follow mode** for on-the-ground navigation (optional, can be paused) - **Stack**: MapLibre GL JS, PMTiles for vector layers, raster tiles for derived surfaces
**Cartographic choices I'm uncertain about**
*Transit symbology*: I used **dashed line patterns** to distinguish modes (Metro vs. BRT vs. Trolley) while preserving **official STC line colors** (Line 1 pink, Line 2 blue, etc.). This lets users translate map colors directly to station signage without learning a new schema, but I'm curious if this dual-encoding (shape for category, color for route) holds up for colorblind users or if it creates visual noise at high zoom.
**Data methodology (open to critique)**
*Crime density*: Each incident is weighted by severity (5=interpersonal violence like kidnapping/homicide, 4=transit/pedestrian robbery, 3=property crime, etc.) and recency (exponential decay with ~2-year half-life). A 300m triweight kernel smooths this into relative density (not predicted risk).
**Critical limitations I want to flag**: This reflects *police report density*, not incident truth. It's sensitive to reporting rates. This is not a safety guarantee or a predictive risk model -- it is a situational awareness aid.
*Water instability*: Built from CDMX "falta de agua" reports with the same temporal decay, clipped to city bounds. This captures report density, not infrastructure performance -- useful for noticing patterns, not predicting your tap water. This layer is not cached offline yet.
*Transit*: Combined Metro, Metrobús, RTP, and Ecobici from the CDMX data portal into a unified transit registry. I'd love feedback on handling co-located POIs (hospitals vs. clinics) and label hierarchy across zoom levels.
**Pipeline**
Everything rebuilds via CLI updates from the CDMX open data portal. Adding new cities means replicating the spatial layer registry where quality public data exists -- no manual reprocessing.
**Where I need help**
I'd be grateful for feedback from folks who've wrestled with:
1. **Offline cartography**: PWA storage eviction edge cases, and managing user expectations when browsers clear site data 2. **Kernel density for public-facing tools**: Is 300m the right bandwidth for neighborhood awareness without false precision? Would H3 hexbins be more honest about uncertainty than smoothed surfaces? 3. **Ethical visualization**: Are there better ways? Will this benefit?
**Methodology**
Full methodology (including the severity ordinal scale and data sources) is documented on the site (use the lantern icon, then the methodology button).
If you try it out, I'm especially interested in whether the offline behavior feels reliable to others for actual use in the city., which allows us to understand complex relationships and insights within the data through visual storytelling.
Deep Dive into the Topic
This data visualization represents a sophisticated analysis of complex information patterns that provide valuable insights into underlying trends and relationships. Data visualization serves as a bridge between raw numerical data and human understanding, transforming abstract statistics into comprehensible visual narratives.
The power of data visualization lies in its ability to reveal patterns, outliers, and correlations that might not be apparent in traditional tabular formats. Through careful selection of chart types, color schemes, and interactive elements, effective visualizations can communicate complex information quickly and accurately to diverse audiences.
Modern data visualization combines statistical analysis with design principles to create compelling visual stories. This interdisciplinary approach requires understanding both the underlying data and the cognitive processes involved in visual perception. The result is more effective communication of quantitative insights that can inform decision-making and drive positive change.
Data Analysis and Insights
The patterns revealed in this visualization demonstrate the importance of systematic data analysis in understanding complex phenomena. By examining different data segments, time periods, and categorical breakdowns, we can identify trends that inform strategic planning and decision-making processes.
Statistical analysis of this data reveals variations across different dimensions that provide insights into underlying drivers and relationships. These patterns help identify areas of opportunity, potential risks, and key performance indicators that can guide future actions and resource allocation.
The analytical approach used in this visualization enables comparison across different categories, time periods, or geographic regions, revealing insights that support evidence-based decision-making. This type of analysis is essential for organizations seeking to optimize performance and understand complex market dynamics.
Significance and Applications
This data visualization has important implications for understanding trends and patterns that affect decision-making across multiple sectors. The insights derived from this analysis can inform policy development, business strategy, resource allocation, and operational improvements.
For analysts, researchers, and decision-makers, this type of data visualization provides essential insights for strategic planning and performance optimization. Whether addressing operational challenges, market analysis, or policy development, understanding data patterns helps create more effective strategies and solutions.
The broader significance lies in how this information contributes to our understanding of complex systems and relationships. This knowledge helps predict future trends, identify potential challenges, and develop more informed approaches to problem-solving and opportunity identification.
Comments
Loading comments...
Leave a Comment
About the Author

Alex Cartwright
Senior Data Visualization Expert
Alex Cartwright is a renowned data visualization specialist and infographic designer with over 15 years of experience in...