Custom styles for your embedded travel map

Community Highlights Travellerspoint Custom styles for your embedded travel map

One of the most popular uses of Travellerspoint's trip mapping tool is to embed these maps in blog entries and on third-party websites.

Recently, as part of a complete overhaul of the travel mapping system, I added a new ability to have more control over what the map looks like when you embed it.

My map using the voyager style

The default map style uses a grey base map. The grey style works well for general purposes because it allows the coloured lines and stop markers to stand out nicely. Sometimes however, people prefer something a bit different and it made sense to open up the possibility to use other tiles when you are embedding your map on your own site.

Let me walk you through how to go about using these new map styles in your blog. Do note though that you need to be a Travellerspoint Supporting Member to take advantage of these extra customisation options. There is extra cost involved in loading these different base maps and this helps cover that.

How to use custom map styles your blog

1. Click on the embed link when viewing your trips to get started.

If your blog is not on Travellerspoint, skip to step 5

2. If your blog is on Travellerspoint, look through the styles provided to decide which one you like best. At the time of writing there are 8 options to choose from. Click on the one you like to select it.

3. Save your choice. This will apply to all maps in your Travellerspoint blogs (including ones that you already embedded previously)

4. Now you can embed maps as normal from inside your blog using the globe icon in your blog entry toolbar.

Below only applies if your blog is not on Travellerspoint

5. If your blog isn't on Travellerspoint, click on the External Website tab

6. Look through the styles provided (8 at the time of writing) and pick the one you like. You can also set the size of your embed and choose which trip to show if you only want to show a single trip. You can also exclude the Travellerspoint guide content from showing in your embedded map if you like.

7. Click the Generate Embed Code button

8. Copy the generated code. You can paste this into your website or blog. Do note that some blog platforms (notably Wordpress.com) do not allow embed codes like this and unfortunately it won't work there. If you have a self-hosted version of Wordpress though this will work just fine.

And that's how to go about embedding your travel map with its own custom styles!

If you have any further questions about the mapping, feel free to ask away in our System Talk forum