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
+93-11Lines changed: 93 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
---
2
-
title: Map style functionalities | Microsoft Azure Maps
3
-
description: In this article, you will learn about stylerelated functionalities available in Microsoft Azure Maps web SDK.
2
+
title: Change the style of the map in Azure Maps | Microsoft Azure Maps
3
+
description: In this article, you will learn about style-related functionalities available in Microsoft Azure Maps web SDK.
4
4
author: farah-alyasari
5
5
ms.author: v-faalya
6
6
ms.date: 07/29/2019
@@ -10,31 +10,104 @@ services: azure-maps
10
10
manager: timlt
11
11
---
12
12
13
-
# Choose a map style in Azure Maps
13
+
# Change the style of the map
14
14
15
-
Many of the [supported map styles in Azure Maps](./supported-map-styles.md) are available in the Web SDK. This article shows how to use the style-related functionalities. Learn to set a style upon loading a map, and learn to set a new map style using the style picker control.
15
+
The map supports several different [style options](https://docs.microsoft.com/javascript/api/azure-maps-control/atlas.styleoptions) that can be set when the map is being initialized or later using the maps `setStyle` function. This article shows how to use these style options to customize the maps appearance. Learn to set a style upon loading a map, and learn to set a new map style using the style picker control.
16
16
17
-
## Set style on map load
17
+
## Set the style options
18
18
19
-
In the following code, the `style` option of the map is set to `grayscale_dark` on initialization.
19
+
Style options can be passed into the map when it is initialized or updated later using the maps `setStyle` function.
20
+
21
+
```javascript
22
+
//Set the style options when creating the map.
23
+
var map =newatlas.Map('map', {
24
+
renderWorldCopies:false,
25
+
showBuildingModels:true
26
+
27
+
//Additional map options.
28
+
};
29
+
30
+
//Update the style options at anytime using setStyle function.
31
+
map.setStyle({
32
+
renderWorldCopies:true,
33
+
showBuildingModels:false
34
+
});
35
+
```
36
+
37
+
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.
See the Pen <a href='https://codepen.io/azuremaps/pen/eYNMjPb'>Map style options</a> by Azure Maps
43
+
(<a href='https://codepen.io/azuremaps'>@azuremaps</a>) on <a href='https://codepen.io'>CodePen</a>.
44
+
</iframe>
45
+
46
+
## Choose a base map style
47
+
48
+
One of the most common map style options is used to change the style of the base map that is styled. Many of the [supported map styles in Azure Maps](supported-map-styles.md) are available in the Web SDK.
49
+
50
+
### Set base map style on map load
51
+
52
+
53
+
The map style can be specified when initializing the map by setting the `style` option. In the following code, the `style` option of the map is set to `grayscale_dark` on initialization.
54
+
55
+
```javascript
56
+
var map =newatlas.Map('map', {
57
+
style:'grayscale_dark',
58
+
59
+
//Additiona map options
60
+
);
61
+
```
20
62
21
63
<br/>
22
64
23
65
<iframe height='500' scrolling='no' title='Setting the style on map load' src='//codepen.io/azuremaps/embed/WKOQRq/?height=265&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/azuremaps/pen/WKOQRq/'>Setting the style on map load</a> by Azure Maps (<a href='https://codepen.io/azuremaps'>@azuremaps</a>) on <a href='https://codepen.io'>CodePen</a>.
24
66
</iframe>
25
67
26
-
## Update the style
68
+
### Update the base map style
69
+
70
+
The map style can be updated using the `setStyle` function and setting the `style` option to the desired map style.
27
71
28
-
In the following code, after a map instance is loaded, the map style is updated from `road` to `satellite` using the [setStyle](https://docs.microsoft.com/javascript/api/azure-maps-control/atlas.map?view=azure-iot-typescript-latest) function.
72
+
```javascript
73
+
map.setStyle({ style:'satellite' });
74
+
```
75
+
76
+
In the following code, after a map instance is loaded, the map style is updated from `road` to `satellite` using the [setStyle](https://docs.microsoft.com/javascript/api/azure-maps-control/atlas.map?view=azure-maps-typescript-latest#setstyle-styleoptions-) function.
29
77
30
78
<br/>
31
79
32
80
<iframe height='500' scrolling='no' title='Updating the style' src='//codepen.io/azuremaps/embed/yqXYzY/?height=265&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/azuremaps/pen/yqXYzY/'>Updating the style</a> by Azure Maps (<a href='https://codepen.io/azuremaps'>@azuremaps</a>) on <a href='https://codepen.io'>CodePen</a>.
33
81
</iframe>
34
82
35
-
## Add the style picker
83
+
### Add the style picker
84
+
85
+
The style picker control provides an easy to use button with flyout panel that can be used to by the end user to change the map style. The style picker has two different layout options. By default the style picker uses the `icons` layout and displays all the map style as a horizontal row of icons.
The second layout option is called `list` and displays a scrollable list of map styles.
92
+
93
+
<center>
94
+
95
+
</center>
96
+
36
97
37
-
The following code adds a [StyleControl](/javascript/api/azure-maps-control/atlas.control.stylecontrol) to the map, so the user can easily switch between the different map styles. Toggle the map style using the map style control near the top right corner.
98
+
The following code shows how to create an instance of the style picker control and add it to the top right corner of the map. The style picker is set to have a dark style and show a selected few map styles using the list layer.
The following code adds a style picker control with its default settings to the map, so the user can easily switch between the different map styles. Toggle the map style using the map style control near the top right corner.
38
111
39
112
<br/>
40
113
@@ -49,7 +122,16 @@ The following code adds a [StyleControl](/javascript/api/azure-maps-control/atla
49
122
To learn more about the classes and methods used in this article:
Copy file name to clipboardExpand all lines: articles/azure-maps/data-driven-style-expressions-web-sdk.md
+38Lines changed: 38 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -788,6 +788,44 @@ This layer will render the point feature as shown in the image below:
788
788
789
789
 </center>
790
790
791
+
### Image expression
792
+
793
+
An image expression can be used with the `image` and `textField` options of a symbol layer, and the `fillPattern` option of the polygon layer. This expression checks that the requested image exists in the style and will return either the resolved image name or `null`, depending on whether or not the image is currently in the style. This validation process is synchronous and requires the image to have been added to the style before requesting it in the image argument.
794
+
795
+
**Example**
796
+
797
+
The following example uses an `image` expression to add an icon inline with text in a symbol layer.
798
+
799
+
```javascript
800
+
//Load the custom image icon into the map resources.
A `zoom` expression is used to retrieve the current zoom level of the map at render time and is defined as `['zoom']`. This expression returns a number between the minimum and maximum zoom level range of the map. The Azure Maps interactive map controls for web and Android support 25 zoom levels, numbered 0 through 24. Using the `zoom` expression allows styles to be modified dynamically as the zoom level of the map is changed. The `zoom` expression may only be used with `interpolate` and `step` expressions.
Copy file name to clipboardExpand all lines: articles/azure-maps/how-to-use-spatial-io-module.md
+6-3Lines changed: 6 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -15,14 +15,17 @@ manager: philmea
15
15
16
16
The Azure Maps Web SDK provides the **Spatial IO module**, which integrates spatial data with the Azure Maps web SDK using JavaScript or TypeScript. The robust features in this module allow developers to:
17
17
18
-
-[Read and write data to common spatial files](spatial-io-read-write-spatial-data.md). Supported file formats include: KML, KMZ, GPX, GeoRSS, GML, and CSV files containing columns with spatial information.
19
-
-[Connect to Open Geospatial Consortium (OGC) services and integrate with Azure Maps web SDK. Overlay Web Mapping Services (WMS) and Web Map Tile Services (WMTS) as layers on the map.](spatial-io-add-ogc-map-layer.md).
18
+
-[Read and write data to common spatial files](spatial-io-read-write-spatial-data.md). Supported file formats include: KML, KMZ, GPX, GeoRSS, GML, and CSV files containing columns with spatial information. Also supports Well-Known Text (WKT).
19
+
-[Connect to Open Geospatial Consortium (OGC) services and integrate with Azure Maps web SDK. Overlay Web Map Services (WMS) and Web Map Tile Services (WMTS) as layers on the map.](spatial-io-add-ogc-map-layer.md).
20
20
-[Query data in a Web Feature Service (WFS)](spatial-io-connect-wfs-service.md).
21
21
-[Overlay complex data sets that contain style information and have them render automatically](spatial-io-add-simple-data-layer.md).
22
22
-[Leverage high-speed XML and delimited file reader and writer classes](spatial-io-core-operations.md).
23
23
24
24
In this guide, we'll learn how to integrate and use the Spatial IO module in a web application.
25
25
26
+
> [!WARNING]
27
+
> Only use data and services that are from a source you trust, especially if referencing it from another domain. The spatial IO module does take steps to minimize risk, however the safest approach is too not allow any danagerous data into your application to begin with.
28
+
26
29
## Prerequisites
27
30
28
31
Before you can use the Spatial IO module, you'll need to [make an Azure Maps account](https://docs.microsoft.com/azure/azure-maps/quick-demo-map-app#create-an-account-with-azure-maps) and [get the primary subscription key for your account](https://docs.microsoft.com/azure/azure-maps/quick-demo-map-app#get-the-primary-key-for-your-account).
@@ -107,7 +110,7 @@ You can load the Azure Maps spatial IO module using one of the two options:
107
110
</html>
108
111
```
109
112
110
-
2. Load the Azure Maps spatial IO module. For this exercise, use the CDN for the Azure Maps spatial IO module. Add the reference below to the the `<head>` element of your HTML file:
113
+
2. Load the Azure Maps spatial IO module. For this exercise, use the CDN for the Azure Maps spatial IO module. Add the reference below to the `<head>` element of your HTML file:
Copy file name to clipboardExpand all lines: articles/azure-maps/map-add-controls.md
+14-1Lines changed: 14 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -70,7 +70,20 @@ Below is the complete running code sample of the above functionality.
70
70
71
71
## A Map with all controls
72
72
73
-
The following code sample adds the style picker, zoom, pitch, and compass controls to the bottom-right corner of the map. Notice how they automatically stack. The order of the control objects in the script dictates the order in which they appear on the map. To change the order of the controls on the map, you can change their order in the script.
73
+
Multiple controls can be put into an array and added to the map all at once and positioned in the same area of the map to simplify development. The following adds the standard navigation controls to the map using this approach.
74
+
75
+
```javascript
76
+
map.controls.add([
77
+
newatlas.control.ZoomControl(),
78
+
newatlas.control.CompassControl(),
79
+
newatlas.control.PitchControl(),
80
+
newatlas.control.StyleControl()
81
+
], {
82
+
position:"top-right"
83
+
});
84
+
```
85
+
86
+
The following code sample adds the zoom, compass, pitch, and style picker controls to the top-right corner of the map. Notice how they automatically stack. The order of the control objects in the script dictates the order in which they appear on the map. To change the order of the controls on the map, you can change their order in the array.
@@ -65,25 +65,53 @@ Below is the complete running code sample of the functionality above:
65
65
66
66
## Change drawing rendering style
67
67
68
-
The following code gets the rendering layers from the drawing manager and modifies their options to change rendering style for drawing. In this case, points will be rendered with a blue marker icon. Lines will be red and four pixels wide. Polygons will have a green fill color and an orange outline.
68
+
The style of the shapes that are drawn can be customized by retrieving the underlying layers of the drawing manager by using the `drawingManager.getLayers()` function and then setting options on the individual layers. The drag handles that appear for coordinates when editing a shape are HTML markers. The style of the drag handles can be customized by passing HTML marker options into the `dragHandleStyle`and `secondaryDragHandleStyle` options of the drawing manager.
69
69
70
-
```Javascript
70
+
The following code gets the rendering layers from the drawing manager and modifies their options to change rendering style for drawing. In this case, points will be rendered with a blue marker icon. Lines will be red and four pixels wide. Polygons will have a green fill color and an orange outline. It then changes the styles of the drag handles to be square icons.
71
+
72
+
```javascript
73
+
//Get rendering layers of drawing manager.
71
74
var layers =drawingManager.getLayers();
72
-
layers.pointLayer.setOptions({
73
-
iconOptions: {
74
-
image:'marker-blue'
75
-
}
76
-
});
77
-
layers.lineLayer.setOptions({
78
-
strokeColor:'red',
79
-
strokeWidth:4
80
-
});
81
-
layers.polygonLayer.setOptions({
82
-
fillColor:'green'
83
-
});
84
-
layers.polygonOutlineLayer.setOptions({
85
-
strokeColor:'orange'
86
-
});
75
+
76
+
//Change the icon rendered for points.
77
+
layers.pointLayer.setOptions({
78
+
iconOptions: {
79
+
image:'marker-blue'
80
+
}
81
+
});
82
+
83
+
//Change the color and width of lines.
84
+
layers.lineLayer.setOptions({
85
+
strokeColor:'red',
86
+
strokeWidth:4
87
+
});
88
+
89
+
//Change fill color of polygons.
90
+
layers.polygonLayer.setOptions({
91
+
fillColor:'green'
92
+
});
93
+
94
+
//Change the color of polygon outlines.
95
+
layers.polygonOutlineLayer.setOptions({
96
+
strokeColor:'orange'
97
+
});
98
+
99
+
//Update the style of the drag handles that appear when editting.
100
+
drawingManager.setOptions({
101
+
//Primary drag handle that represents coordinates in the shape.
0 commit comments