Sell a travel map with several stops

The Travel Map element draws the places of a trip in order, joined by a route, on a map that frames itself. Build the route, pick the transport per leg, style the map, and let the shopper enter their own trip.

The Travel Map element draws several places in order, joined by a route. It is for journeys nobody recorded with a watch: a honeymoon, an interrail summer, the cities a couple has lived in. You supply a list of places, and the map frames itself around them.

Build the route

Add the element

Open Elements and click the Travel Map tile. It arrives with a sample trip, Amsterdam to Barcelona to Rome, so you can see the style before you enter your own stops.

DashboardA travel map on the canvas with the Travel Map settings panel open on the Edit tab, listing three numbered stops with a transport choice between each pair and a search field to add another
A new travel map, with its sample trip.

Enter the stops in order

Under Stops, search for a city, a country or an island and pick it. The order in the list is the order of the journey, and the map re-frames itself as you edit.

Click a stop’s name to rename it. Use Move stop up and Move stop down to fix the order, and Remove stop to drop one.

Pick how each leg was travelled

Between two stops, choose Plane, Train, Car or Boat. Flights follow the line you set under Route in the Look section, a curve by default. Train, car and boat legs run straight.

If the whole trip used one kind of transport, turn off Transport per leg under Route and pick a single Icon for the route instead.

Add a title, if you want one

Under Linked text, click Add and choose Title under the map. It puts the trip’s name and its route in text under the map. The name is a field of its own, so the shopper types their trip’s name there, and the route line follows the stops.

Style the map

The Look section on the Design tab holds everything about how the map looks. Where the map is framed sits under View, in Content.

  • The look gallery offers five looks: Silhouette, Line drawing, Dots, Night and Delft blue. Picking one starts from that look’s own colours.
  • Fit, under View, is Auto by default: it zooms in on a region, or switches to a world map when the trip spans continents. You can also force Region, World or Globe. To frame it by hand, click Adjust or double-click the map on the canvas, then drag and zoom it; the bar’s Fit goes back to the automatic view, and Done finishes.
  • Route sets the Line (Curve, True route or Straight), how far a curve bends, and the Pattern: Solid, Dashed or Dotted. A dashed curve is the classic travel-poster look. Its switches also turn Place names, Numbered stops and Transport icons on or off.
  • Map colors sets the Background, Land, Route, Stops, Place names and Visited countries on top of the look. Reset goes back to the look’s own.
  • More holds the visited countries. It can Color visited countries, or Show only visited countries for a trip within one or a few countries. With only the visited countries on, Close together pulls them together with an even gap, which you set with Space between countries. Distances between countries are then no longer to scale.

The map is drawn from country shapes, not from street tiles, so it reads best at the scale of countries and cities. For one place in street detail, use City Map.

Let the shopper plan their own trip

DashboardThe Personalization tab of the Travel Map panel: the switch that lets customers personalize it, the customer guidance fields, switches for whether the customer can add, reorder and rename stops, start with an empty route and choose the transport, and the top of the Style field section
Editing the stops is the switch that turns this into a travel product.

Under What customers can change on the Personalize tab:

  • Stops is the important one. It lets the shopper add, reorder and rename stops, with the same place search you used.
  • Start empty, which appears while Stops is on, keeps your stops as an example on the design until the shopper enters their first stop. From then on only the shopper’s stops count.
  • Transport lets them pick how each leg was travelled.

The look is a separate customizer field, so a guided customizer can put it in a step of its own. Its switches sit under Style field:

  • Look lets them pick a style, from the ones you tick under Looks they can pick.
  • Line: curved or straight, solid, dashed or dotted.
  • Icons on or off lets them show or hide the transport icons.

Captions that list the journey

Linked text on a travel map, under Content on the Design tab, reads the route itself: the trip’s name, the first and last stop, every stop in order, the number of stops and the distance. A caption reading “Amsterdam to Rome, 3 stops” writes itself and follows the shopper’s edits. See Auto-filling captions from an element.

Next

For one place rather than several, use City Map. For a journey that was actually recorded, use Route Map.

Related articles