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
+36-51Lines changed: 36 additions & 51 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: 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 easily integrate spatial data with the Azure Maps Web SDK by using the Spatial IO Module.
5
5
author: sinnypan
6
6
ms.author: sipa
7
7
ms.date: 02/28/2020
@@ -12,24 +12,23 @@ ms.subservice: web-sdk
12
12
13
13
# How to 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 Web SDK provides the [Spatial IO module], which integrates spatial data with the Azure Maps Web SDK using JavaScript or TypeScript. You can use the robust features in this module to:
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)].
17
+
-[Read and write spatial data]. You can use file formats including KML, KMZ, GPX, GeoRSS, GML, GeoJSON, and CSV files containing columns with spatial information. Well-Known Text (WKT) is also supported.
18
+
- Connect to Open Geospatial Consortium (OGC) services and integrate with 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)].
19
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].
20
+
- Overlay complex data sets that contain style information, which can render automatically. For more information, see [Add a simple data layer].
21
21
- Leverage high-speed XML and delimited file reader and writer classes. For more information, see [Core IO operations].
22
22
23
23
This guide demonstrates how to integrate and use the Spatial IO module in a web application.
24
24
25
-
This video provides an overview of Spatial IO module in the Azure Maps Web SDK.
25
+
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.
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.
33
32
34
33
## Prerequisites
35
34
@@ -38,15 +37,15 @@ This video provides an overview of Spatial IO module in the Azure Maps Web SDK.
38
37
39
38
## Installing the Spatial IO module
40
39
41
-
You can load the Azure Maps spatial IO module using one of the two options:
40
+
You can load the Azure Maps Spatial IO module using one of the following two options:
42
41
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.
42
+
-You can use the globally hosted Azure Content Delivery Network (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.
- 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:
48
+
- With the second option, you can load the source code for [azure-maps-spatial-io] locally, and then host it with your app. This package also includes TypeScript definitions. Use the following command to install the package:
50
49
51
50
```sh
52
51
npm install azure-maps-spatial-io
@@ -64,7 +63,7 @@ You can load the Azure Maps spatial IO module using one of the two options:
64
63
65
64
1. Create a new HTML file.
66
65
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:
66
+
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
67
69
68
```html
70
69
<!DOCTYPE html>
@@ -75,7 +74,7 @@ You can load the Azure Maps spatial IO module using one of the two options:
75
74
76
75
<metacharset="utf-8">
77
76
78
-
<!-- Ensures that Internet Explorer and Edge uses the latest version and doesn't emulate an older version -->
77
+
<!-- Ensures that Internet Explorer and Edge use the latest version and don't emulate an older version -->
<!-- Ensures the web page looks good on all screen sizes. -->
@@ -104,7 +103,7 @@ You can load the Azure Maps spatial IO module using one of the two options:
104
103
//Wait until the map resources are ready.
105
104
map.events.add('ready', function() {
106
105
107
-
// Write your code here to make sure it runs once the map resources are ready
106
+
// Write your code here to make sure it runs once the map resources are ready.
108
107
109
108
});
110
109
}
@@ -118,13 +117,14 @@ You can load the Azure Maps spatial IO module using one of the two options:
118
117
</html>
119
118
```
120
119
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:
120
+
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:
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.
126
+
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.
127
+
1. 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. Wait until the map resources are ready before you programmatically manipulate the map.
128
128
129
129
```javascript
130
130
var datasource, layer;
@@ -142,7 +142,7 @@ You can load the Azure Maps spatial IO module using one of the two options:
142
142
map.layers.add(layer);
143
143
```
144
144
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.
145
+
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
146
147
147
> [!NOTE]
148
148
> This example uses [Route66Attractions.xml].
@@ -155,13 +155,13 @@ You can load the Azure Maps spatial IO module using one of the two options:
155
155
156
156
<metacharset="utf-8">
157
157
158
-
<!-- Ensures that Internet Explorer and Edge uses the latest version and doesn't emulate an older version -->
158
+
<!-- Ensures that Internet Explorer and Edge use the latest version and don't emulate an older version -->
@@ -176,7 +176,7 @@ You can load the Azure Maps spatial IO module using one of the two options:
176
176
map =newatlas.Map('myMap', {
177
177
view:'Auto',
178
178
179
-
//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
179
+
//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps.
180
180
authOptions: {
181
181
authType:'subscriptionKey',
182
182
subscriptionKey:'<Your Azure Maps Key>'
@@ -219,50 +219,35 @@ You can load the Azure Maps spatial IO module using one of the two options:
219
219
</html>
220
220
```
221
221
222
-
1. Remember to replace `<YourAzureMapsKey>` with your subscription key. You should see results similar to the following image in your HTML file:
222
+
1. Remember to replace `<YourAzureMapsKey>` with your subscription key. Your HTML file should include an image that looks like this.
223
223
224
224
:::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
225
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]
244
-
245
-
> [!div class="nextstepaction"]
246
-
> [Supported data format details]
226
+
## Related content
247
227
248
-
Refer to the Azure Maps Spatial IO documentation:
228
+
There are many features available in the Spatial IO module. To learn about other functionalities, read the following guides:
249
229
250
-
> [!div class="nextstepaction"]
251
-
> [Azure Maps Spatial IO package]
230
+
- [Add a simple data layer]
231
+
- [Read and write spatial data]
232
+
- [Add an OGC map layer]
233
+
- [Connect to a WFS service]
234
+
- [Leverage core operations]
235
+
- [Supported data format details]
236
+
- [Documentation: Azure Maps Spatial IO package]
252
237
253
-
[Add a map layer from the Open Geospatial Consortium (OGC)]: spatial-io-add-ogc-map-layer.md
254
238
[Add a simple data layer]: spatial-io-add-simple-data-layer.md
239
+
[Read and write spatial data]: spatial-io-read-write-spatial-data.md
255
240
[Add an OGC map layer]: spatial-io-add-ogc-map-layer.md
241
+
[Connect to a WFS service]: spatial-io-connect-wfs-service.md
0 commit comments