You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: articles/azure-maps/choose-map-style.md
+30-17Lines changed: 30 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -11,11 +11,11 @@ ms.custom: devx-track-js
11
11
12
12
# Change the style of the map
13
13
14
-
The map control supports several different map [style options](/javascript/api/azure-maps-control/atlas.styleoptions) and [base map styles](supported-map-styles.md). 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.
14
+
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 and how to implement the style picker control in your map. The style picker control allows the user to toggle between different base styles.
15
15
16
16
## Set map style options
17
17
18
-
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 available style options, see [style options](/javascript/api/azure-maps-control/atlas.styleoptions).
18
+
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 available style options, see [style options].
19
19
20
20
```javascript
21
21
//Set the style options when creating the map.
@@ -49,11 +49,11 @@ The following tool shows how the different style options change how the map is r
49
49
50
50
## Set a base map style
51
51
52
-
You can also initialize the map control with one of the [base map styles](supported-map-styles.md) that are available in the Web SDK. You can then use the `setStyle` function to update the base style with a different map style.
52
+
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.
53
53
54
54
### Set a base map style on initialization
55
55
56
-
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](supported-map-styles.md#grayscale_dark).
56
+
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].
57
57
58
58
```javascript
59
59
var map =newatlas.Map('map', {
@@ -70,13 +70,13 @@ var map = new atlas.Map('map', {
70
70
71
71
### Update the base map style
72
72
73
-
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.
73
+
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 more style options.
74
74
75
75
```javascript
76
76
map.setStyle({ style:'satellite' });
77
77
```
78
78
79
-
In the following code, after a map instance is loaded, the map style is updated from `grayscale_dark` to `satellite` using the [setStyle](/javascript/api/azure-maps-control/atlas.map#setstyle-styleoptions-) function.
79
+
In the following code, after a map instance is loaded, the map style is updated from `grayscale_dark` to `satellite` using the [setStyle] function.
80
80
81
81
<br/>
82
82
@@ -87,20 +87,20 @@ In the following code, after a map instance is loaded, the map style is updated
87
87
88
88
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.
89
89
90
-
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](/javascript/api/azure-maps-control/atlas.stylecontroloptions).
90
+
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].
91
91
92
-
The image below shows the style picker control displayed in `icon` layout.
92
+
The following image shows the style picker control displayed in `icon` layout.
The image below shows the style picker control displayed in `list` layout.
96
+
The following image shows the style picker control displayed in `list` layout.
97
97
98
98
:::image type="content" source="./media/choose-map-style/style-picker-list-layout.png" alt-text="Style picker list layout":::
99
99
100
100
> [!IMPORTANT]
101
101
> 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"`.
102
102
103
-
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.
103
+
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 the base styles to display in the style picker control.
104
104
105
105
<br/>
106
106
@@ -112,24 +112,37 @@ The following code shows you how to override the default `mapStyles` base style
112
112
To learn more about the classes and methods used in this article:
0 commit comments