Skip to content

Commit a93a0b2

Browse files
rbrundrittrbrundritt
committed
Minor updates to spatial io docs
1 parent 16a7821 commit a93a0b2

6 files changed

+76
-83
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ manager: philmea
1414

1515
The `atlas.layer.OgcMapLayer` class can overlay Web Mapping Services (WMS) imagery and Web Mapping Tile Services (WMTS) imagery on the map. WMS is a standard protocol developed by OGC for serving georeferenced map images over the internet. Image georeferencing is the processes of associating an image to a geographical location. WMTS is also a standard protocol developed by OGC. It's designed for serving pre-rendered and georeferenced map tiles.
1616

17-
The following sections outline the Web Mapping Service features that are supported by the `OgcMapLayer` class.
17+
The following sections outline the web mapping service features that are supported by the `OgcMapLayer` class.
1818

1919
**Web Mapping Service (WMS)**
2020

‎articles/azure-maps/spatial-io-add-simple-data-layer.md

Lines changed: 51 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,56 @@ In addition to styling features, the `SimpleDataLayer` provides a built-in popup
1919

2020
The `SimpleDataLayer` class is intended to be used on large data sets with many geometry types and many styles applied on the features. When used, this class adds an overhead of six layers containing style expressions. So, there are cases when it's more efficient to use the core rendering layers. For example, use a core layer to render a couple of geometry types and a few styles on a feature
2121

22+
## Use a simple data layer
23+
24+
The `SimpleDataLayer` class is used like the other rendering layers are used. The code below shows how to use a simple data layer in a map:
25+
26+
```javascript
27+
//Create a data source and add it to the map.
28+
var datasource = new atlas.source.DataSource();
29+
map.sources.add(datasource);
30+
31+
//Add a simple data layer for rendering data.
32+
var layer = new atlas.layer.SimpleDataLayer(datasource);
33+
map.layers.add(layer);
34+
```
35+
36+
Add features to the data source. Then, the simple data layer will figure out how best to render the features. Styles for individual features can be set as properties on the feature. The following code shows a GeoJSON point feature with a `color` property set to `red`.
37+
38+
```json
39+
{
40+
"type": "Feature",
41+
"geometry": {
42+
"type": "Point",
43+
"coordinates": [0, 0]
44+
},
45+
"properties": {
46+
"color": "red"
47+
}
48+
}
49+
```
50+
51+
The following code renders the above point feature using the simple data layer.
52+
53+
<br/>
54+
55+
<iframe height="500" style="width: 100%;" scrolling="no" title="Use the Simple data layer" src="//codepen.io/azuremaps/embed/zYGzpQV/?height=500&theme-id=0&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/azuremaps/pen/zYGzpQV/'>Use the simple data layer</a> by Azure Maps (<a href='https://codepen.io/azuremaps'>@azuremaps</a>) on <a href='https://codepen.io'>CodePen</a>.
56+
</iframe>
57+
58+
The real power of the simple data layer comes when:
59+
60+
- There are several different types of features in a data source; or
61+
- Features in the data set have several style properties individually set on them; or
62+
- You're not sure what the data set exactly contains.
63+
64+
For example when parsing XML data feeds, you may not know the exact styles and geometry types of the features. The following sample shows the power of the simple data layer by rendering the features of a KML file. It also demonstrates various options that the simple data layer class provides.
65+
66+
<br/>
67+
68+
<iframe height="700" style="width: 100%;" scrolling="no" title="Simple data layer options" src="//codepen.io/azuremaps/embed/gOpRXgy/?height=700&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/azuremaps/pen/gOpRXgy/'>Simple data layer options</a> by Azure Maps (<a href='https://codepen.io/azuremaps'>@azuremaps</a>) on <a href='https://codepen.io'>CodePen</a>.
69+
</iframe>
70+
71+
2272
## Default supported style properties
2373

2474
As mentioned earlier, the simple data layer wraps several of the core rendering layers: bubble, symbol, line, polygon, and extruded polygon. It then uses expressions to search for valid style properties on individual features.
@@ -27,9 +77,7 @@ Azure Maps and GitHub style properties are the two main sets of supported proper
2777

2878
If the reader encounters a less common style property, it will convert it to the closest Azure Maps style property. Additionally, the default style expressions can be overridden by using the `getLayers` function of the simple data layer and updating the options on any of the layers.
2979

30-
The next section provides details on the default style properties that are supported by the simple data layer. 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, then the first one in the list has higher precedence.
31-
32-
## Simple data layer options
80+
The following section provide details on the default style properties that are supported by the simple data layer. 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, then the first one in the list has higher precedence.
3381

