Change the style of the map

Article
12/07/2021
3 minutes to read

The map control supports several different map style options and base map styles. All styles can be set when the map control is being initialized. Or, you can set styles by using the map control's setStyle function. This article shows you how to use these style options to customize the map's appearance. Also, you'll learn how to implement the style picker control in your map. The style picker control allows the user to toggle between different base styles.

Set map style options

Style options can be set during web control initialization. Or, you can update style options by calling the map control's setStyle function. To see all of the available style options, see style options.

//Set the style options when creating the map.
var map = new atlas.Map('map', {
    renderWorldCopies: false,
    showBuildingModels: false,
    showLogo: true,
    showFeedbackLink: true,
    style: 'road'

    //Additional map options.
};

//Update the style options at anytime using `setStyle` function.
map.setStyle({
    renderWorldCopies: true,
    showBuildingModels: true,
    showLogo: false,
    showFeedbackLink: false
});

The following tool shows how the different style options change how the map is rendered. To see the 3D buildings, zoom in close to a major city.

Set a base map style

You can also initialize the map control with one of the base map styles that are available in the Web SDK. You can then use the setStyle function to update the base style with a different map style.

Set a base map style on initialization

Base styles of the map control can be set during initialization. In the following code, the style option of the map control is set to the grayscale_dark base map style.

var map = new atlas.Map('map', {
    style: 'grayscale_dark',

    //Additional map options
);

Update the base map style

The base map style can be updated by using the setStyle function and setting the style option to either change to a different base map style or add additional style options.

map.setStyle({ style: 'satellite' });

In the following code, after a map instance is loaded, the map style is updated from grayscale_dark to satellite using the setStyle function.

Add the style picker control

The style picker control provides an easy to use button with flyout panel that can be used by the end user to switch between base styles.

The style picker has two different layout options: icon and list. Also, the style picker allows you to choose two different style picker control style options: light and dark. In this example, the style picker uses the icon layout and displays a select list of base map styles in the form of icons. The style control picker includes the following base set of styles: ["road", "grayscale_light", "grayscale_dark", "night", "road_shaded_relief"]. For more information on style picker control options, see Style Control Options.

The image below shows the style picker control displayed in icon layout.

The image below shows the style picker control displayed in list layout.

Style picker list layout

Important

By default the style picker control lists all the styles available under the S0 pricing tier of Azure Maps. If you want to reduce the number of styles in this list, pass an array of the styles you want to appear in the list into the mapStyle option of the style picker. If you are using Gen 1 (S1) or Gen 2 pricing tier and want to show all available styles, set the mapStyles option of the style picker to "all".

The following code shows you how to override the default mapStyles base style list. In this example, we're setting the mapStyles option to list which base styles we want to be displayed by the style picker control.