Leaflet + 440K Markers: How We Built a 4-Tier Hierarchical Map Without Paid APIs

Google Maps API costs $7 per 1,000 loads after the free tier. Mapbox charges per tile request. We render 440,000 cafe markers on CoffeeTrove for $0/month using Leaflet + CARTO tiles + a custom clustering system. The Problem Rendering 440K markers on a map at once will crash any browser. Marker clustering libraries like Leaflet.markercluster work for 10K points but choke beyond that. We needed a solution that: Works at world zoom (showing continents) Drills down to individual cafes at street level Loads fast on mobile Costs nothing 4-Tier Hierarchical System Instead of client-side clustering, we cluster server-side at 4 zoom levels: Tier 1: Continents (zoom < 4) Hardcoded continent centroids with aggregated counts: const CONTINENT_MAP = { ' Europe ' : { lat : 48.5 , lng : 10 , count : 185000 }, ' North America ' : { lat : 42 , lng : - 100 , count : 120000 }, ' Asia ' : { lat : 30 , lng : 105 , count : 85000 }, // ... }; 7 bubbles on screen. Instant render. Tier 2: Countries (zoom 4-6) S