3482
### Bubble layer style properties
3583

@@ -110,56 +158,6 @@ If the feature is a `Polygon` or a `MultiPolygon`, and has a `height` property w
110158
| `fillColor` | `fillColor`, `fill` | `'#1E90FF'` |
111159
| `height` | `height` | `0` |
112160

113-
## Use a simple data layer
114-
115-
The `SimpleDataLayer` class is used like the other rendering layers are used. The code below shows how to use a simple data layer in a map:
116-
117-
```javascript
118-
//Create a data source and add it to the map.
119-
var datasource = new atlas.source.DataSource();
120-
map.sources.add(datasource);
121-
122-
//Add a simple data layer for rendering data.
123-
var layer = new atlas.layer.SimpleDataLayer(datasource);
124-
map.layers.add(layer);
125-
```
126-
127-
Add features to the data source. Then, the simple data layer will figure out how best to render the features. Styles for individual features can be set as properties on the feature. The following code shows a GeoJSON point feature with a `color` property set to `red`.
128-
129-
```json
130-
{
131-
"type": "Feature",
132-
"geometry": {
133-
"type": "Point",
134-
"coordinates": [0, 0]
135-
},
136-
"properties": {
137-
"color": "red"
138-
}
139-
}
140-
```
141-
142-
The following code renders the above point feature using the simple data layer.
143-
144-
<br/>
145-
146-
<iframe height="500" style="width: 100%;" scrolling="no" title="Use the Simple data layer" src="//codepen.io/azuremaps/embed/zYGzpQV/?height=500&theme-id=0&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/azuremaps/pen/zYGzpQV/'>Use the simple data layer</a> by Azure Maps (<a href='https://codepen.io/azuremaps'>@azuremaps</a>) on <a href='https://codepen.io'>CodePen</a>.
147-
</iframe>
148-
149-
The real power of the simple data layer comes when:
150-
151-
- There are several different types of features in a data source; or
152-
- Features in the data set have several style properties individually set on them; or
153-
- You're not sure what the data set exactly contains.
154-
155-
For example when parsing XML data feeds, you may not know the exact styles and geometry types of the features. The following sample shows the power of the simple data layer by rendering the features of a KML file. It also demonstrates various options that the simple data layer class provides.
156-
157-
<br/>
158-
159-
<iframe height="700" style="width: 100%;" scrolling="no" title="Simple data layer options" src="//codepen.io/azuremaps/embed/gOpRXgy/?height=700&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true"> See the Pen <a href='https://codepen.io/azuremaps/pen/gOpRXgy/'>Simple data layer options</a> by Azure Maps (<a href='https://codepen.io/azuremaps'>@azuremaps</a>) on <a href='https://codepen.io'>CodePen</a>.
160-
</iframe>
161-
162-
163161
## Next steps
164162

165163
Learn more about the classes and methods used in this article:

‎articles/azure-maps/spatial-io-connect-wfs-service.md

Lines changed: 2 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -89,32 +89,14 @@ The following code uses the WFS client to explore WFS services. Select a propert
8989
<iframe height='700' scrolling='no' title= 'WFS service explorer' src='//codepen.io/azuremaps/embed/bGdrvmG/?height=700&theme-id=0&default-tab=result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/azuremaps/pen/bGdrvmG/'>WFS service explorer</a> by Azure Maps (<a href='https://codepen.io/azuremaps'>@azuremaps</a>) on <a href='https://codepen.io'>CodePen</a>.
9090
</iframe>
9191

92-
You may also use a proxy service to load resources that are hosted on domains that aren't CORs enabled. You would first define a variable to hold the proxy service url and set the `proxyService` option for the WFS client. To render a proxy service option for the user, add a user input to the UI. Load the service url when the input is clicked. The following snippets show you how to use the proxy service.
92+
To access WFS services hosted on non-CORs enabled enpoints, a CORs enabled proxy service can be passed into the `proxyService` option of the WFS client as shown below.
9393

