Tutorials / Intermediate

Build an Interactive Map App With Claude (Leaflet + Your Data)

Hiking logs, travel maps, local guides, historical atlases — anything with coordinates becomes an explorable map app. Free tiles, one file, your dataset.

DifficultyIntermediate

Time2–3 hours

You'll needClaude · A browser · A topic with locations

You'll buildA pannable, zoomable map with custom markers, click-for-detail popups, category filters, and a sidebar list — driven by a JSON dataset you control.

Maps feel like the most 'real app' thing a beginner can build — and they're secretly one of the easiest, because Leaflet (free, open source) does the cartography and OpenStreetMap provides the tiles. Your job reduces to a JSON file of places and a design. Travel journals, '50 best taco spots in Austin', historical battle atlases, client-territory maps, campus guides: same build.

Step 1 — Design the dataset first

I'm building an interactive map of [Civil War battle sites in Georgia]. Design a JSON schema for one entry: slug, name, latitude, longitude, category, date, a 2–3 sentence summary, and an optional image URL and source link. Generate 5 sample entries with real, verified coordinates so I can see it populated.

Coordinates are where AI hallucinates most confidently — it will place a real location in a plausible-but-wrong spot. Spot-check every batch: paste lat,lng into any map site and confirm the pin lands where it should. For bulk accuracy, pull coordinates from Wikipedia/Wikidata or a government dataset and have Claude convert that into your schema instead of recalling from memory.

Step 2 — Build the map shell

Build a single HTML file using Leaflet from the cdnjs CDN with OpenStreetMap tiles. It loads my places array (embedded as a JS const for now — schema below). Features: custom-colored markers by category; popups showing name, date, summary, and image; a left sidebar listing all places, click-to-fly-to; category filter checkboxes that update both map and sidebar; a search box filtering by name; mobile layout where the sidebar becomes a bottom sheet. Attribution for OpenStreetMap included. Here's my schema and 5 entries: [paste]. Complete file.

Worth knowingKeep the dataset as a separate places.json loaded by fetch once you pass ~20 entries — editing data inside a 900-line HTML file gets miserable. One ask: 'move the data to places.json and fetch it on load.' (Loading a local JSON file requires serving the folder — python3 -m http.server — or just uploading; double-clicked files block fetch.)

Step 3 — Grow the dataset with AI batches

Now scale: 'Generate 15 more entries for [north Georgia sites], same schema, real coordinates, summaries in the same neutral tone as my examples.' Verify pins, paste into places.json, refresh. A 100-place map is an afternoon of this loop — and a 100-place map on a focused topic is genuinely link-worthy content, which is why local guides and niche atlases punch so far above their build cost in SEO.

Step 4 — The features that make it feel professional

Pick from the proven list: marker clustering when zoomed out (Leaflet has a plugin — Claude knows it); a detail panel instead of cramped popups; shareable URLs that encode the selected place (#site=kennesaw); a 'near me' button using browser geolocation; for historical data, a time slider that filters by date range. Two or three of these and your map reads like a funded project.

Step 5 — Ship it

Static files — any host works, free static hosting included (see the hosting guide). The tiles stream free from OpenStreetMap under their usage policy, which your traffic won't trouble. Title, meta description, and a paragraph of intro text above the map give search engines something to rank, because the map itself is invisible to them — the page around it is what gets found.

Keep going

Need somewhere to put it live? See where to host AI-built sites. Compare tool costs on the pricing tracker (or stick to the free options), then pick your next build.