Create your application map using TomTom Map Maker.

Stanislaw Puda

I’m a software engineer with passion for programming, especially in JavaScript. Proud Map Maker contributor. I love walking through the beautiful streets of my new home city Amsterdam. I like traveling and my unique hobby is collecting vintage pocket size computers.

Oct 12, 2023 · 5 min read

Create your application map using TomTom Map Maker.

Are you looking for a personalized map experience in your application? Try TomTom Map Maker — a cloud tool to help you create and customize maps that reflect your brand.

Getting Started

Creating a map with TomTom Map Maker is simple. Visit the TomTom MapMaker and log in with your TomTom Developer Portal account. Don't have an account yet? No problem, you can register using the link on the Map Maker page.

Start by choosing from templates optimized for various use cases, like browsing or driving. Templates form the base for your project. They contain all the necessary information that should appear on the map. MapMaker Templates

In the next step you can add additional map modules. Select traffic information if you plan to use the map for car navigation.

Map it in Style

Once you open the style, you will find a sidebar with three tabs:

Start with changing base colors of the map in Foundations. Map Colors are categorized by easily recognizable types, like ‘Water’, ‘Vegetation’ or ‘Road’. For every change you make, TomTom Map Maker will automatically adjust the shades of different features to keep the color scheme of your map consistent.

Modules gives you fine-grained control of the map. Each module is responsible for different category of map entities, with its own specific properties. Below you can find few examples of modules and some of the options that can be adjusted:

- Roads: width of different types of roads,

- POI: size of markers and corresponding text,

- Landuse: colors of different types of areas like shopping, parking, healthcare.

Making changes to Layers is the most advanced way of editing a map. We encourage you to first try both Foundations and Modules. Read our documentation before editing layers.

Here are some examples of what you can do with Map Maker to spark your imagination:

An ancient book: Imagine you need a map that resembles an old book with soft colors. Begin with the ‘Street Driving Light’ template. The video below shows how to do it in just a few steps.

An orange world: Maybe you want to create a map that uses one color throughout — orange, for example. You can do this using the ‘Monochrome Dark’ template. Once you set the ‘Land’ (base) color to orange, you’re all set. What do you think of the result?

Master the map

Let’s now combine what we’ve learned about Map Maker and styling a map in a one quick project. I would like to show all road network of Amsterdam, but at the same time stand out parks, urbanization areas and health institutions. See the short video below, how to do it.

I start with light monochrome theme. In Foundations tab I change main color for a little darker and blueish. Then I move to Modules tab. In Landuse module I mark selected types of areas with vibrant colors, to make them stand out on the map. Finally, in Roads module I increase width of major roads. That’s it! How do you like the result?

Share it with the world

You’ve now created and styled your map. Wondering how to add it to your app? TomTom stores all your styles on the cloud. Generate a URL of your style in Map Maker and copy it to your TomTom Maps SDK or MapLibre application.

Click on the ‘Share’ button and the window will show up. You can choose from two tabs: Draft and Production. Use the ‘Draft’ tab if you want to share the style for feedback or review. Choose the ‘Production’ tab to publish the style in your production app.

If you need an easy way to send a map preview to someone else, see the “Preview URL” section. You can open the URL in your browser or send it to someone else to preview the map.

Here’s a very minimal application using MapLibre GL JS:

<html>
  <body>
    <div id='map' style="width: 100%; height: 100%;"></div>
    <link rel='stylesheet' 
      href='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css'/>
    <script 
      src="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js">
    </script>
    <script>
      const map = new maplibregl.Map({
        container: 'map',
        style: '<your style URL>',
      });
    </script>
  </body>
</html>

To update a style you’ve already shared via the ‘Production’ tab, you need to publish it. You can do this by clicking the ‘Publish’ button in the application toolbar. The updated map will seamlessly reflect onto your user devices within minutes.

Map it your way

Map Maker gives you endless opportunities to experiment with different colors and versions of your map until you find the right one. Enjoy the beauty of this very technical visualization of traffic in Amsterdam.

Ready to create maps unique to your brand? Try Map Maker today at mapmaker.tomtom.com.

Have more questions? Find answers in our documentation

APIs & SDKs

Developers

Support

Legal