Skip to content

Commit f81b700

Browse files
author
farah-alyasari
committed
fixed blocking and nonblocking issues. checked on all articles
1 parent a46b4dd commit f81b700

6 files changed

+208
-208
lines changed

‎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-
a. 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:
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: 132 additions & 133 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ manager: philmea
1111
#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.
1212
---
1313

14-
1514
# How to use the Azure Maps Spatial IO module
1615

1716
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:
@@ -32,190 +31,190 @@ Before you can use the Spatial IO module, you'll need to [make an Azure Maps acc
3231

3332
You can load the Azure Maps spatial IO module using one of the two options:
3433

35-
a. 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.
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.
3635

37-
```html
38-
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
39-
```
36+
```html
37+
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
38+
```
4039

41-
b. 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:
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:
4241

43-
```sh
44-
npm install azure-maps-spatial-io
45-
```
42+
```sh
43+
npm install azure-maps-spatial-io
44+
```
4645

47-
Then, add a reference to the JavaScript in the `<head>` element of the HTML document:
46+
Then, add a reference to the JavaScript in the `<head>` element of the HTML document:
4847

49-
```html
50-
<script src="node_modules/azure-maps-spatial-io/dist/atlas-spatial.min.js"></script>
51-
```
48+
```html
49+
<script src="node_modules/azure-maps-spatial-io/dist/atlas-spatial.min.js"></script>
50+
```
5251

5352
## Using the Spatial IO module
5453

5554
1. Create a new HTML file.
5655

5756
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:
5857

59-
```html
60-
<!DOCTYPE html>
61-
<html>
58+
```html
59+
<!DOCTYPE html>
60+
<html>
6261

63-
<head>
64-
<title></title>
62+
<head>
63+
<title></title>
6564

66-
<meta charset="utf-8">
65+
<meta charset="utf-8">
6766

68-
<!-- Ensures that IE and Edge uses the latest version and doesn't emulate an older version -->
69-
<meta http-equiv="x-ua-compatible" content="IE=Edge">
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">
7069

71-
<!-- Ensures the web page looks good on all screen sizes. -->
72-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
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">
7372

74-
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
75-
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
76-
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.js"></script>
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>
7776

78-
<script type='text/javascript'>
77+
<script type='text/javascript'>
7978
80-
var map;
81-
82-
function GetMap() {
83-
//Initialize a map instance.
84-
map = new atlas.Map('myMap', {
85-
view: 'Auto',
79+
var map;
8680
87-
//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
88-
authOptions: {
89-
authType: 'subscriptionKey',
90-
subscriptionKey: '<Your Azure Maps Key>'
91-
}
92-
});
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+
});
9392
94-
//Wait until the map resources are ready.
95-
map.events.add('ready', function() {
93+
//Wait until the map resources are ready.
94+
map.events.add('ready', function() {
9695
97-
// Write your code here to make sure it runs once the map resources are ready
96+
// Write your code here to make sure it runs once the map resources are ready
9897
99-
});
100-
}
101-
</script>
102-
</head>
98+
});
99+
}
100+
</script>
101+
</head>
103102

104-
<body onload="GetMap()">
105-
<div id="myMap"></div>
106-
</body>
103+
<body onload="GetMap()">
104+
<div id="myMap"></div>
105+
</body>
107106

108-
</html>
109-
```
107+
</html>
108+
```
110109

111110
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:
112111

113-
```html
114-
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
115-
```
112+
```html
113+
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
114+
```
116115

117116
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.
118117

119-
```javascript
120-
var datasource, layer;
121-
```
122-
123-
and
118+
```javascript
119+
var datasource, layer;
120+
```
124121

