Map Maker

Map Maker is a single-page app for building polished itinerary maps in seconds. Pick a country, type the stops (cities or places), and the app generates the map with labels each stop, and connects them with a smooth dashed route that can be exported as a hi-res PNG.

Demo: https://map.eric.fun

Disclaimer: The source code of this project was generated entirely by Claude Code and OpenAI Codex.

Features

• ✅ Highlight one or many countries with customizable colors using OSM-sourced boundaries
• ✅ Geocode stops automatically (or enter precise lat/lon) and keep their labels readable with smart positioning
• ✅ Optional curved route line that connects stops in entry order
• ✅ Shareable state via URL query params so itineraries can be reloaded instantly
• ✅ High-quality PNG export (2× scale) with UI hidden for presentation-ready output
• ✅ Works entirely in the browser—no server component required

Quick Start

1. Clone or download the repository.
2. Open index.html in any modern desktop browser (Chrome or Firefox recommended for PNG exports).
3. Add a country, paste stops (one per line), optionally toggle Draw route, then click Generate map.
4. Click Download PNG to export the rendered map once you are happy with it.

Note: Safari struggles with the PNG export pipeline. For best results, use Chrome on desktop.

Usage Tips

• Multiple countries: Each country block keeps its own stop list and fill color. Add as many as you need.
• Custom ordering: Stops are rendered and routed in the order they appear in the textarea.
• Latitude/longitude support: Supplying values like 35.6762, 139.6503 will skip geocoding and place the marker directly.
• Sharing: Every change updates the URL query string. Copy the full URL to share or bookmark your itinerary.
• GeoJSON prefetch: Country boundaries are cached after the first load, so switching between itineraries stays fast.

Tech Stack

• Leaflet for map rendering
• CARTO Positron tiles for a clean base layer
• datasets/geo-countries GeoJSON for country boundaries
• OpenStreetMap Nominatim for geocoding stops
• dom-to-image to export the map pane as a PNG
• Tailwind CSS for lightweight styling utilities

Development

The project is intentionally lightweight—there is no build step.

• Edit index.html directly and refresh the browser.
• Respect the Nominatim usage policy: avoid triggering bulk geocoding and allow time between requests.

License

Released under the MIT License.