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
+59-64Lines changed: 59 additions & 64 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
-
title: How to use the Azure Maps spatial IO module
2
+
title: How to Use the Azure Maps Spatial IO Module
3
3
titleSuffix: Microsoft Azure Maps
4
-
description: Learn how to use the Spatial IO module provided by the Azure Maps Web SDK. This module provides robust features to make it easy for developers to integrate spatial data with the Azure Maps web SDK.
4
+
description: Learn how to use the Azure Maps Spatial IO module to integrate spatial data with the Azure Maps Web SDK.
5
5
author: sinnypan
6
6
ms.author: sipa
7
7
ms.date: 02/28/2020
@@ -10,61 +10,68 @@ 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 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:
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
-
-[Read and write spatial data]. Supported file formats include: KML, KMZ, GPX, GeoRSS, GML, GeoJSON and CSV files containing columns with spatial information. Also supports Well-Known Text (WKT).
18
-
- Connect to Open Geospatial Consortium (OGC) services and integrate with Azure Maps web SDK, and 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)].
19
-
- Query data in a Web Feature Service (WFS). For more information, see [Connect to a WFS service].
20
-
- Overlay complex data sets that contain style information and have them render automatically. For more information, see [Add a simple data layer].
21
-
- Leverage high-speed XML and delimited file reader and writer classes. For more information, see [Core IO operations].
17
+
You can use the robust features in this module to:
22
18
23
-
This guide demonstrates how to integrate and use the Spatial IO module in a web application.
19
+
-[Read and write spatial data]. You can use file formats that include:
- Comma-Separated Values (CSV) when columns include spatial information.
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)].
29
+
- Query data in a Web Feature Service (WFS). For more information, see [Connect to a WFS service].
30
+
- Overlay complex data sets that contain style information, which can render automatically. For more information, see [Add a simple data layer].
31
+
- Use high-speed XML and delimited file reader and writer classes. For more information, see [Core IO operations].
24
32
25
-
This video provides an overview of Spatial IO module in the Azure Maps Web SDK.
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 referencing it from another domain. The spatial IO module does take steps to minimize risk, however the safest approach is too not allow any dangerous data into your application to begin with.
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.
33
40
34
41
## Prerequisites
35
42
36
43
- An [Azure Maps account]
37
44
- A [subscription key]
38
45
39
-
## Installing the Spatial IO module
46
+
## Install the Spatial IO module
40
47
41
-
You can load the Azure Maps spatial IO module using one of the two options:
48
+
You can load the Azure Maps Spatial IO module by using one of the following two options:
42
49
43
-
- The globally hosted Azure CDN for the Azure Maps spatial IO module. For this option, you add a reference to the JavaScript in the `<head>` element of the HTML file.
50
+
- The first option is to use the globally hosted Azure content delivery network for the Azure Maps Spatial IO module. Use the following script tag in the `<head>` element of the HTML file to add the reference:
- The source code for [azure-maps-spatial-io] can be loaded locally, and then hosted with your app. This package also includes TypeScript definitions. For this option, use the following command to install the package:
56
+
- With the second option, you can load the source code for [azure-maps-spatial-io] locally, and host it with your app. This package also includes TypeScript definitions. Use the following command to install the package:
50
57
51
58
```sh
52
59
npm install azure-maps-spatial-io
53
60
```
54
61
55
-
Then, use an import declaration to add the module into a source file:
62
+
Use an import declaration to add the module into a source file:
56
63
57
64
```js
58
65
import * as spatial from "azure-maps-spatial-io";
59
66
```
60
67
61
68
To learn more, see [How to use the Azure Maps map control npm package].
62
69
63
-
## Using the Spatial IO module
70
+
## Implement the Spatial IO module
64
71
65
72
1. Create a new HTML file.
66
73
67
-
1. Load the Azure Maps Web SDK and initialize the map control. See the [Azure Maps map control] guide for the details. Once you're done with this step, your HTML file should look like this:
74
+
1. Load the Azure Maps Web SDK and initialize the map control. See the [Azure Maps map control] guide for details. Your HTML file should look like this:
68
75
69
76
```html
70
77
<!DOCTYPE html>
@@ -75,10 +82,10 @@ You can load the Azure Maps spatial IO module using one of the two options:
75
82
76
83
<metacharset="utf-8">
77
84
78
-
<!--Ensures that Internet Explorer and Edge uses the latest version and doesn't emulate an older version -->
85
+
<!--Ensure that Internet Explorer and Edge use the latest version and don't emulate an older version.-->
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
@@ -94,7 +101,7 @@ You can load the Azure Maps spatial IO module using one of the two options:
94
101
map =newatlas.Map('myMap', {
95
102
view:'Auto',
96
103
97
-
//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
104
+
//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps.
98
105
authOptions: {
99
106
authType:'subscriptionKey',
100
107
subscriptionKey:'<Your Azure Maps Key>'
@@ -104,7 +111,7 @@ You can load the Azure Maps spatial IO module using one of the two options:
104
111
//Wait until the map resources are ready.
105
112
map.events.add('ready', function() {
106
113
107
-
// Write your code here to make sure it runs once the map resources are ready
114
+
// Write your code here to make sure it runs once the map resources are ready.
108
115
109
116
});
110
117
}
@@ -118,19 +125,22 @@ You can load the Azure Maps spatial IO module using one of the two options:
118
125
</html>
119
126
```
120
127
121
-
1. Load the Azure Maps spatial IO module. For this exercise, 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. Before you scroll down to see the full code in the next step, think about the best places to put the data source and layer code snippets. Recall that, before we programmatically manipulate the map, we should wait until the map resource are ready.
134
+
1. Initialize a data source and add it to the map.
135
+
1. Initialize a simple data layer and add the data source to it.
136
+
1. Render the data layer.
137
+
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.
128
138
129
139
```javascript
130
140
var datasource, layer;
131
141
```
132
142
133
-
and
143
+
Find the best places to put the code snippets.
134
144
135
145
```javascript
136
146
//Create a data source and add it to the map.
@@ -142,7 +152,7 @@ You can load the Azure Maps spatial IO module using one of the two options:
142
152
map.layers.add(layer);
143
153
```
144
154
145
-
1. Your HTML code should now look like the following code. This sample demonstrates how to display an XML file's feature data on a map.
155
+
1. Your HTML code should look like the following. The sample code shows you how to display an XML file's feature data on a map.
146
156
147
157
> [!NOTE]
148
158
> This example uses [Route66Attractions.xml].
@@ -155,13 +165,13 @@ You can load the Azure Maps spatial IO module using one of the two options:
155
165
156
166
<metacharset="utf-8">
157
167
158
-
<!--Ensures that Internet Explorer and Edge uses the latest version and doesn't emulate an older version -->
168
+
<!--Ensure that Internet Explorer and Edge use the latest version and don't emulate an older version.-->
@@ -176,7 +186,7 @@ You can load the Azure Maps spatial IO module using one of the two options:
176
186
map =newatlas.Map('myMap', {
177
187
view:'Auto',
178
188
179
-
//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
189
+
//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps.
180
190
authOptions: {
181
191
authType:'subscriptionKey',
182
192
subscriptionKey:'<Your Azure Maps Key>'
@@ -219,50 +229,35 @@ You can load the Azure Maps spatial IO module using one of the two options:
219
229
</html>
220
230
```
221
231
222
-
1. Remember to replace `<YourAzureMapsKey>` with your subscription key. You should see results similar to the following image in your HTML file:
232
+
1. Remember to replace `<YourAzureMapsKey>` with your subscription key. Your HTML file should include an image that looks like this:
223
233
224
234
:::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.":::
225
235
226
-
## Next steps
227
-
228
-
The feature we demonstrated is only one of the many features available in the Spatial IO module. Read the following guides to learn how to use other functionalities in the Spatial IO module:
229
-
230
-
> [!div class="nextstepaction"]
231
-
> [Add a simple data layer]
232
-
233
-
> [!div class="nextstepaction"]
234
-
> [Read and write spatial data]
235
-
236
-
> [!div class="nextstepaction"]
237
-
> [Add an OGC map layer]
238
-
239
-
> [!div class="nextstepaction"]
240
-
> [Connect to a WFS service]
241
-
242
-
> [!div class="nextstepaction"]
243
-
> [Leverage core operations]
236
+
## Related content
244
237
245
-
> [!div class="nextstepaction"]
246
-
> [Supported data format details]
238
+
This article describes only one of the many features available in the Spatial IO module. To learn about others, read the following guides:
247
239
248
-
Refer to the Azure Maps Spatial IO documentation:
240
+
- [Add a simple data layer]
241
+
- [Read and write spatial data]
242
+
- [Add a map layer from the Open Geospatial Consortium (OGC)]
243
+
- [Connect to a WFS service]
244
+
- [Core IO operations]
245
+
- [Supported data format details]
246
+
- [Get documentation for the Azure Maps Spatial IO package]
249
247
250
-
> [!div class="nextstepaction"]
251
-
> [Azure Maps Spatial IO package]
252
-
253
-
[Add a map layer from the Open Geospatial Consortium (OGC)]: spatial-io-add-ogc-map-layer.md
254
248
[Add a simple data layer]: spatial-io-add-simple-data-layer.md
255
-
[Add an OGC map layer]: spatial-io-add-ogc-map-layer.md
249
+
[Read and write spatial data]: spatial-io-read-write-spatial-data.md
250
+
[Add a map layer from the Open Geospatial Consortium]: spatial-io-add-ogc-map-layer.md
251
+
[Connect to a WFS service]: spatial-io-connect-wfs-service.md
0 commit comments