125-
```javascript
126-
//Create a data source and add it to the map.
127-
datasource = new atlas.source.DataSource();
128-
map.sources.add(datasource);
122+
and
129123

130-
//Add a simple data layer for rendering the data.
131-
layer = new atlas.layer.SimpleDataLayer(datasource);
132-
map.layers.add(layer);
133-
```
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+
```
134133

135134
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.
136135

137-
```html
138-
<!DOCTYPE html>
139-
<html>
136+
```html
137+
<!DOCTYPE html>
138+
<html>
140139

141-
<head>
142-
<title>Spatial IO Module Example</title>
140+
<head>
141+
<title>Spatial IO Module Example</title>
143142

144-
<meta charset="utf-8">
143+
<meta charset="utf-8">
145144

146-
<!-- Ensures that IE and Edge uses the latest version and doesn't emulate an older version -->
147-
<meta http-equiv="x-ua-compatible" content="IE=Edge">
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">
148147

149-
<!-- Ensures the web page looks good on all screen sizes. -->
150-
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
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">
151150

152-
<!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->
153-
<link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" type="text/css" />
154-
<script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.js"></script>
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>
155154

156-
<!-- Add reference to the Azure Maps Spatial IO module. -->
157-
<script src="https://atlas.microsoft.com/sdk/javascript/spatial/0/atlas-spatial.js"></script>
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>
158157

159-
<script type='text/javascript'>
160-
var map, datasource, layer;
161-
162-
function GetMap() {
163-
//Initialize a map instance.
164-
map = new atlas.Map('myMap', {
165-
view: 'Auto',
166-
167-
//Add your Azure Maps subscription key to the map SDK. Get an Azure Maps key at https://azure.com/maps
168-
authOptions: {
169-
authType: 'subscriptionKey',
170-
subscriptionKey: '<Your Azure Maps Key>'
171-
}
172-
});
173-
174-
//Wait until the map resources are ready.
175-
map.events.add('ready', function() {
176-
177-
//Create a data source and add it to the map.
178-
datasource = new atlas.source.DataSource();
179-
map.sources.add(datasource);
180-
181-
//Add a simple data layer for rendering the data.
182-
layer = new atlas.layer.SimpleDataLayer(datasource);
183-
map.layers.add(layer);
184-
185-
//Read an XML file from a URL or pass in a raw XML string.
186-
atlas.io.read('superCoolKmlFile.xml').then(r => {
187-
if (r) {
188-
//Add the feature data to the data source.
189-
datasource.add(r);
190-
191-
//If bounding box information is known for data, set the map view to it.
192-
if (r.bbox) {
193-
map.setCamera({
194-
bounds: r.bbox,
195-
padding: 50
196-
});
197-
}
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>'
198170
}
199171
});
200-
});
201-
}
202-
</script>
203-
</head>
204172
205-
<body onload="GetMap()">
206-
<div id="myMap"></div>
207-
</body>
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>
208207

209-
</html>
210-
```
208+
</html>
209+
```
211210

212211
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:
213212

214-
<center>
213+
<center>
215214

216-
![Spatial Data Example](./media/how-to-use-spatial-io-module/spatial-data-example.png)
215+
![Spatial Data Example](./media/how-to-use-spatial-io-module/spatial-data-example.png)
217216

218-
</center>
217+
</center>
219218

220219
## Next steps
221220

‎articles/azure-maps/spatial-io-add-ogc-map-layer.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,11 @@ The following sections outline the Web Mapping Service features that are support
2323
- GetFeatureInfo requires the service to support `EPSG:4326` or handle reprojections.
2424
- Supported operations:
2525

26-
| | |
27-
| :-- | :-- |
28-
| GetCapabilities | Retrieves metadata about the service with the supported capabilities |
29-
| GetMap | Retrieves a map image for a specified region |
30-
| GetFeatureInfo | Retrieves `feature_info`, which contains underlying data about the feature |
26+
| | |
27+
| :-- | :-- |
28+
| GetCapabilities | Retrieves metadata about the service with the supported capabilities |
29+
| GetMap | Retrieves a map image for a specified region |
30+
| GetFeatureInfo | Retrieves `feature_info`, which contains underlying data about the feature |
3131

3232
**Web Mapping Tile Service (WMTS)**
3333

@@ -37,10 +37,10 @@ The following sections outline the Web Mapping Service features that are support
3737
- TileMatrix identifier must be an integer value that corresponds to a zoom level on the map. On an azure map, the zoom level is a value between `"0"` and `"22"`. So, `"0"` is supported, but `"00"` isn't supported.
3838
- Supported operations:
3939

40-
| | |
41-
| :-- | :-- |
42-
| GetCapabilities | Retrieves the supported operations and features |
43-
| GetTile | Retrieves imagery for a particular tile |
40+
| | |
41+
| :-- | :-- |
42+
| GetCapabilities | Retrieves the supported operations and features |
43+
| GetTile | Retrieves imagery for a particular tile |
4444

4545
## Overlay an OGC map layer
4646

0 commit comments

Comments
 (0)