5 Ways to Create a Unique Map Experience with TomTom Maps APIs

The way your map looks and feels doesn’t just affect the visual appeal, but also the user experience. Here are five ways to customize your map using TomTom Maps APIs to stand out from the crowd, and keep your customers and clients happy – or just have some fun and level up your next project!

The way your map looks and feels doesn’t just affect the visual appeal, but also the user experience. An unfamiliar or confusing map experience can make it difficult for on-demand users to engage with the application properly. To set users up for success instead, here are five ways to customize your map using TomTom Maps APIs to stand out from the crowd, and keep your customers and clients happy – or just have some fun and level up your next project!

Select a Style

The first step in customizing your map is selecting a style. The TomTom Map Styler offers 21 different map styles to start building with. The different styles consist of a variety of combinations of what you’d like to display, depending on what’s most important for you, your client, and/or your end-user. These customizations include light or night mode, and different combinations of labels, POIs (points of interest), traffic flow, and traffic incidents.

You might select a basic style without traffic or POIs if you are simply displaying a map on your website or making a creative project. Maybe you’re building the next best on-demand application, then accurate traffic information is going to be a necessity for your map, while if your app or project focuses more on showcasing places, POIs will be a focus area.

Once you’ve selected your map style, you can download the JSON style to your computer and use it in your mapping projects. Using the SDK for Web v6, you can display your map easily with just a few lines of code. You can learn more here:

Customize the Colors

Great! Now that you’ve got your map style, it’s time to customize it by changing the colors of the palette. You can update the colors of each layer by using the paint property in the Map Styler. You can tailor the colors of your map to the brand guidelines of your clients, or to suit the need of a specific project.

Something important to note is that you’ll only want to change the colors of these layer types:

• Lines – For the roads and streets

• Fills – For open areas such as parks

• Fill-extrusions – For buildings

These layers represent the bulk of the map, giving you some of the maximum impact from potential style changes among the most common elements.

Or if you want to implement visual changes on an even larger scale, then the colors inside the layers named “Earth Cover” will change the map dramatically by changing ‘soil, vegetation, sand, cropland and ice’ colors, more dramatically altering the landscape of your new map.

We also have to check which color is declared, and convert it accordingly (RGB, RGBA, or hex values). It won’t be necessary to change the opacity of lines and fills, but the fill-extrusions for the buildings must be fully opaque, or the map will look strange at higher zoom levels.

Once the map is loaded, you can iterate over the style layers to get the colors. You can learn more by watching this video.

Colormine.org is a helpful tool that contains a collection of delta-e calculators and color converters, while A Simple Web Developer’s Color Guide is a useful yet simple color workflow that may help you on your next project.

Pick your POIs & Photos

Going somewhere new always starts with a search, and POIs hold the key to unlocking a seamless experience for your end-users.

The easiest way to start utilizing TomTom’s extensive POI data is with the Fuzzy Search API. This API allows you to find places and basic information, like names, addresses, and POI locations. All you need to do is make an HTTP web request with parameters passed in via a query string, along with your TomTom API key. You can even just put the link into your web browser to test it. You can try it here.

Depending on your app, project, or use case, certain POIs may be more relevant to display than others. You can learn more about POIs and search in this article: Understanding Places and POI APIs.

Modify your Map Markers

To add a popup to a marker, use the setPopup function – this means, whenever you click a marker, a popup will appear. The popup is really nothing more than an HTML element – which makes it easy to style them.

For example, by using the add className function, which receives the CSS class name, you can change style the popup display.

To learn more, check out this quick hints and tips video tutorial with dev advocate Olivia Vahsen or this blog: Use searchMarkersManager to Add Custom Markers to a Map.

From aliens to pumpkins and beyond, check out a few examples of customized map markers that we’ve done here: Halloween Fun with TomTom's Map Styler.

Add Some Weather!

The last element in this article to create a custom mapping experience is adding some live weather info. This information can be useful to drivers in order to plan routes more carefully and safely and could also be useful to end-users planning activities.

Using the OpenWeatherMap API, you can get live weather maps and textual descriptions for a location and then overlay OpenWeatherMap’s maps onto TomTom’s maps. This article goes over how to add live weather, step by step: Adding OpenWeatherMap’s Current Weather to TomTom Maps or our video tutorial below:

Next Steps

And there you have it! Five ways to customize your map to suit your or your end-users’ needs. Which aspect is your favorite?

Also, we’d love to see your customized maps! Feel free to share your project in our Developer Forum or reach out if you have any questions.

Happy mapping!