9494
```JavaScript
95-
96-
//A variable to hold the URL of the proxy service
97-
var proxyServiceUrl = window.location.origin + 'CorsEnabledProxyService.ashx?url=';
98-
9995
//Create the WFS client to access the service and use the proxy service settings
10096
client = new atlas.io.ogc.WfsClient({
10197
url: url,
102-
proxyService: (document.getElementById('useProxyService').checked) ? proxyServiceUrl : null
98+
proxyService: window.location.origin + '/YourCorsEnabledProxyService.ashx?url='
10399
});
104-
105-
function proxyOptionChanged() {
106-
if (currentServiceUrl) {
107-
loadClient(currentServiceUrl);
108-
}
109-
}
110-
111-
```
112-
113-
The HTML code snippet below corresponds to the above JavaScript code:
114-
115-
```html
116-
<!-- use the proxy service -->
117-
<input id="useProxyService" type="checkbox" onclick="proxyOptionChanged()"/>
118100
```
119101

120102
## Next steps

‎articles/azure-maps/spatial-io-core-operations.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,23 @@ By default, the reader will use the comma character as the delimiter. However, t
3333

3434
This reader also supports text qualifiers that are used to handle cells that contain the delimiter character. The quote (`'"'`) character is the default text qualifier, but it can be changed to any single character.
3535

36+
> [!NOTE]
37+
> The delimited reader and writer functionality interprets column names that contain forward slashes "/" as property paths. This allows for complex JSON objects to be flattened into a two-dimensional table. If this is not your intention, download the file outside of the reader and replace the forward slash character with the escaped hex code `&#x2F;` or html code `&#47;`.
38+
>
39+
> ```JavaScript
40+
> fetch('<URL to a delimited file to read>').then((response) => {
41+
> return response.text();
42+
> }).then((data) => {
43+
> //Replace all forward slash charcters with the escaped hex code "&#x2F;" or html code "&#47;"
44+
> data = data.replace(/\//g, '&#x2F;');
45+
>
46+
> //Pass the delimited data into the reader.
47+
> var csvTable = atlas.io.core.CsvReader.read(data);
48+
>
49+
> //Do something with the parsed data.
50+
> });
51+
> ```
52+
3653
## Write delimited files
3754
3855
The `atlas.io.core.CsvWriter` writes an array of objects as a delimited string. Any single character can be used as a delimiter or a text qualifier. The default delimiter is comma (`','`) and the default text qualifier is the quote (`'"'`) character.

‎articles/azure-maps/spatial-io-read-write-spatial-data.md

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -62,17 +62,13 @@ The next code demo shows how to read and load KML, or KMZ, to the map. KML can c
6262
<iframe height='500' scrolling='no' title='Load KML Onto Map' src='//codepen.io/azuremaps/embed/XWbgwxX/?height=500&theme-id=0&default-tab=js,result&embed-version=2&editable=true' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>See the Pen <a href='https://codepen.io/azuremaps/pen/XWbgwxX/'>Load KML Onto Map</a> by Azure Maps (<a href='https://codepen.io/azuremaps'>@azuremaps</a>) on <a href='https://codepen.io'>CodePen</a>.
6363
</iframe>
6464

65-
You may optionally provide a proxy service for accessing cross domain assets that may not have CORs enabled. This snippet of code shows you could provide a proxy service:
65+
You may optionally provide a proxy service for accessing cross domain assets that may not have CORs enabled. The read function will try to access files on another domain using CORs first. After the first time it fails to access any resource on another domain using CORs it will only request additional files if a proxy service has been provided. The read function appends the file URL to the end of the proxy URL provided. This snippet of code shows how to pass a proxy service into the read function:
6666

6767
```javascript
68-
69-
//Set the location of your proxyServiceUrl file
70-
var proxyServiceUrl = window.location.origin + '/CorsEnabledProxyService.ashx?url=';
71-
72-
//Read a KML file from a URL or pass in a raw KML string.
73-
atlas.io.read('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1717245/2007SanDiegoCountyFires.kml', {
68+
//Read a file from a URL or pass in a raw data as a string.
69+
atlas.io.read('https://nonCorsDomain.example.com/mySuperCoolData.xml', {
7470
//Provide a proxy service
75-
proxyService: proxyServiceUrl
71+
proxyService: window.location.origin + '/YourCorsEnabledProxyService.ashx?url='
7672
}).then(async r => {
7773
if (r) {
7874
// Some code goes here . . .

‎articles/azure-maps/spatial-io-supported-data-format-details.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -417,7 +417,7 @@ When scanning the header row, any type information that is in the column name wi
417417
- edm.string
418418
- varchar
419419
- text
420-
- case 'string
420+
- string
421421

422422
If no type information can be extracted from the header, and the dynamic typing option is enabled when reading, then each cell will be individually analyzed to determine what data type it is best suited to be cast as.
423423

0 commit comments

Comments
 (0)