Project 19: GeoMap Storyteller 🗺️¶

Difficulty: 🔴 Advanced

Run cells top to bottom. Each step builds on the previous one and saves real files under outputs/geomap_storyteller/.

← Back to index

Description¶

Plot an interactive world map with markers and popups using Folium — share it as a standalone HTML file.

Libraries & Modules¶

  • folium — Map, Marker, CircleMarker, Icon
  • Built-in: list, dict

Python Concepts You'll Practice¶

Geo data structures, layered maps, HTML export, coordinates

🎛️ Parameter Variations¶

  • LOCATIONS — add cities with (lat, lon, label)
  • ZOOM_START — world view (2) vs city view (12)
  • TILE_STYLE — 'OpenStreetMap', 'CartoDB positron', 'Stamen Terrain'
  • MARKER_COLOR — icon color per location
In [1]:
# Install dependencies for this project (safe to re-run)
import sys
!{sys.executable} -m pip install pillow numpy matplotlib wordcloud qrcode[pil] python-barcode fpdf2 jinja2 folium plotly pandas scipy ipywidgets -q
Skipping pip install (already installed)
In [2]:
# Interactive Jupyter setup — run this cell first
%matplotlib inline

from pathlib import Path
from IPython.display import display, Image as IPImage, HTML, Markdown, Audio, IFrame

OUTPUT_DIR = Path("outputs") / "geomap_storyteller"
OUTPUT_DIR.mkdir(parents=True, exist_ok=True)
print(f"✅ Outputs folder: {OUTPUT_DIR.resolve()}")
✅ Outputs folder: C:\Users\Hansel Yan\Projects\CodeItAll\outputs\geomap_storyteller

Step 1 — Define locations & build map¶

In [3]:
import folium

# 🎛️ TWEAK THESE
LOCATIONS = [
    {"name": "Tokyo", "lat": 35.6762, "lon": 139.6503, "color": "red"},
    {"name": "Paris", "lat": 48.8566, "lon": 2.3522, "color": "blue"},
    {"name": "New York", "lat": 40.7128, "lon": -74.0060, "color": "green"},
    {"name": "Sydney", "lat": -33.8688, "lon": 151.2093, "color": "purple"},
    {"name": "Cairo", "lat": 30.0444, "lon": 31.2357, "color": "orange"},
]
ZOOM_START = 2
TILE_STYLE = "CartoDB positron"

center_lat = sum(l["lat"] for l in LOCATIONS) / len(LOCATIONS)
center_lon = sum(l["lon"] for l in LOCATIONS) / len(LOCATIONS)

m = folium.Map(location=[center_lat, center_lon], zoom_start=ZOOM_START, tiles=TILE_STYLE)

for loc in LOCATIONS:
    folium.Marker(
        location=[loc["lat"], loc["lon"]],
        popup=f"<b>{loc['name']}</b><br>CodeItAll GeoMap",
        tooltip=loc["name"],
        icon=folium.Icon(color=loc["color"], icon="info-sign"),
    ).add_to(m)
    folium.CircleMarker(
        location=[loc["lat"], loc["lon"]],
        radius=8,
        color=loc["color"],
        fill=True,
        fill_opacity=0.4,
    ).add_to(m)

out = OUTPUT_DIR / "geomap_storyteller.html"
m.save(str(out))
print(f"Interactive map saved: {out.resolve()}")
display(m)
Interactive map saved: C:\Users\Hansel Yan\Projects\CodeItAll\outputs\geomap_storyteller\geomap_storyteller.html
Make this Notebook Trusted to load map: File -> Trust Notebook

✅ Project complete¶

Check your output folder: outputs/geomap_storyteller/

Next: Project 20: Plotly Data Dashboard · Index