Celebrating Earth Day with the New Look & Feel of our Map Display API

The TomTom Map Display API got a little update! The new map style includes changes like, brand-new colors, natural features, organized POIs and improved street labels. Learn more about this update & how it changes your map.

The beauty of mapping is often capturing the many nuances of the Earth’s surface – these nuances allow us to see the globe more clearly, and allow us to be mobile and explore. Without maps over the ages, our exploration and innovations in travel and transport would not be possible. This Earth Day, it’s right to acknowledge the many changes which affect our one and only home – climate, infrastructure, natural events, and numerous others – by releasing an update to the visual component of our maps.

Beginning in May, our Map Display API will show from vast forest areas to deserts, from snowy mountains to ice caps. This information will be available globally, enhancing the visualization of these natural areas everywhere.

These changes focus on four main elements to keep our maps readable, relevant, and refreshed as our users’ mapping needs evolve over time: natural features, city & street labels, a new color scheme, and more organized points of interest (POIs). Read on to learn more about the major changes, and what that means to you as a developer.

Natural Features

Shown in the slider above, and most relevant to Earth Day, is the revamp of natural features in our maps! Topography has a special, necessary place in the mapping world, as transportation almost always revolves around creating the best or fastest routes through various environments, such as dense forests in contrast with urban city centers.

For example, when looking at a map of the Bay Area, you can now more easily distinguish where denser areas of brush might be, as opposed to cities and towns where development has taken place, creating a more accurate and intuitive picture for viewers to get a “lay of the land”. By contrast, urban areas with more development have fewer indications of brush, unless interrupted by more open areas.

City and Street Labels

Especially when examining a map for cross-streets, detailed neighborhoods can crowd the map and make it harder to scan for important locations. We’ve dressed-down our new map look accordingly by minimizing smaller area names, and giving more distinction to more important labels, such as cities and larger metro regions.

Notice in the map above, as the main city center of focus, San Jose has the largest font and greatest font weight, followed by smaller cities of Santa Clara, Los Gatos and Campbell, while neighborhoods appear more faded – such as Rose Glen and Hyde Park.

Color Changes

Hand in hand with this change in labeling comes the coloration of roads in order of size – to make freeways and major roads easily locatable with a quick glance. While our old map used dark orange, lighter orange, and white in that order to denote interstates, other freeways, and streets, many different gradients were intermixed to mark more exact street priority. This has been removed, and the result is a more linear yellow-to-white progression which allows the eye to focus more on street names and points of interest (POIs).

In addition to our big color change with roads and road levels, we’ve made subtle changes to our maps’ overall color scheme to modernize the palette and remove as much greyscale as possible. Colors should look brighter, more approachable, and enhance the minimalism we’ve sought to implement with our update.

The new color scheme is what our users are most familiar with from within the industry’s current standards, with the idea of making our maps easy to glance at and more visually accessible to new users as well.

More Organized POIs

Additionally, we’ve sorted POIs to focus on the most relevant businesses, removing the overall quantity of place markings you see on the map. This gives a less jumbled effect, and allows you to naturally interact with the map and increase zoom once focused on a specific area to maximize relevant places you might be looking for. This means that when zoomed out, less places will be in view to allow you to see intersections and other major landmarks more clearly.

Zooming into the map further will now show more area-targeted and relevant POIs to help support your visual searching, so that you can orient yourself more quickly within the area.

We hope that the new look and feel of the map will delight developers and new application users. The hard work of our UX and product teams has only started, and we will continue improving the style behind the scenes!

How Can I use these Updates?

The Map Display changes will go live for vector tiles after May 12th, but will not be universally automatic. Current customers will need to intentionally update their vector map tiles for the style to take effect.

Raster tiles and the reflection of the new styles in the Maps SDK will be both visible after May 12th. Changes to raster tiles will take place automatically – no update required to check out these changes! New users will be able to start seeing these changes immediately, and existing users and customers using the raster tiles, or raster riles within the SDK will see these changes reflected instantly as well.

Documentation will be updated in line with rollout dates for both the Vector content page and the Raster tile page.

Natural Features: New customizable layers within the Map Styler

To facilitate the style changes in Map Display API, we are introducing a new layer in our Map Styler. The new layer will allow users to style natural features on different zoom levels—this new feature is called Earth cover.

Earth cover will exist as one single layer option within the Map Styler, but will have 5 subcategories:

• Woody vegetation

• Cropland

• Herbaceous vegetation

• Sand

• Ice and snow

These can all be customized similarly to other layers within the paint properties of the Map Styler, to further customize color scheme and other settings for individual map needs.

Earth cover allows for further modifications to layer representation at different zoom levels, represented below. This means that you can edit Earth cover’s appearance at levels 0-4, then 4-9, and at 9-22, as indicated on the left-hand sidebar in the images below. Here, you can also see how Earth cover adapts to these different zoom levels, the first being at zoom level 6, and the second at level 9.

For those wanting to opt into the natural features update, no style changes for vector maps will take place until Earth cover visibility is toggled on within style code. Until then, the latest style will be used. Earth cover can also be toggled on directly in CSS, as seen below.

"id": "Earth cover 0-4",
      "type": "fill",
      "source": "vectorTiles",
      "source-layer": "Earth Cover",
      "minzoom": 0,
      "maxzoom": 4,
      "layout": {"visibility": "visible"},
      "paint": {
        "fill-antialias": false,
        "fill-opacity": {"stops": [[3.5, 1], [4, 0.5]]},
        "fill-color": {
          "property": "category",
          "stops": [
            ["woody vegetation", "rgba(195, 224, 192, 1)"],
            ["cropland", "rgba(212, 235, 186, 1)"],
            ["herbaceous vegetation", "rgba(190, 226, 189, 1)"],
            ["sand", "rgba(248, 239, 189, 1)"],
            ["ice and snow", "rgba(245, 255, 255, 1)"],
          ],
          "type": "categorical"

Improving map’s visual experience for your users

We hope the style changes coming to the Map Display API & SDK lend more clarity to your users’ maps than before, creating a more engaging, lightweight experience. Both visual change rollouts allow freedom to customize and work together: while you might see the API’s changes come into effect with reduced POI clutter and new road color schema, you can still customize the 9 components of Earth cover within the Map Styler, and export your changes into your application.

Starting after May 12th, 2021, you can explore the new and improved Map Display API, and start customizing with Map Styler to get a feel for these exciting style changes!

In the meantime, check out our Map Display API documentation to learn more about Vector and Raster tiles.

Happy mapping!