Turn a hand-drawn map into a travel itinerary

Sketch the trip

Draw the rough shape of the coast or border, a line for your route, and a cross with a name for each stop. Add what you know: a guess at the distance, a few words per day ("d2 nazaré waves"), rough costs.

It does not need to be accurate. The reel's sketch was a wobbly coastline, "sea" on one side and "~560km?" next to the line. Photograph each page straight on.

Have Claude read it and check the route

Claude lists the stops in the order you drew them and the numbers you wrote, then checks the order makes sense on a real map. If you zig-zag back on yourself, it should suggest a better order and say why.

Correct anything it misread before going on.

Here are photos of my hand-drawn trip map. List the stops in the order I drew them, any numbers I wrote (distances, prices), and anything you could not read, marked (?). Then tell me if the order makes sense geographically, and if not, suggest a better one and say why. Flag any leg that looks too long for one day.

Get the days, distance and budget

Ask for one short line per day and estimates for the driving and the money. Every number here is an estimate: Claude does not see live prices or traffic. Check distances and times in a maps app and prices on booking sites.

In the reel the trip came out at about 560 km over five days, with a budget of €1,240 for two: stays €620, food €310, fuel and tolls €140, activities €170. Straight-line, those five stops are 477 km apart, and roads are always longer, so the driving distance is worth checking.

Give me one line per day: the stop, one emoji, and the one thing it is for in under five words (like "Big-wave cliffs"). Estimate the driving distance and time for each leg and the total. Then estimate a budget for [2] people: stays, food, fuel and tolls, activities, as round numbers in the local currency, with the total and per day. Say what each figure assumes and label every number as an estimate I should check.

Have Claude build the itinerary

Ask for one page with five views, like the reel: the route drawing on with the distance counting up, pins popping in, a card per day with the map zooming to each stop, a budget card with bars, and a fly-through.

The reel's map is a clean, stylised drawing of your sketch, not a real map. That keeps it simple and works offline. If you downloaded the skill, Claude starts from its template.

Build my itinerary as one self-contained HTML page at 9:16 (573 x 1019 px) with five views I can step through: 1) a stylised map (sea, land shaped like my sketch, a few roads) with the route drawing itself on and a card counting up the total km and days, 2) pins with emoji labels popping in one by one, 3) day cards at the bottom while the map zooms to each stop, 4) a budget card with the total counting up and a bar per item, 5) a fly-through. Label distances and the budget as estimates. Add a key to hide the buttons so I can screen-record it.

Add the 3D fly-through

The fly-through is the flat map tilted back in 3D with CSS, while the camera slides along the route from stop to stop and the pins stand up off the map. It is the same drawing, not a 3D model of the terrain.

In the reel the map tilts to 58 degrees in about half a second, turns slightly as it goes, and shows the name of the nearest stop at the top.

For the fly-through view: give the stage a CSS perspective of 900 px, tilt the map back to 58 degrees over the first half second, scale it 1.6x, and move it so the camera travels smoothly along the route from the first stop to the last, easing in and out. Rotate the pins back up so they stand on the map. Show the nearest stop's emoji and name at the top over a soft sky gradient.

Optional: put it on a real map

For real geography, ask for a second version on OpenStreetMap using the free Leaflet library. It loads the library and map tiles from the internet, and the lines between stops are straight, not roads.

If the map stays grey when you double-click the file, open it through a small local web server instead (in a terminal in that folder: python3 -m http.server, then open localhost:8000). OpenStreetMap's free tiles are for light use and need the attribution kept on the map.

Make a second version on a real map with Leaflet and OpenStreetMap tiles: a pin for each stop with its day and name, a dashed line between stops, the straight-line distance for each leg, the day list and the budget underneath, and a button that flies from stop to stop. Keep the OpenStreetMap attribution.

Record it

Open the page full screen, hide the buttons and screen-record it as it plays through the five views. Put your sketches beside it and you have the reel. If you code, the views port to Remotion for a frame-perfect MP4, which is how the reel was rendered.