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/how-to-use-spatial-io-module.md
+23-28Lines changed: 23 additions & 28 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,49 +10,44 @@ ms.service: azure-maps
10
10
ms.subservice: web-sdk
11
11
---
12
12
13
-
# How to use the Azure Maps Spatial IO module
13
+
# Use the Azure Maps Spatial IO module
14
14
15
-
The Azure Maps [Spatial IO module] integrates spatial data with the Azure Maps Web SDK using JavaScript or TypeScript. This guide demonstrates how to integrate and use the Spatial IO module in a web application.
15
+
The Azure Maps [Spatial IO module] integrates spatial data with the Azure Maps Web SDK by using JavaScript or TypeScript. This guide demonstrates how to integrate and use the Spatial IO module in a web application.
16
16
17
17
You can use the robust features in this module to:
18
18
19
-
-[Read and write spatial data].
19
+
-[Read and write spatial data]. You can use file formats that include:
- Comma-Separated Values (CSV) when columns include spatial information.
20
28
- Connect to Open Geospatial Consortium (OGC) services and integrate with the Azure Maps Web SDK. You can also overlay Web Map Services (WMS) and Web Map Tile Services (WMTS) as layers on the map. For more information, see [Add a map layer from the Open Geospatial Consortium (OGC)].
21
29
- Query data in a Web Feature Service (WFS). For more information, see [Connect to a WFS service].
22
30
- Overlay complex data sets that contain style information, which can render automatically. For more information, see [Add a simple data layer].
23
-
- Use high-speed Extensible Markup Language (XML) and delimited file reader and writer classes. For more information, see [Core IO operations].
31
+
- Use high-speed XML and delimited file reader and writer classes. For more information, see [Core IO operations].
24
32
25
33
The following video provides an overview of the Spatial IO module in the Azure Maps Web SDK.
> Only use data and services that are from a source you trust, especially if the data is referenced from another domain. The spatial IO module takes steps to minimize risk, but you should not allow any dangerous data into your application regardless.
39
+
> Use data and services only from a source that you trust, especially if the data is referenced from another domain. The Spatial IO module takes steps to minimize risk, but you should not allow any dangerous data into your application regardless.
- Comma-Separated Values (CSV) when columns include spatial information.
45
-
46
-
Prerequisites include:
47
-
48
-
- An [Azure Maps account].
49
-
- A [subscription key].
43
+
- An [Azure Maps account]
44
+
- A [subscription key]
50
45
51
46
## Install the Spatial IO module
52
47
53
48
You can load the Azure Maps Spatial IO module by using one of the following two options:
54
49
55
-
- You can use the globally hosted Azure Content Delivery Network (CDN) for the Azure Maps Spatial IO module. For this option, add a reference to the JavaScript in the `<head>` element of the HTML file.
50
+
- You can use the globally hosted Azure content delivery network for the Azure Maps Spatial IO module. For this option, add a reference to the JavaScript in the `<head>` element of the HTML file.
@@ -72,7 +67,7 @@ You can load the Azure Maps Spatial IO module by using one of the following two
72
67
73
68
To learn more, see [How to use the Azure Maps map control npm package].
74
69
75
-
## Use the Spatial IO module
70
+
## Implement the Spatial IO module
76
71
77
72
1. Create a new HTML file.
78
73
@@ -130,20 +125,20 @@ You can load the Azure Maps Spatial IO module by using one of the following two
130
125
</html>
131
126
```
132
127
133
-
1. Load the Azure Maps Spatial IO module and use the CDN for the Azure Maps Spatial IO module. Add the following reference to the `<head>` element of your HTML file:
128
+
1. Load the Azure Maps Spatial IO module and use the content delivery network for the Azure Maps Spatial IO module. Add the following reference to the `<head>` element of your HTML file:
1. Initialize a `datasource`, and add the data source to the map. Initialize a `layer`, and add the data source to the map layer. Then, render both the data source and the layer.
134
+
1. Initialize a data source, and add the data source to the map. Initialize a layer, and add the data source to the map layer. Then, render both the data source and the layer.
140
135
1. Before you scroll down to see the full code in the next step, determine the best places to put the data source and layer code snippets. Wait until the map resources are ready before you programmatically manipulate the map.
141
136
142
137
```javascript
143
138
var datasource, layer;
144
139
```
145
140
146
-
and
141
+
Find the best places to put the code snippets.
147
142
148
143
```javascript
149
144
//Create a data source and add it to the map.
@@ -232,13 +227,13 @@ You can load the Azure Maps Spatial IO module by using one of the following two
232
227
</html>
233
228
```
234
229
235
-
1. Remember to replace your Azure Maps key with your subscription key. Your HTML file should include an image that looks like this.
230
+
1. Remember to replace your Azure Maps key with your subscription key. Your HTML file should include an image that looks like this:
236
231
237
232
:::image type="content" source="./media/how-to-use-spatial-io-module/spatial-data-example.png" lightbox="./media/how-to-use-spatial-io-module/spatial-data-example.png" alt-text="Screenshot showing the Spatial Data sample in a map.":::
238
233
239
234
## Related content
240
235
241
-
There are many features available in the Spatial IO module. To learn about other functionalities, read the following guides:
236
+
This article describes only one of the many features available in the Spatial IO module. To learn about others, read the following guides:
Copy file name to clipboardExpand all lines: articles/azure-maps/spatial-io-add-simple-data-layer.md
+24-24Lines changed: 24 additions & 24 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,7 +1,7 @@
1
1
---
2
2
title: Add a Simple Data Layer
3
3
titleSuffix: Microsoft Azure Maps
4
-
description: Learn how to add a simple data layer by using the Spatial IO module provided by the Azure Maps Web SDK.
4
+
description: Learn how to add a simple data layer by using the Spatial IO module in the Azure Maps Web SDK.
5
5
author: sinnypan
6
6
ms.author: sipa
7
7
ms.date: 06/19/2023
@@ -13,17 +13,17 @@ ms.subservice: web-sdk
13
13
14
14
# Add a simple data layer
15
15
16
-
The Azure Maps Web SDK provides a Spatial IO module which includes a `SimpleDataLayer` class. This class makes it easy to render styled features on a map. It can even render data sets that have style properties and data sets that contain mixed geometry types.
16
+
The Azure Maps Web SDK provides a Spatial IO module that includes a `SimpleDataLayer` class. This class makes it easy to render styled features on a map. It can even render data sets that have style properties and data sets that contain mixed geometry types.
17
17
18
-
The simple data layer achieves this functionality by wrapping multiple rendering layers and by using style expressions. The style expressions search wrapped layers for common style properties. The `atlas.io.read` and `atlas.io.write` functions use these properties to read and write styles into a supported file format. When properties are added to a supported file format, the file can be used for purposes like displaying styled features on a map.
18
+
The simple data layer achieves this functionality by wrapping multiple rendering layers and by using style expressions. The style expressions search wrapped layers for common style properties. The `atlas.io.read` and `atlas.io.write` functions use these properties to read and write styles into a supported file format. When you add properties to a supported file format, you can use the file for purposes like displaying styled features on a map.
19
19
20
-
The `SimpleDataLayer` class also provides a built-in popup feature with a popup template (which can be disabled if not needed). The popup appears when a feature is selected. This layer also supports clustered data. When a cluster is selected, the map zooms in to the cluster and expands it into individual points and subclusters.
20
+
The `SimpleDataLayer` class also provides a built-in popup feature with a popup template. The popup appears when a feature is selected. This layer also supports clustered data. When a cluster is selected, the map zooms in to the cluster and expands it into individual points and subclusters. You can disable the popup feature if you don't need it.
21
21
22
-
The `SimpleDataLayer` class is intended to be used on large data sets that include features with many applied geometry types and styles. When used, this classadds an overhead of six layers containing style expressions. Therefore, if you only need to render a few geometry types and styles on a feature, it might be more efficient to use a core rendering layer.
22
+
The `SimpleDataLayer` class is intended to be used on large data sets that include features with many applied geometry types and styles. When you use this class, it adds an overhead of six layers that contain style expressions. If you only need to render a few geometry types and styles on a feature, it might be more efficient to use a core rendering layer.
23
23
24
24
## Use a simple data layer
25
25
26
-
The `SimpleDataLayer` class is used like the other rendering layers. The following code shows how to use a simple data layer in a map:
26
+
You can use the `SimpleDataLayer` class like the other rendering layers. The following code shows how to use a simple data layer in a map:
27
27
28
28
```javascript
29
29
//Create a data source and add it to the map.
@@ -35,7 +35,7 @@ var layer = new atlas.layer.SimpleDataLayer(datasource);
35
35
map.layers.add(layer);
36
36
```
37
37
38
-
The following code snippet demonstrates how to use a simple data layer that references data from an online source.
38
+
The following code snippet demonstrates how to use a simple data layer that references data from an online source:
@@ -113,13 +113,13 @@ The sample code renders the point feature by using the simple data layer, and th
113
113
> [!NOTE]
114
114
> The value from the data source `"coordinates": [0, 0]` overrides the coordinates `center: [-73.967605, 40.780452]` that you set when the map was initialized.
115
115
116
-
The simple data layer can be used as a powerful tool in the following scenarios:
116
+
The simple data layer is a powerful tool in the following scenarios:
117
117
118
118
- A data source includes several feature types.
119
119
- Features in the data set have several style properties that are individually set.
120
120
- You're not sure what the data set contains.
121
121
122
-
For example, when parsing XML data feeds, you might not know the features' exact style and geometry types. The [Simple data layer options] sample shows how the simple data layer renders the features of a Keyhole Markup Language (KML) file. You can also see the options provided by the `SimpleDataLayer` class. For the source code for this sample, see [Simple data layer options.html] in the Azure Maps code samples in GitHub.
122
+
For example, when you're parsing XML data feeds, you might not know the features' exact style and geometry types. The [Simple data layer options] sample shows how the simple data layer renders the features of a Keyhole Markup Language (KML) file. You can also see the options in the `SimpleDataLayer` class. For the source code for this sample, see [Simple data layer options.html] in the Azure Maps code samples in GitHub.
123
123
124
124
:::image type="content" source="./media/spatial-io-add-simple-data-layer/simple-data-layer-options.png"alt-text="A screenshot of map with a panel on the left showing simple data layer options.":::
125
125
@@ -130,44 +130,44 @@ For example, when parsing XML data feeds, you might not know the features' exact
130
130
> [!NOTE]
131
131
> This simple data layer uses the [popup template] class to display KML balloons or feature properties as a table. By default, all content rendered in the popup is sandboxed inside an iFrame as a security feature. However, there are limitations:
132
132
>
133
-
> - All pointer lock functionality, top navigation functionality, scripts, and forms are disabled. Links can open in a new tab when selected.
134
-
> - Older browsers that don't support the `srcdoc` parameter on iFrames can only render a small amount of content.
133
+
> - All pointer lock functionality, top navigation functionality, scripts, and forms are disabled. Links can open in a new tab when they're selected.
134
+
> - Older browsers that don't support the `srcdoc` parameter on iFrames can render only a small amount of content.
135
135
>
136
-
> If you trust the data loaded into the popups, and want the popup scripts to be able to access your application, you can disable this feature. Just set the `sandboxContent` option in the popup template to false.
136
+
> If you trust the data loaded into the popups, and want the popup scripts to be able to access your application, you can disable this feature. Just set the `sandboxContent` option in the popup template to `false`.
137
137
138
138
## Default supported style properties
139
139
140
140
The simple data layer wraps several of the core rendering layers: bubble, symbol, line, polygon, and extruded polygon. It uses expressions to search for valid style properties on individual features.
141
141
142
-
The two main sets of supported property names are Azure Maps and GitHub. Most property names of Azure Maps layer options are supported in the simple data layer as style properties of features. Some layer options include expressions that support style property names that are commonly used by GitHub.
142
+
The two main sets of supported property names are Azure Maps and GitHub. Most property names of Azure Maps layer options are supported in the simple data layer as style properties of features. Some layer options include expressions that support style property names that Github commonly uses.
143
143
144
144
[GitHub's GeoJSON map support] defines these property names, which are used to style GeoJSON files that are stored and rendered within the platform. Most of GitHub's styling properties are supported in the simple data layer, except the `marker-symbol` styling properties.
145
145
146
146
If the reader comes across a less common style property, it converts it to the most similar Azure Maps style property. Additionally, you can override the default style expressions by using the `getLayers` function of the simple data layer and updating the options on any of the layers.
147
147
148
-
The following sections provide details on the default style properties that the simple data layer supports. The order of the supported property names is also the priority. If two style properties are defined for the same layer option, the first one in the list takes precedence. Any CSS3 color value including HEX, RGB, RGBA, HSL, HSLA, or named color value can be used.
148
+
The following sections provide details on the default style properties that the simple data layer supports. The order of the supported property names is also the priority. If two style properties are defined for the same layer option, the first one in the list takes precedence. Colors can be any CSS3 color value (HEX, RGB, RGBA, HSL, HSLA) or named color value.
149
149
150
150
### Bubble layer style properties
151
151
152
-
If a feature is a `Point` or a `MultiPoint`, and the feature doesn't have an `image` property to use as a custom icon to render the point as a symbol, the feature is rendered with a `BubbleLayer`.
152
+
If a feature is a `Point` or a `MultiPoint`, and the feature doesn't have an image property to use as a custom icon to render the point as a symbol, the feature is rendered with a `BubbleLayer`.
<sup>1</sup> The `size` and `scale` values are considered scalar values, and are multiplied by `8`.
160
+
<sup>1</sup> The size and scale values are considered scalar values, and are multiplied by 8.
161
161
162
-
<sup>2</sup> If the GitHub `marker-size` option is specified, the following values are used for the radius:
162
+
<sup>2</sup> If the GitHub `marker-size` option is specified, the radius uses the following values:
163
163
164
164
| Marker size | Radius |
165
165
|-------------|--------|
166
166
|`small`|`6`|
167
167
|`medium`|`8`|
168
168
|`large`|`12`|
169
169
170
-
Clusters are also rendered using the bubble layer. By default, the radius of a cluster is set to `16`. The color of the cluster varies depending on the number of points in the cluster, as defined in the following table:
170
+
Clusters are also rendered via the bubble layer. By default, the radius of a cluster is set to 16. The color of the cluster varies depending on the number of points in the cluster, as defined in the following table:
171
171
172
172
| Number of points | Color |
173
173
|-------------|----------|
@@ -177,9 +177,9 @@ Clusters are also rendered using the bubble layer. By default, the radius of a c
177
177
178
178
### Symbol style properties
179
179
180
-
If a feature is a `Point` or `MultiPoint`, and the feature has an `image` property that would be used as a custom icon to render the point as a symbol, the feature is rendered with a `SymbolLayer`.
180
+
If a feature is a `Point` or `MultiPoint`, and the feature has an image property that would be used as a custom icon to render the point as a symbol, the feature is rendered with a `SymbolLayer`.
181
181
182
-
| Layer option | Supported property name(s)| Default value |
182
+
| Layer option | Supported property names| Default value |
@@ -209,7 +209,7 @@ If the feature is a `LineString`, `MultiLineString`, `Polygon`, or `MultiPolygon
209
209
210
210
### Polygon style properties
211
211
212
-
If the feature is a `Polygon` or a `MultiPolygon`, and the feature either doesn't have a `height` property, or if the `height` property is zero, the feature is rendered with a `PolygonLayer`.
212
+
If the feature is a `Polygon` or a `MultiPolygon`, and the feature either doesn't have a height property, or if the height property is zero, the feature is rendered with a `PolygonLayer`.
@@ -218,17 +218,17 @@ If the feature is a `Polygon` or a `MultiPolygon`, and the feature either doesn'
218
218
219
219
### Extruded polygon style properties
220
220
221
-
If the feature is a `Polygon` or a `MultiPolygon`, and has a `height` property with a value greater than zero, the feature is rendered with an `PolygonExtrusionLayer`.
221
+
If the feature is a `Polygon` or a `MultiPolygon`, and has a height property with a value greater than zero, the feature is rendered with an `PolygonExtrusionLayer`.
222
222
223
-
| Layer option | Supported property name(s)| Default value |
223
+
| Layer option | Supported property names| Default value |
0 commit comments