Skip to content

Commit be57aa6

Browse files
GitHubber17GitHubber17
authored
Merge pull request #106105 from farah-alyasari/spatialiomodule
Spatialiomodule
2 parents 61bb8a4 + f81b700 commit be57aa6

12 files changed

+1481
-16
lines changed

‎articles/azure-maps/how-to-use-android-map-control-library.md

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -122,10 +122,8 @@ The next step in building your application is to install the Azure Maps Android
122122
```java
123123
package com.example.myapplication;
124124
125-
//For older versions use: import android.support.v7.app.AppCompatActivity;
125+
//For older versions use: import android.support.v7.app.AppCompatActivity;
126126
import androidx.appcompat.app.AppCompatActivity;
127-
128-
import android.os.Bundle;
129127
import com.microsoft.azure.maps.mapcontrol.AzureMaps;
130128
import com.microsoft.azure.maps.mapcontrol.MapControl;
131129
import com.microsoft.azure.maps.mapcontrol.layer.SymbolLayer;

‎articles/azure-maps/how-to-use-map-control.md

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -22,23 +22,23 @@ You can embed a map in a web page by using the Map Control client-side JavaScrip
2222

2323
2. Load in the Azure Maps Web SDK. You can choose one of two options;
2424

25-
1. Use the globally hosted CDN version of the Azure Maps Web SDK by adding the URL endpoints to the stylesheet and script references in the `<head>` element of the file:
25+
* Use the globally hosted CDN version of the Azure Maps Web SDK by adding references to the JavaScript and stylesheet in the `<head>` element of the HTML file:
2626

27-
```HTML
28-
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css">
29-
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
30-
```
27+
```HTML
28+
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css">
29+
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>
30+
```
3131

32-
1. Load the Azure Maps Web SDK source code locally using the [azure-maps-control](https://www.npmjs.com/package/azure-maps-control) NPM package and host it with your app. This package also includes TypeScript definitions.
32+
* Load the Azure Maps Web SDK source code locally using the [azure-maps-control](https://www.npmjs.com/package/azure-maps-control) NPM package and host it with your app. This package also includes TypeScript definitions.
3333

34-
> **npm install azure-maps-control**
34+
> **npm install azure-maps-control**
3535

36-
Then add references to the Azure Maps stylesheet and script source references to the `<head>` element of the file:
36+
Then add references to the Azure Maps stylesheet and script source references to the `<head>` element of the file:
3737

38-
```HTML
39-
<link rel="stylesheet" href="node_modules/azure-maps-control/dist/atlas.min.css" type="text/css">
40-
<script src="node_modules/azure-maps-control/dist/atlas.min.js"></script>
41-
```
38+
```HTML
39+
<link rel="stylesheet" href="node_modules/azure-maps-control/dist/atlas.min.css" type="text/css">
40+
<script src="node_modules/azure-maps-control/dist/atlas.min.js"></script>
41+
```
4242

4343
> [!Note]
4444
> Typescript definitions can be imported into your application by adding the following code:

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

Lines changed: 244 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,244 @@
1+
---
2+
title: How to use the Azure Maps spatial IO module | Microsoft Azure Maps
3+
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+
author: farah-alyasari
5+
ms.author: v-faalya
6+
ms.date: 02/28/2020
7+
ms.topic: conceptual
8+
ms.service: azure-maps
9+
services: azure-maps
10+
manager: philmea
11+
#Customer intent: As an Azure Maps web sdk user, I want to install and use the spatial io module so that I can integrate spatial data with the Azure Maps web sdk.
12+
---
13+
14+
# How to use the Azure Maps Spatial IO module
15+
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+
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).
20+
- [Query data in a Web Feature Service (WFS)](spatial-io-connect-wfs-service.md).
21+
- [Overlay complex data sets that contain style information and have them render automatically](spatial-io-add-simple-data-layer.md).
22+
- [Leverage high-speed XML and delimited file reader and writer classes](spatial-io-core-operations.md).
23+
24+
In this guide, we'll learn how to integrate and use the Spatial IO module in a web application.
25+
26+
## Prerequisites
27+
28+
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).
29+
30+
## Installing the Spatial IO module
31+
32+
You can load the Azure Maps spatial IO module using one of the two options:
33+
34+
* 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.
35+
36+
```html
37+
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
38+
```
39+
40+
* The source code for [azure-maps-spatial-io](https://www.npmjs.com/package/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:
41+
42+
```sh
43+
npm install azure-maps-spatial-io
44+
```
45+
46+
Then, add a reference to the JavaScript in the `<head>` element of the HTML document:
47+
48+
```html
49+
<script src="node_modules/azure-maps-spatial-io/dist/atlas-spatial.min.js"></script>
50+
```
51+
52+
## Using the Spatial IO module
53+
54+
1. Create a new HTML file.
55+
56+
2. Load the Azure Maps Web SDK and initialize the map control. See the [Azure Maps map control](https://docs.microsoft.com/azure/azure-maps/how-to-use-map-control) guide for the details. Once you're done with this step, your HTML file should look like this:
57+
58+
```html
59+
<!DOCTYPE html>
60+
<html>
61+
62+
<head>
63+
<title></title>
64+
65+
<meta charset="utf-8">
66+
67+
<!-- Ensures that IE and Edge uses the latest version and doesn't emulate an older version -->
68+
<meta http-equiv="x-ua-compatible" content="IE=Edge">
69+
70+
<!-- Ensures the web page looks good on all screen sizes. -->
71+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
72+
73+
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
74+
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
75+
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.js"></script>
76+
77+
<script type='text/javascript'>
78+
79+
var map;
80+
81+
function GetMap() {
82+
//Initialize a map instance.
83+
map = new atlas.Map('myMap', {
84+
view: 'Auto',
85+
86+
//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
87+
authOptions: {
88+
authType: 'subscriptionKey',
89+
subscriptionKey: '<Your Azure Maps Key>'
90+
}
91+
});
92+
93+
//Wait until the map resources are ready.
94+
map.events.add('ready', function() {
95+
96+
// Write your code here to make sure it runs once the map resources are ready
97+
98+
});
99+
}
100+
</script>
101+
</head>
102+
103+
<body onload="GetMap()">
104+
<div id="myMap"></div>
105+
</body>
106+
107+
</html>
108+
```
109+
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:
111+
112+
```html
113+
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
114+
```
115+
116+
3. 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.
117+
118+
```javascript
119+
var datasource, layer;
120+
```
121+
122+
and
123+
124+
```javascript
125+
//Create a data source and add it to the map.
126+
datasource = new atlas.source.DataSource();
127+
map.sources.add(datasource);
128+
129+
//Add a simple data layer for rendering the data.
130+
layer = new atlas.layer.SimpleDataLayer(datasource);
131+
map.layers.add(layer);
132+
```
133+
134+
4. Putting it all together, your HTML code should look like the following code. This sample demonstrates how to read an XML file from a URL. Then, load and display the file's feature data on the map.
135+
136+
```html
137+
<!DOCTYPE html>
138+
<html>
139+
140+
<head>
141+
<title>Spatial IO Module Example</title>
142+
143+
<meta charset="utf-8">
144+
145+
<!-- Ensures that IE and Edge uses the latest version and doesn't emulate an older version -->
146+
<meta http-equiv="x-ua-compatible" content="IE=Edge">
147+
148+
<!-- Ensures the web page looks good on all screen sizes. -->
149+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
150+
151+
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
152+
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
153+
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.js"></script>
154+
155+
<!-- Add reference to the Azure Maps Spatial IO module. -->
156+
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
157+
158+
<script type='text/javascript'>
159+
var map, datasource, layer;
160+
161+
function GetMap() {
162+
//Initialize a map instance.
163+
map = new atlas.Map('myMap', {
164+
view: 'Auto',
165+
166+
//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
167+
authOptions: {
168+
authType: 'subscriptionKey',
169+
subscriptionKey: '<Your Azure Maps Key>'
170+
}
171+
});
172+
173+
//Wait until the map resources are ready.
174+
map.events.add('ready', function() {
175+
176+
//Create a data source and add it to the map.
177+
datasource = new atlas.source.DataSource();
178+
map.sources.add(datasource);
179+
180+
//Add a simple data layer for rendering the data.
181+
layer = new atlas.layer.SimpleDataLayer(datasource);
182+
map.layers.add(layer);
183+
184+
//Read an XML file from a URL or pass in a raw XML string.
185+
atlas.io.read('superCoolKmlFile.xml').then(r => {
186+
if (r) {
187+
//Add the feature data to the data source.
188+
datasource.add(r);
189+
190+
//If bounding box information is known for data, set the map view to it.
191+
if (r.bbox) {
192+
map.setCamera({
193+
bounds: r.bbox,
194+
padding: 50
195+
});
196+
}
197+
}
198+
});
199+
});
200+
}
201+
</script>
202+
</head>
203+
204+
<body onload="GetMap()">
205+
<div id="myMap"></div>
206+
</body>
207+
208+
</html>
209+
```
210+
211+
5. Remember to replace `<Your Azure Maps Key>` with your primary key. Open your HTML file, and you'll see results similar to the following image:
212+
213+
<center>
214+
215+
![Spatial Data Example](./media/how-to-use-spatial-io-module/spatial-data-example.png)
216+
217+
</center>
218+
219+
## Next steps
220+
221+
The feature we demonstrated here is only one of the many features available in the Spatial IO module. Read the guides below to learn how to use other functionalities in the Spatial IO module:
222+
223+
> [!div class="nextstepaction"]
224+
> [Add a simple data layer](spatial-io-add-simple-data-layer.md)
225+
226+
> [!div class="nextstepaction"]
227+
> [Read and write spatial data](spatial-io-read-write-spatial-data.md)
228+
229+
> [!div class="nextstepaction"]
230+
> [Add an OGC map layer](spatial-io-add-ogc-map-layer.md)
231+
232+
> [!div class="nextstepaction"]
233+
> [Connect to a WFS service](spatial-io-connect-wfs-service.md)
234+
235+
> [!div class="nextstepaction"]
236+
> [Leverage core operations](spatial-io-core-operations.md)
237+
238+
> [!div class="nextstepaction"]
239+
> [Supported data format details](spatial-io-supported-data-format-details.md)
240+
241+
Refer to the Azure Maps Spatial IO documentation:
242+
243+
> [!div class="nextstepaction"]
244+
> [Azure Maps Spatial IO package](https://docs.microsoft.com/javascript/api/azure-maps-spatial-io/)

‎articles/azure-maps/index.yml

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,22 @@ landingContent:
7878
url: tutorial-route-location.md
7979
- text: Create a store locator
8080
url: tutorial-create-store-locator.md
81+
- linkListType: how-to-guide
82+
links:
83+
- text: Use the spatial IO module
84+
url: how-to-use-spatial-io-module.md
85+
- text: Add a simple data layer
86+
url: spatial-io-add-simple-data-layer.md
87+
- text: Read and write spatial data
88+
url: spatial-io-read-write-spatial-data.md
89+
- text: Add an OGC map layer
90+
url: spatial-io-add-ogc-map-layer.md
91+
- text: Connect to a WFS service
92+
url: spatial-io-connect-wfs-service.md
93+
- text: Leverage core operations
94+
url: spatial-io-core-operations.md
95+
- text: Supported data format details
96+
url: spatial-io-supported-data-format-details.md
8197
- linkListType: reference
8298
links:
8399
- text: Map control
@@ -86,7 +102,8 @@ landingContent:
86102
url: https://docs.microsoft.com/javascript/api/azure-maps-drawing-tools/?view=azure-maps-typescript-latest
87103
- text: Service module
88104
url: https://docs.microsoft.com/javascript/api/azure-maps-rest/?view=azure-maps-typescript-latest
89-
105+
- text: Spatial IO module
106+
url: https://docs.microsoft.com/javascript/api/azure-maps-spatial-io/?view=azure-maps-typescript-latest
90107
# Card
91108
- title: Developing with Android SDK
92109
linkLists:

‎articles/azure-maps/media/how-to-use-spatial-io-module/spatial-data-example.png

89.2 KB
Loading

0 commit comments

Comments
 (0)