Skip to content

Commit 1ec35e0

Browse files
committed
articles-about-the-spatial-io-module
1 parent 0aa1848 commit 1ec35e0

File tree

2 files changed

+47
-52
lines changed

2 files changed

+47
-52
lines changed

articles/azure-maps/how-to-use-spatial-io-module.md

Lines changed: 23 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -10,49 +10,44 @@ ms.service: azure-maps
1010
ms.subservice: web-sdk
1111
---
1212

13-
# How to use the Azure Maps Spatial IO module
13+
# Use the Azure Maps Spatial IO module
1414

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.
1616

1717
You can use the robust features in this module to:
1818

19-
- [Read and write spatial data].
19+
- [Read and write spatial data]. You can use file formats that include:
20+
- Keyhole Markup Language (KML).
21+
- Compressed KML (KMZ).
22+
- GPS Exchange Format (GPX).
23+
- Geographic Really Simple Syndication (GeoRSS).
24+
- Geography Markup Language (GML).
25+
- Geographic JavaScript Object Notation (GeoJSON).
26+
- Well-Known Text (WKT).
27+
- Comma-Separated Values (CSV) when columns include spatial information.
2028
- 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)].
2129
- Query data in a Web Feature Service (WFS). For more information, see [Connect to a WFS service].
2230
- 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].
2432

2533
The following video provides an overview of the Spatial IO module in the Azure Maps Web SDK.
2634

2735
</br>
2836

2937
> [!VIDEO https://learn.microsoft.com/Shows/Internet-of-Things-Show/Easily-integrate-spatial-data-into-the-Azure-Maps/player?format=ny]
3038
> [!WARNING]
31-
> 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.
3240
33-
## Supported file formats and prerequisites
41+
## Prerequisites
3442

35-
You can use file formats that include:
36-
37-
- Keyhole Markup Language (KML).
38-
- Compressed KML (KMZ).
39-
- GPS Exchange Format (GPX).
40-
- Geographic Really Simple Syndication (GeoRSS).
41-
- Geography Markup Language (GML).
42-
- Geographic JavaScript Object Notation (GeoJSON).
43-
- Well-Known Text (WKT).
44-
- 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]
5045

5146
## Install the Spatial IO module
5247

5348
You can load the Azure Maps Spatial IO module by using one of the following two options:
5449

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.
5651

5752
```html
5853
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
@@ -72,7 +67,7 @@ You can load the Azure Maps Spatial IO module by using one of the following two
7267

7368
To learn more, see [How to use the Azure Maps map control npm package].
7469

75-
## Use the Spatial IO module
70+
## Implement the Spatial IO module
7671

7772
1. Create a new HTML file.
7873

@@ -130,20 +125,20 @@ You can load the Azure Maps Spatial IO module by using one of the following two
130125
</html>
131126
```
132127

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:
134129

135130
```html
136131
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
137132
```
138133

139-
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.
140135
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.
141136

142137
```javascript
143138
var datasource, layer;
144139
```
145140

146-
and
141+
Find the best places to put the code snippets.
147142

148143
```javascript
149144
//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
232227
</html>
233228
```
234229

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:
236231

237232
:::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.":::
238233

239234
## Related content
240235

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:
242237

243238
- [Add a simple data layer]
244239
- [Read and write spatial data]

articles/azure-maps/spatial-io-add-simple-data-layer.md

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
title: Add a Simple Data Layer
33
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.
55
author: sinnypan
66
ms.author: sipa
77
ms.date: 06/19/2023
@@ -13,17 +13,17 @@ ms.subservice: web-sdk
1313

1414
# Add a simple data layer
1515

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.
1717

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.
1919

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.
2121

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 class adds 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.
2323

2424
## Use a simple data layer
2525

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:
2727

2828
```javascript
2929
//Create a data source and add it to the map.
@@ -35,7 +35,7 @@ var layer = new atlas.layer.SimpleDataLayer(datasource);
3535
map.layers.add(layer);
3636
```
3737

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:
3939

4040
```javascript
4141
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.min.js"></script>
@@ -113,13 +113,13 @@ The sample code renders the point feature by using the simple data layer, and th
113113
> [!NOTE]
114114
> 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.
115115
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:
117117

118118
- A data source includes several feature types.
119119
- Features in the data set have several style properties that are individually set.
120120
- You're not sure what the data set contains.
121121

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.
123123

124124
:::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.":::
125125

@@ -130,44 +130,44 @@ For example, when parsing XML data feeds, you might not know the features' exact
130130
> [!NOTE]
131131
> 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:
132132
>
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.
135135
>
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`.
137137
138138
## Default supported style properties
139139

140140
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.
141141

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.
143143

144144
[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.
145145

146146
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.
147147

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.
149149

150150
### Bubble layer style properties
151151

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`.
153153

154154
| Layer option | Supported property names | Default value |
155155
|--------------|----------------------------|---------------|
156156
| `color` | `color`, `marker-color` | `'#1A73AA'` |
157157
| `radius` | `size`<sup>1</sup>, `marker-size`<sup>2</sup>, `scale`<sup>1</sup> | `8` |
158158
| `strokeColor` | `strokeColor`, `stroke` | `'#FFFFFF'` |
159159

160-
<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.
161161

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:
163163

164164
| Marker size | Radius |
165165
|-------------|--------|
166166
| `small` | `6` |
167167
| `medium` | `8` |
168168
| `large` | `12` |
169169

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:
171171

172172
| Number of points | Color |
173173
|-------------|----------|
@@ -177,9 +177,9 @@ Clusters are also rendered using the bubble layer. By default, the radius of a c
177177

178178
### Symbol style properties
179179

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`.
181181

182-
| Layer option | Supported property name(s) | Default value |
182+
| Layer option | Supported property names | Default value |
183183
|--------------|----------------------------|---------------|
184184
| `image` | `image` | ``none`` |
185185
| `size` | `size`, `marker-size`<sup>1</sup> | `1` |
@@ -209,7 +209,7 @@ If the feature is a `LineString`, `MultiLineString`, `Polygon`, or `MultiPolygon
209209

210210
### Polygon style properties
211211

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`.
213213

214214
| Layer option | Supported property names | Default value |
215215
|--------------|----------------------------|---------------|
@@ -218,17 +218,17 @@ If the feature is a `Polygon` or a `MultiPolygon`, and the feature either doesn'
218218

219219
### Extruded polygon style properties
220220

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`.
222222

223-
| Layer option | Supported property name(s) | Default value |
223+
| Layer option | Supported property names | Default value |
224224
|--------------|----------------------------|---------------|
225225
| `base` | `base` | `0` |
226226
| `fillColor` | `fillColor`, `fill` | `'#1E90FF'` |
227227
| `height` | `height` | `0` |
228228

229229
## Related content
230230

231-
Learn more about the classes and methods used in this article:
231+
Learn more about the classes and methods in this article:
232232

233233
- [SimpleDataLayer]
234234
- [SimpleDataLayerOptions]

0 commit comments

Comments
 (0)