Bars vs Baskets

Today marks the first day of the 2025 #30DayMapChallenge. The theme for day one is:

Points - Map with point data (e.g., individual locations, points of interest, clusters). Focus on effective symbolization and density visualization. 

🗺️ Bars vs Baskets: Mapping the Balance Between Nightlife and Necessities

For my Day 1 entry, I've created Bars vs Baskets, an interactive map that compares the number of bars and pubs with the number of supermarkets and convenience stores around any location you click. 

Each point on the map reveals a quick snapshot of local life - whether a neighborhood is better stocked for a night out or a grocery run. It’s a playful way to explore how leisure and daily essentials are distributed.

Click anywhere on the map, and the app instantly compares the number of bars and pubs versus the number of supermarkets and convenience stores within a one-mile square centered on your click.

The map then visualizes those results with two colored circles:

🔵 Blue for bars & pubs

🔴 Red for supermarkets & convenience stores

The size of each circle is proportional to how many of each type exist nearby - with the smaller circle placed on top, so you can see both even when one outnumbers the other.

⚙️ How It Works

🗺️ Base Map: OpenFreeMap + MapLibre

The interactive base map is powered by MapLibre, an open-source library for rendering vector tiles in the browser. The base map uses OpenFreeMap Positron map tiles - a clean, minimal basemap designed to make the overlaid data stand out.

🧠 Data Source: The Overpass API

The counts of nearby bars, pubs, supermarkets, and convenience stores are fetched live from OpenStreetMap via the Overpass API.

When you click a location, the map sends an Overpass query like this:

[out:json];

(

  node["amenity"~"bar|pub"](south,west,north,east);

  node["shop"~"supermarket|convenience"](south,west,north,east);

);

out;

This retrieves all matching OSM nodes within a 1-mile bounding box. The results are then counted and used to scale the circles dynamically on the map.