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
+21-9Lines changed: 21 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,16 +12,16 @@ 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. You can use the robust features in this module 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. This guide demonstrates how to integrate and use the Spatial IO module in a web application.
16
16
17
-
-[Read and write spatial data]. You can use file formats including Keyhole Markup Language (KML), Compressed KML (KMZ), GPS Exchange Format (GPX), Geographic RSS (GeoRSS), Geography Markup Language (GML), Geographic JavaScript Object Notation (GeoJSON), and Comma-Separated Values (CSV) files containing columns with spatial information. Well-Known Text (WKT) is also supported.
17
+
You can use the robust features in this module to:
18
+
19
+
-[Read and write spatial data].
18
20
- 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
21
- Query data in a Web Feature Service (WFS). For more information, see [Connect to a WFS service].
20
22
- Overlay complex data sets that contain style information, which can render automatically. For more information, see [Add a simple data layer].
21
23
- Use high-speed XML and delimited file reader and writer classes. For more information, see [Core IO operations].
22
24
23
-
This guide demonstrates how to integrate and use the Spatial IO module in a web application.
24
-
25
25
The following video provides an overview of the Spatial IO module in the Azure Maps Web SDK.
26
26
27
27
</br>
@@ -30,6 +30,18 @@ The following video provides an overview of the Spatial IO module in the Azure M
30
30
> [!WARNING]
31
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.
- 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:
60
+
- 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:
49
61
50
62
```sh
51
63
npm install azure-maps-spatial-io
52
64
```
53
65
54
-
Then, use an import declaration to add the module into a source file:
66
+
Use an import declaration to add the module into a source file:
55
67
56
68
```js
57
69
import * as spatial from "azure-maps-spatial-io";
@@ -74,7 +86,7 @@ You can load the Azure Maps Spatial IO module using one of the following two opt
74
86
75
87
<metacharset="utf-8">
76
88
77
-
<!-- Ensures that Internet Explorer and Edge use the latest version and don't emulate an older version -->
89
+
<!-- Ensures that Internet Explorer and Edge use the latest version and don't emulate an older version.-->
Copy file name to clipboardExpand all lines: articles/azure-maps/spatial-io-add-simple-data-layer.md
+14-12Lines changed: 14 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -15,11 +15,11 @@ ms.subservice: web-sdk
15
15
16
16
The spatial IO module provides 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.
17
17
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. After the 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 properties are added to a supported file format, the file can be used for purposes like displaying styled features on a map.
19
19
20
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.
21
21
22
-
The `SimpleDataLayer` class is intended to be used on large data sets that contain features that have many applied geometry types and styles. When used, this class adds an overhead of six layers containing style expressions. So, there are cases when it's more efficient to use a core rendering layer. For example, you can use a core layer when you only need to render a few geometry types and styles on a feature.
22
+
The `SimpleDataLayer` class is intended to be used on large data sets that contain features that have 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.
23
23
24
24
## Use a simple data layer
25
25
@@ -47,7 +47,7 @@ The following code snippet demonstrates how to use a simple data layer that refe
47
47
zoom:12,
48
48
view:"Auto",
49
49
50
-
//Add authentication details for connecting to Azure Maps.
50
+
//Add authentication details to connect to Azure Maps.
51
51
authOptions: {
52
52
// Get an Azure Maps key at https://azuremaps.com/.
53
53
authType:"subscriptionKey",
@@ -102,18 +102,18 @@ The following code snippet demonstrates how to use a simple data layer that refe
102
102
</script>
103
103
```
104
104
105
-
When you add features to the data source, the simple data layer renders them in the most appropriate way. You can set styles for individual features as properties on the feature.
105
+
When you add features to the data source, the simple data layer renders them in the most appropriate way. You can set styles as properties for each individual feature.
106
106
107
-
The preceding sample code shows a GeoJSON point feature with a `color` property set to `red`.
107
+
The preceding sample code shows a Geographic JavaScript Object Notation (GeoJSON) point feature with a `color` property set to `red`.
108
108
109
-
The sample code renders the point feature using the simple data layer, and appears as follows.
109
+
The sample code renders the point feature by using the simple data layer, and the result appears as follows.
110
110
111
111
:::image type="content" source="./media/spatial-io-add-simple-data-layer/simple-data-layer.png"alt-text="A screenshot of a map with coordinates of 0, 0 that shows a red dot over blue water; the red dot was added using the symbol layer.":::
112
112
113
113
> [!NOTE]
114
114
> 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.
115
115
116
-
The simple data layer is a powerful tool for the following scenarios:
116
+
The simple data layer can be used as a powerful tool in the following scenarios:
117
117
118
118
- A data source includes several feature types.
119
119
- Features in the data set have several style properties that are individually set.
@@ -128,22 +128,24 @@ For example, when parsing XML data feeds, you might not know the features' exact
128
128
------------------------------------>
129
129
130
130
> [!NOTE]
131
-
> 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 of an iFrame as a security feature. However, there are limitations:
131
+
> 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:
132
132
>
133
-
> - All scripts, forms, pointer lock, and top navigation functionalities are disabled. Links can open in a new tab when selected.
133
+
> - All pointer lock functionality, top navigation functionality, scripts, and forms are disabled. Links can open in a new tab when selected.
134
134
> - Older browsers that don't support the `srcdoc` parameter on iFrames can only render a small amount of content.
135
135
>
136
-
> If you trust the data loaded into the pop-ups, and want popup scripts to be able to access your application, you can disable this feature. Just set the popup templates `sandboxContent` option to false.
136
+
> If you trust the data loaded into the pop-ups, and want 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.
137
137
138
138
## Default supported style properties
139
139
140
140
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.
141
141
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. [GitHub's GeoJSON map support] defines these property names, and they're 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.
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.
143
+
144
+
[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.
143
145
144
146
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.
145
147
146
-
The following sections provide details on the default style properties that the simple data layer supports. The order of the supported property name is also the priority of the property. If two style properties are defined for the same layer option, the first one in the list has higher 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. Any CSS3 color value including HEX, RGB, RGBA, HSL, HSLA, or named color value can be used.
0 commit comments