A Broken Map, a Bad Fix, and the Fallback That Was Doing Everything
A silent CSP gap had my map's real tile source blocked for months. My first fix made it worse — here's the bug, and the vector-tile migration that followed.
A small, free tool called USFoodInJapan provides a map that helps Americans traveling in Japan find nearby US fast food chains and convenience stores with distance and one-tap directions. The map is a static site with no backend, using HTML, vanilla JS, and Leaflet.js for the map layer. A few weeks ago, someone noticed a watermark on the map, which led to a debugging story with an unexpected twist.
The fix they shipped first didn't just fail but made the site worse. The real cause turned out to be a silent issue for a long time. The map used two tile layers: Esri's World Street Map as the primary source and CARTO's free raster basemap as the fallback if Esri ever failed to load. A Content-Security-Policy header had never whitelisted Esri's tile domain, causing every real page load to hit an instant tile error and fall straight through to CARTO, which had been doing 100% of the actual work.
When CARTO's free tier started requiring a key, both paths were broken simultaneously. The actual fix was simple: add the missing domains to img-src. The incident highlights the importance of knowing your primary path works right now, not just assuming the app renders.
Written by urgent.news from HackerNoon's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
