Tutorials / Create a Personalized Map Style using the HERE Map Style Editor
Last Updated: October 20, 2020

Introduction

Would you like to create amazing Maps for your next project? Then you’re in the right place. Checkout HERE Map Style editor, by using this tool you can Customize colors, roads, labels, and much more in your HERE Map. It has the simplest interface and intuitive WYSIWYG editor to style your HERE Map. This tool is useful to style HERE Maps for the Web, Android and iOS Maps applications. This tool is based on the YAML(Learn about YAML files from this link) language which you will use to style your HERE Map. Check out the HERE Map Style editor from this link

dark-map

Pre-Reqs.

  • General Knowledge about YAML

Getting Started with Map Style Editor

To get started, navigate to the Map Style Editor. It will look like the following:

editor.png

In the image above you’ll see a map to the left and some code to the right. The code to the right is a map style for the map to the left. If you change a value in the code, the map will update automatically. Additionally, if you would like to personalize an attribute, you can right-click on it on the map. This will allow you to find the right name in the code to the right.

The code, also known as “Map Styling Rules” follows the general pattern defined by the open-source rendering engineer called Tangram. The following example defines how to render a water layer provided by the HERE Vector Tile API.

The general format of the HERE Map Style is:

Sources: (Expand to Learn More)

A mandatory section that defines the defaults of the map like zoom and angle along with the type of the map. For a complete listing of options and the types of the maps check out the HERE Maps Vector Tile documentation.

Layers: (Expand to Learn More)

This section describes about the logical layers that will help to render the data from the vector source. There are four layers to render basic map. Check out more on how to use these layers in yaml files from this link. Below is the example:

sources:
    omv:
        type: OMV
        max_zoom: 17
        min_display_zoom: 1
layers:
    water_areas:
        data: {source: omv, layer: water}
        draw:
            polygons:
                order: 1
                color: [0.055, 0.604, 0.914, 1.00]
In the above example, you can change the polygons layers with different layer names. You can change the order and color as per your requirement.
Styles: (Expand to Learn More)

This section talks about the styling of the map inherited from the default styles. The style element provides a way to extend the default style. The following example will show how to extend the lines style and create a dashed-lines custom style. In the styles section, you need to define the name of the custom style (as dashed-lines)and name of the default style (as base: lines). The draw section under the styles will describes the geometric style rendered in the map. Check out more info about the custom styles from this link. Below is the example:

sources:
    omv:
        type: OMV
        max_zoom: 17
        min_display_zoom: 1
styles:
    dashed-lines:
        base: lines
        draw:
            dash: [2, 2]
            color: [0.055, 0.604, 0.914, 1.00]
layers:
    water_areas:
        data: {source: omv, layer: water}
        draw:
            dashed-lines:
                order: 1
                width: 5px
    roads:
        data: {source: omv, layer: roads}
        draw:
            dashed-lines:
                order: 2
                width: 1px
                color: red
Scene: (Expand to Learn More)

Scene section can be used work with multiple layers for example, enable More than One Layer Together with a New Map Scene. Meaning, if you want to enable visualization for traffic incidents, traffic flows and a new map scene at the same time.

Global: (Expand to Learn More)

Holds global variables that are used across layers.

Below is a simplified sample style I have created for your reference. You can get started by copying it into the Map Style Editor.


# The sources section describes where the data for rendering comes from
# and must not be changed.
sources:
    omv:
        type: OMV
        max_zoom: 17
        min_display_zoom: 1
# the layers section contains descriptions of the rendering (logical) layers
layers:
    # user-defined name of the rendering layer
    water_areas:
        # the section defines where the rendering layer takes
        # its data from the source: omv is mandatory for the Vector Tile API
        # layer: water specifies what the vector layer is taken
        # for the rendering see the REST API documentation for the
        # list of available layers.
        data: {source: omv, layer: water}
        # section defines how to render the layer
        draw:
            # default style name, it defines the type of geometries for rendering
            polygons:
                order: 1 # z-order of the layer
                color: [0.055, 0.604, 0.914, 1.00]

The style above defines the map background color. The style named water_areas defines how to render the data from the vector tile’s water layer. You should see the map automatically update and look something like the following.

sample_style

The simplified map style defines the map scene’s background color and a style named water_areas that describes how to render the water layer on the map.

In the previous section, we used a “polygon” style to render the water sections in the map. Water is just one of the numerous things that can be personalized on the map. The default style implements all of them and should be a good starting point for your personalization of the map.

Additionally, these are the current sections for points, lines and text currently supported by HERE Maps.

  • points – Represents things at a specific point on the map. These are known as “point geometry” in the GIS world. These are things like (road signs, POI points of interest (POI’s) and many more.)
  • lines -– Represents anything defined by 2 or more points and have a line in between. These are called “line geometry” and can be (road networks, railroads, ferries routes and more.)
  • polygons -– Represent complex lines that also have a color inside the object. These cover specific geographical areas (like land use, waterways, building footprints and political boundaries.)
  • text -– Represents written text on the map. Things like labels, building numbers, and city names can be personalized.)

For more information about map features like above check out this link for a much more in-depth overview.

Inspect Mode

I mentioned above about being able to inspect a map element. Let’s say you wanted to personalize the Font of the cities on your map. First, you will need to enable the “Inspect Mode” by clicking on the “eye button” (see the image below).

Next, select the text “Berlin” and you will see a box with details about the text pop up (like in the image below).

inspect button

This will be helpful to style a specific element on the map. When you hover over a map element, it will display the name. When you click on any place it will show the information about the place or area.

You can then personalize the font of the text by searching for the property name “country_capital” in the editor. There you will see a whole list of things you can personalize. Scroll down just a bit and you will see “font”, there you can start to change things.

Default Styles

Now that you have personalized a property of the map, let’s talk about what you get out of the box with the “Default Styles” that come with the HERE Map Style Editor.

There are two Default Styles available out of the box, Minimal and Default. To access these styles navigate to the top left of the Map Style Editor click on the “File->Open” option and you will see the default styles.

Warning: When you select a style, it will overwrite your current style in the map editor.

We recommend that you start your personalization with one of the default styles because you will be given examples of styling for all map elements found in the HERE Maps.

You can select any one of them from the menu as shown below:

select_minimal_style_to_getstarted

Upload Style file

Let’s say you have created a map style or were given a map style by your designer; you have two options to upload it to the editor.

  • Local file upload – This will allow you to upload it from your computer.
  • Remote file URL upload – This will allow you to view a live map style hosted on a web server somewhere.

To open a hosted map style, go to “File->Open->From URL” From the screenshot below, select From Local file or From URL based on your preference.

loadstyle_from_remote_url.png

Download Style

Once you’re satisfied with the preview of the map, you can download the style by going to “File ->Download”. This will create a YAML file and download it to your computer. You can then insert this style into your application or website. Please note that the Map Style Editor does not store your file in the cloud. If you navigate away from the site, your file will be deleted.

download_style

Bookmarks

Even though the Map Style Editor does not save your styles, you can create a bookmark to be able to revisit it in the future. This essentially creates a bookmark with the style contained within and then the map style editor will load the style from your bookmark.

bookmarks

Conclusion

After going through this tutorial, you should have a fundamental understanding of what the HERE Map Style Editor can do for you, how to personalize your maps and how to work with the files within the Map Style Editor. If you have questions or want to learn more about the Map Styles from HERE, be sure to check out our Map Personalization documentation.

Next Steps

Check out our other tutorials