Skip to content

Commit 27ae132

Browse files
author
farah-alyasari
committed
reviewed create data source web sdk. resolved 11 issues. improved overall score from 89 to 97, style from 76 to 100, clarity from 74 to 100
1 parent d65bc85 commit 27ae132

File tree

1 file changed

+20
-18
lines changed

1 file changed

+20
-18
lines changed

articles/azure-maps/create-data-source-web-sdk.md

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Create a data source for a map | Microsoft Azure Maps
3-
description: In this article, you will learn how to create a data source and add it to a map using the Microsoft Azure Maps Web SDK.
3+
description: In this article, you'll learn how to create a data source and add it to a map using the Microsoft Azure Maps Web SDK.
44
author: rbrundritt
55
ms.author: richbrun
66
ms.date: 08/08/2019
@@ -13,26 +13,26 @@ ms.custom: codepen
1313

1414
# Create a data source
1515

16-
The Azure Maps Web SDK stores data in data sources that optimizes the data for querying and rendering. Currently there are two types of data sources:
16+
The Azure Maps Web SDK stores data in data sources. Using data sources optimizes the data operations for querying and rendering. Currently there are two types of data sources:
1717

1818
**GeoJSON data source**
1919

20-
A GeoJSON based data source can load and store data locally using the `DataSource` class. GeoJSON data can be manually created or created using the helper classes in the [atlas.data](https://docs.microsoft.com/javascript/api/azure-maps-control/atlas.data) namespace. The `DataSource` class provides functions for importing local or remote GeoJSON files. Remote GeoJSON files must be hosted on a CORs enabled endpoint. The `DataSource` class provides functionality for clustering point data. Data can easily be added, removed, and updated with the `DataSource` class.
20+
A GeoJSON based data source load and store data locally using the `DataSource` class. GeoJSON data can be manually created or created using the helper classes in the [atlas.data](https://docs.microsoft.com/javascript/api/azure-maps-control/atlas.data) namespace. The `DataSource` class provides functions to import local or remote GeoJSON files. Remote GeoJSON files must be hosted on a CORs enabled endpoint. The `DataSource` class provides functionality for clustering point data. And, data can easily be added, removed, and updated with the `DataSource` class.
2121

2222

2323
> [!TIP]
24-
> If you want to overwrite all data in a `DataSource`, if you make calls to the `clear` then `add` functions, the map will try to re-render twice which might cause a bit of a delay. Instead use the `setShapes` function which will remove and replace all data in the data source and only trigger a single re-render of the map.
24+
> Lets say you want to overwrite all data in a `DataSource`. If you make calls to the `clear` then `add` functions, the map might re-render twice, which might cause a bit of a delay. Instead use the `setShapes` function, which will remove and replace all data in the data source and only trigger a single re-render of the map.
2525
2626
**Vector tile source**
2727

28-
A vector tile source describes how to access a vector tile layer and can be created using the [VectorTileSource](https://docs.microsoft.com/javascript/api/azure-maps-control/atlas.source.vectortilesource) class. Azure Maps aligns with the [Mapbox Vector Tile Specification](https://github.com/mapbox/vector-tile-spec), which is an open standard. Vector tile layers are similar to tile layers, however, instead of each tile being a raster image, they're a compressed file (PBF format) that contains vector map data and one or more layers that can be rendered and styled on the client based on the style of each layer. The data in a vector tile contain geographic features in the form of points, lines, and polygons. There are several advantages of vector tile layers over raster tile layers;
28+
A vector tile source describes how to access a vector tile layer. Use the [VectorTileSource](https://docs.microsoft.com/javascript/api/azure-maps-control/atlas.source.vectortilesource) class to instantiate a vector tile source. Vector tile layers are similar to tile layers, but they aren't the same. A tile layer is a raster image. Vector tile layers are a compressed file, in PBF format. This compressed file contains vector map data, and one or more layers. The file can be rendered and styled on the client, based on the style of each layer. The data in a vector tile contain geographic features in the form of points, lines, and polygons. There are several advantages of using vector tile layers instead of raster tile layers:
2929

30-
- A file size of a vector tile is typically much smaller than an equivalent raster tile. As such, less bandwidth is used, which means lower latency and a faster map. This creates a better user experience.
31-
- Since vector tiles are rendered on the client, they can adapt to the resolution of the device they're being displayed on. This makes allows the rendered maps that appear much more well defined and with crystal clear labels.
32-
- Changing the style of the data in the vector maps doesn’t require downloading the data again since the new style can be applied on the client. In contrast, changing the style of a raster tile layer typically requires loading tiles from the server that have the new style applied to them.
33-
- Since the data is delivered in vector form, there's less server-side processing required to prepare the data, which means that newer data can be made available faster.
30+
- A file size of a vector tile is typically much smaller than an equivalent raster tile. As such, less bandwidth is used. It means lower latency, a faster map, and a better user experience.
31+
- Since vector tiles are rendered on the client, they adapt to the resolution of the device they're being displayed on. As a result, the rendered maps appear more well defined, with crystal clear labels.
32+
- Changing the style of the data in the vector maps doesn’t require downloading the data again, since the new style can be applied on the client. In contrast, changing the style of a raster tile layer typically requires loading tiles from the server then applying the new style.
33+
- Since the data is delivered in vector form, there's less server-side processing required to prepare the data. As a result, the newer data can be made available faster.
3434

35-
All layers that use a vector source must specify a `sourceLayer` value.
35+
All layers that use a vector source must specify a `sourceLayer` value.
3636

3737
Once created, data sources can be added to the map through the `map.sources` property, which is a [SourceManager](https://docs.microsoft.com/javascript/api/azure-maps-control/atlas.sourcemanager). The following code shows how to create a `DataSource` and add it to the map.
3838

@@ -42,17 +42,19 @@ var dataSource = new atlas.source.DataSource();
4242
map.sources.add(dataSource);
4343
```
4444

45+
Azure Maps adheres to the [Mapbox Vector Tile Specification](https://github.com/mapbox/vector-tile-spec), an open standard.
46+
4547
## Connecting a data source to a layer
4648

47-
Data is rendered on the map using rendering layers. A single data source can be referenced by one or more rendering layers. The following rendering layers require a data source to be power it:
49+
Data is rendered on the map using rendering layers. A single data source can be referenced by one or more rendering layers. The following rendering layers require a data source:
4850

4951
- [Bubble layer](map-add-bubble-layer.md) - renders point data as scaled circles on the map.
50-
- [Symbol layer](map-add-pin.md) - renders point data as icons and/or text.
52+
- [Symbol layer](map-add-pin.md) - renders point data as icons or text.
5153
- [Heat map layer](map-add-heat-map-layer.md) - renders point data as a density heat map.
52-
- [Line layer](map-add-shape.md) - can be used to render line and or the outline of polygons.
54+
- [Line layer](map-add-shape.md) - render a line and or render the outline of polygons.
5355
- [Polygon layer](map-add-shape.md) - fills the area of a polygon with a solid color or image pattern.
5456

55-
The following code shows how to create a data source, add it to the map and connect it to a bubble layer, then import GeoJSON point data from a remote location into it.
57+
The following code shows how to create a data source, add it to the map, and connect it to a bubble layer. And then, import GeoJSON point data from a remote location into the data source.
5658

5759
```javascript
5860
//Create a data source and add it to the map.
@@ -66,20 +68,20 @@ map.layers.add(new atlas.layer.BubbleLayer(datasource));
6668
datasource.importDataFromUrl('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/significant_month.geojson');
6769
```
6870

69-
There are additional rendering layers that don't connect to these data sources, but instead load the data they render directly.
71+
There are additional rendering layers that don't connect to these data sources, but they directly load the data for rendering.
7072

7173
- [Image layer](map-add-image-layer.md) - overlays a single image on top of the map and binds its corners to a set of specified coordinates.
7274
- [Tile layer](map-add-tile-layer.md) - superimposes a raster tile layer on top of the map.
7375

7476
## One data source with multiple layers
7577

76-
Multiple layers can be connected to a single data source. This may sound odd, but there are many different scenarios where this becomes useful. Take, for example, the scenario of creating a polygon drawing experience. When letting a user draw a polygon, we should render the fill polygon area as the user is adding points to the map. Adding a styled line that outlines the polygon will make it easier see the edges of the polygon as it is being drawn. Finally adding some sort of handle, such as a pin or marker, above each position in the polygon would make it easier to edit each individual position. Here is an image that demonstrates this scenario.
78+
Multiple layers can be connected to a single data source. There are many different scenarios in which this option is useful. For example, consider the scenario in which a user draws a polygon. We should render and fill the polygon area as the user adds points to the map. Adding a styled line to outline the polygon makes it easier see the edges of the polygon, as the user draws. To conveniently edit an individual position in the polygon, we may add a handle, like a pin or a marker, above each position.
7779

7880
![Map showing multiple layers rendering data from a single data source](media/create-data-source-web-sdk/multiple-layers-one-datasource.png)
7981

80-
To accomplish this scenario in most mapping platforms you would need to create a polygon object, a line object, and pin for each position in the polygon. As the polygon is modified, you would need to manually update the line and pins, which can become complex quickly.
82+
In most mapping platforms, you would need a polygon object, a line object, and a pin for each position in the polygon. As the polygon is modified, you would need to manually update the line and pins, which can quickly become complex.
8183

82-
With Azure Maps all you need is a single polygon in a data source as shown in the code below.
84+
With Azure Maps, all you need is a single polygon in a data source as shown in the code below.
8385

8486
```javascript
8587
//Create a data source and add it to the map.

0 commit comments

Comments
 (0)