Skip to content

Commit d76a2f0

Browse files
arnaudleclercarnaudleclerc
committed
Update docs
1 parent 2ecd2fd commit d76a2f0

6 files changed

Lines changed: 187 additions & 113 deletions

File tree

‎docs/layers/bubblelayer/README.md‎

Lines changed: 44 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -7,45 +7,66 @@ Bubble layers render points as circles on the map with a fixed pixel radius.
77
The `Bubble Layer` requires a data source. The ID of the datasource to bind to the layer can be set on the `Source` property of the options of the layer.
88

99
```
10-
@page "/BubbleLayerOnReady"
10+
@page "/Layers/BubbleLayerOnReady"
1111
1212
@using AzureMapsControl.Components.Map
1313
<AzureMap Id="map"
1414
CameraOptions="new CameraOptions { Zoom = 2 }"
1515
EventActivationFlags="MapEventActivationFlags
1616
.None()
17-
.Enable(MapEventType.Ready)"
18-
OnReady="OnMapReady" />
17+
.Enable(MapEventType.Ready, MapEventType.SourceAdded)"
18+
OnReady="OnMapReady"
19+
OnSourceAdded="OnDatasourceAdded" />
1920
2021
@code {
21-
public async Task OnMapReady(MapEventArgs events)
22-
{
23-
const string dataSourceId = "bubbleDataSource";
24-
var dataSource = new AzureMapsControl.Components.Data.DataSource(dataSourceId);
25-
await events.Map.AddSourceAsync(dataSource);
2622
23+
private readonly string _datasourceId = "bubbleDataSource";
2724
28-
var geometries = new List<AzureMapsControl.Components.Atlas.Shape>();
29-
for (var i = 0; i < 10; i++)
25+
public async Task OnMapReady(MapEventArgs eventArgs)
26+
{
27+
var dataSource = new AzureMapsControl.Components.Data.DataSource(_datasourceId)
3028
{
31-
geometries.Add(new AzureMapsControl.Components.Atlas.Shape<AzureMapsControl.Components.Atlas.Point>(new AzureMapsControl.Components.Atlas.Point(new Components.Atlas.Position(i * 5, i * 5))));
32-
}
29+
EventActivationFlags = Components.Data.DataSourceEventActivationFlags.None()
30+
};
31+
await eventArgs.Map.AddSourceAsync(dataSource);
3332
34-
await dataSource.AddAsync(geometries);
33+
var json = "{\"type\":\"FeatureCollection\",\"features\":[{\"type\":\"Feature\",\"properties\":{\"_azureMapsShapeId\":\"57fd117c-abac-4985-9ead-36168c0e359e\"},\"id\":\"57fd117c-abac-4985-9ead-36168c0e359e\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[0,0]}},{\"type\":\"Feature\",\"properties\":{\"_azureMapsShapeId\":\"01ebb77e-18e6-4dfa-8c77-db3c4fd7408a\"},\"id\":\"01ebb77e-18e6-4dfa-8c77-db3c4fd7408a\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[5,5]}},{\"type\":\"Feature\",\"properties\":{\"_azureMapsShapeId\":\"a388ff48-c5f4-4cb5-a9ab-604ae08c1564\"},\"id\":\"a388ff48-c5f4-4cb5-a9ab-604ae08c1564\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[10,10]}},{\"type\":\"Feature\",\"properties\":{\"_azureMapsShapeId\":\"12b2f8f9-47bf-4c90-92ac-e82fb5e8f64b\"},\"id\":\"12b2f8f9-47bf-4c90-92ac-e82fb5e8f64b\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[15,15]}},{\"type\":\"Feature\",\"properties\":{\"_azureMapsShapeId\":\"19c81734-50d5-4d23-b57d-58d3da7746e2\"},\"id\":\"19c81734-50d5-4d23-b57d-58d3da7746e2\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[20,20]}},{\"type\":\"Feature\",\"properties\":{\"_azureMapsShapeId\":\"88852e6d-b105-483e-a88a-98ec536b10ca\"},\"id\":\"88852e6d-b105-483e-a88a-98ec536b10ca\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[25,25]}},{\"type\":\"Feature\",\"properties\":{\"_azureMapsShapeId\":\"c8bec3fb-e6ea-4297-b386-c328d277639c\"},\"id\":\"c8bec3fb-e6ea-4297-b386-c328d277639c\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[30,30]}},{\"type\":\"Feature\",\"properties\":{\"_azureMapsShapeId\":\"591fab80-bc14-4efd-b20d-5be29cf9769d\"},\"id\":\"591fab80-bc14-4efd-b20d-5be29cf9769d\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[35,35]}},{\"type\":\"Feature\",\"properties\":{\"_azureMapsShapeId\":\"0bdcddbd-c895-4356-b3b3-c3330003b28c\"},\"id\":\"0bdcddbd-c895-4356-b3b3-c3330003b28c\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[40,40]}},{\"type\":\"Feature\",\"properties\":{\"_azureMapsShapeId\":\"e63f463b-3605-4847-8ea3-2948187f601d\"},\"id\":\"e63f463b-3605-4847-8ea3-2948187f601d\",\"geometry\":{\"type\":\"Point\",\"coordinates\":[45,45]}}]}";
34+
await dataSource.AddAsync(System.Text.Json.JsonDocument.Parse(json));
35+
}
3536
36-
var layer = new AzureMapsControl.Components.Layers.BubbleLayer
37+
public async Task OnDatasourceAdded(MapSourceEventArgs eventArgs)
38+
{
39+
if (eventArgs.Source.Id == _datasourceId)
3740
{
38-
Options = new Components.Layers.BubbleLayerOptions
41+
var layer = new AzureMapsControl.Components.Layers.BubbleLayer
3942
{
40-
Color = new Components.Atlas.ExpressionOrString("white"),
41-
Radius = new Components.Atlas.ExpressionOrNumber(5),
42-
StrokeColor = new Components.Atlas.ExpressionOrString("#4288f7"),
43-
StrokeWidth = new Components.Atlas.ExpressionOrNumber(6),
44-
Source = dataSourceId
45-
}
46-
};
43+
Options = new Components.Layers.BubbleLayerOptions
44+
{
45+
Color = new Components.Atlas.ExpressionOrString("white"),
46+
Radius = new Components.Atlas.ExpressionOrNumber(5),
47+
StrokeColor = new Components.Atlas.ExpressionOrString("#4288f7"),
48+
StrokeWidth = new Components.Atlas.ExpressionOrNumber(6),
49+
Source = _datasourceId
50+
},
51+
EventActivationFlags = Components.Layers.LayerEventActivationFlags.None().Enable(Components.Layers.LayerEventType.MouseEnter, Components.Layers.LayerEventType.MouseLeave)
52+
};
53+
54+
layer.OnMouseEnter += async _ =>
55+
{
56+
await eventArgs.Map.SetCanvasContainerStylePropertiesAsync(new Dictionary<string, string> {
57+
{ "cursor", "pointer" }
58+
});
59+
};
4760
48-
await events.Map.AddLayerAsync(layer);
61+
layer.OnMouseLeave += async _ =>
62+
{
63+
await eventArgs.Map.SetCanvasContainerStylePropertiesAsync(new Dictionary<string, string> {
64+
{ "cursor", "grab" }
65+
});
66+
};
67+
68+
await eventArgs.Map.AddLayerAsync(layer);
69+
}
4970
}
5071
}
5172
```

‎docs/layers/heatmaplayer/README.md‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,31 +7,36 @@ Heat maps, also known as point density maps, are a type of data visualization. T
77
The `Heatmap Layer` requires a data source. The ID of the datasource to bind to the layer can be set on the `Source` property of the options of the layer.
88

99
```
10-
@page "/HeatmapLayerOnReady"
10+
@page "/Layers/HeatmapLayerOnReady"
1111
1212
@using AzureMapsControl.Components.Map
1313
<AzureMap Id="map"
1414
CameraOptions="new CameraOptions { Zoom = 2 }"
1515
StyleOptions="StyleOptions"
1616
EventActivationFlags="MapEventActivationFlags
1717
.None()
18-
.Enable(MapEventType.Ready)"
19-
OnReady="OnMapReady" />
18+
.Enable(MapEventType.Ready, MapEventType.SourceAdded)"
19+
OnReady="OnMapReady"
20+
OnSourceAdded="OnDatasourceAdded"/>
2021
2122
@code {
2223
24+
private readonly string _datasourceId = "heatmapDataSource";
25+
2326
public StyleOptions StyleOptions = new StyleOptions
2427
{
2528
Style = MapStyle.GrayscaleDark
2629
};
2730
28-
public async Task OnMapReady(MapEventArgs events)
31+
public async Task OnMapReady(MapEventArgs eventArgs)
2932
{
30-
const string dataSourceId = "heatmapDataSource";
31-
var dataSource = new AzureMapsControl.Components.Data.DataSource(dataSourceId);
32-
await events.Map.AddSourceAsync(dataSource);
33+
var dataSource = new AzureMapsControl.Components.Data.DataSource(_datasourceId);
34+
await eventArgs.Map.AddSourceAsync(dataSource);
3335
await dataSource.ImportDataFromUrlAsync("https://services1.arcgis.com/0MSEUqKaxRlEPj5g/arcgis/rest/services/ncov_cases/FeatureServer/1/query?where=1%3D1&f=geojson&outFields=*");
36+
}
3437
38+
public async Task OnDatasourceAdded(MapSourceEventArgs eventArgs)
39+
{
3540
var weightExpressionJsonString = "[\"get\", \"Confirmed\"]";
3641
3742
var layer = new AzureMapsControl.Components.Layers.HeatmapLayer
@@ -40,11 +45,11 @@ The `Heatmap Layer` requires a data source. The ID of the datasource to bind to
4045
{
4146
Weight = new Components.Atlas.ExpressionOrNumber(System.Text.Json.JsonDocument.Parse(weightExpressionJsonString)),
4247
Radius = new Components.Atlas.ExpressionOrNumber(20),
43-
Source = dataSourceId
48+
Source = _datasourceId
4449
}
4550
};
4651
47-
await events.Map.AddLayerAsync(layer);
52+
await eventArgs.Map.AddLayerAsync(layer);
4853
}
4954
}
5055
```

‎docs/layers/linelayer/README.md‎

Lines changed: 34 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -5,35 +5,38 @@ A line layer can be used to render `LineString` and `MultiLineString` features a
55
![Line Layer](../../assets/linelayer.png)
66

77
```
8-
@page "/LineLayerOnReady"
8+
@page "/Layers/LineLayerOnReady"
99
1010
@using AzureMapsControl.Components.Map
1111
<AzureMap Id="map"
1212
CameraOptions="new CameraOptions { Center = new Components.Atlas.Position(11.581990, 48.143534), Zoom = 14 }"
1313
StyleOptions="StyleOptions"
1414
EventActivationFlags="MapEventActivationFlags
1515
.None()
16-
.Enable(MapEventType.Ready)"
17-
OnReady="OnMapReady" />
16+
.Enable(MapEventType.Ready, MapEventType.SourceAdded)"
17+
OnReady="OnMapReady"
18+
OnSourceAdded="OnDatasourceAdded"/>
1819
1920
@code {
2021
22+
private readonly string _dataSourceId = "dataSource";
23+
24+
2125
public StyleOptions StyleOptions = new StyleOptions
2226
{
2327
Style = MapStyle.GrayscaleDark
2428
};
2529
26-
public async Task OnMapReady(MapEventArgs events)
30+
public async Task OnMapReady(MapEventArgs eventArgs)
2731
{
28-
const string dataSourceId = "dataSource";
29-
var dataSource = new AzureMapsControl.Components.Data.DataSource(dataSourceId)
32+
var dataSource = new AzureMapsControl.Components.Data.DataSource(_dataSourceId)
3033
{
3134
Options = new Components.Data.DataSourceOptions
3235
{
3336
LineMetrics = true
3437
}
3538
};
36-
await events.Map.AddSourceAsync(dataSource);
39+
await eventArgs.Map.AddSourceAsync(dataSource);
3740
3841
await dataSource.AddAsync(new AzureMapsControl.Components.Atlas.Shape<AzureMapsControl.Components.Atlas.LineString>(
3942
new AzureMapsControl.Components.Atlas.LineString(new[] {
@@ -47,7 +50,15 @@ A line layer can be used to render `LineString` and `MultiLineString` features a
4750
new AzureMapsControl.Components.Atlas.Position(11.581155, 48.141852),
4851
new AzureMapsControl.Components.Atlas.Position(11.581990, 48.143534),
4952
new AzureMapsControl.Components.Atlas.Position(11.583355, 48.143896),
50-
new AzureMapsControl.Components.Atlas.Position(11.583662, 48.144258),
53+
new AzureMapsControl.Components.Atlas.Position(11.583662, 48.144258)
54+
}),
55+
new Dictionary<string, object>()
56+
{
57+
{ "Color", "#00FF00" }
58+
}));
59+
60+
await dataSource.AddAsync(new AzureMapsControl.Components.Atlas.Shape<AzureMapsControl.Components.Atlas.LineString>(
61+
new AzureMapsControl.Components.Atlas.LineString(new[] {
5162
new AzureMapsControl.Components.Atlas.Position(11.585458, 48.145596),
5263
new AzureMapsControl.Components.Atlas.Position(11.587910, 48.145779),
5364
new AzureMapsControl.Components.Atlas.Position(11.589632, 48.146608),
@@ -58,45 +69,31 @@ A line layer can be used to render `LineString` and `MultiLineString` features a
5869
new AzureMapsControl.Components.Atlas.Position(11.593594, 48.151084),
5970
new AzureMapsControl.Components.Atlas.Position(11.594028, 48.151803),
6071
new AzureMapsControl.Components.Atlas.Position(11.592281, 48.152074)
61-
})));
72+
}),
73+
new Dictionary<string, object>()
74+
{
75+
{ "Color", "#FF0000" }
76+
}));
77+
}
6278
79+
public async Task OnDatasourceAdded(MapSourceEventArgs eventArgs)
80+
{
6381
var layer = new AzureMapsControl.Components.Layers.LineLayer
6482
{
65-
Options = new Components.Layers.LineLayerOptions
83+
Options = new AzureMapsControl.Components.Layers.LineLayerOptions
6684
{
67-
Source = dataSourceId,
68-
StrokeWidth = new Components.Atlas.ExpressionOrNumber(6),
69-
StrokeGradient = new Components.Atlas.Expression(
85+
Source = _dataSourceId,
86+
StrokeWidth = new AzureMapsControl.Components.Atlas.ExpressionOrNumber(6),
87+
StrokeColor = new AzureMapsControl.Components.Atlas.ExpressionOrString(
7088
new AzureMapsControl.Components.Atlas.Expression[]
7189
{
72-
new AzureMapsControl.Components.Atlas.ExpressionOrString("interpolate"),
73-
new Components.Atlas.Expression(
74-
new AzureMapsControl.Components.Atlas.Expression[]
75-
{
76-
new AzureMapsControl.Components.Atlas.ExpressionOrString("linear")
77-
}),
78-
new Components.Atlas.Expression(
79-
new AzureMapsControl.Components.Atlas.Expression[]
80-
{
81-
new AzureMapsControl.Components.Atlas.ExpressionOrString("line-progress")
82-
}),
83-
new AzureMapsControl.Components.Atlas.ExpressionOrNumber(0),
84-
new AzureMapsControl.Components.Atlas.ExpressionOrString("blue"),
85-
new AzureMapsControl.Components.Atlas.ExpressionOrNumber(0.1),
86-
new AzureMapsControl.Components.Atlas.ExpressionOrString("royalBlue"),
87-
new AzureMapsControl.Components.Atlas.ExpressionOrNumber(0.3),
88-
new AzureMapsControl.Components.Atlas.ExpressionOrString("cyan"),
89-
new AzureMapsControl.Components.Atlas.ExpressionOrNumber(0.5),
90-
new AzureMapsControl.Components.Atlas.ExpressionOrString("lime"),
91-
new AzureMapsControl.Components.Atlas.ExpressionOrNumber(0.7),
92-
new AzureMapsControl.Components.Atlas.ExpressionOrString("yellow"),
93-
new AzureMapsControl.Components.Atlas.ExpressionOrNumber(1),
94-
new AzureMapsControl.Components.Atlas.ExpressionOrString("red"),
90+
new AzureMapsControl.Components.Atlas.ExpressionOrString("get"),
91+
new AzureMapsControl.Components.Atlas.ExpressionOrString("Color")
9592
})
9693
}
9794
};
9895
99-
await events.Map.AddLayerAsync(layer);
96+
await eventArgs.Map.AddLayerAsync(layer);
10097
}
10198
}
10299
```

‎docs/layers/polygonextrusionlayer/README.md‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,33 +5,39 @@ The polygon extrusion layer renders areas of `Polygon` and `MultiPolygon` featur
55
![Polygon Extrusion Layer](../../assets/polygonextrusionlayer.png)
66

77
```
8-
@page "/PolygonExtrusionLayerOnReady"
8+
@page "/Layers/PolygonExtrusionLayerOnReady"
99
1010
@using AzureMapsControl.Components.Map
1111
<AzureMap Id="map"
1212
CameraOptions="new CameraOptions { Center = new Components.Atlas.Position(11.581990, 48.143534), Zoom = 4, Pitch = 45 }"
1313
EventActivationFlags="MapEventActivationFlags
1414
.None()
15-
.Enable(MapEventType.Ready)"
16-
OnReady="OnMapReady" />
15+
.Enable(MapEventType.Ready, MapEventType.SourceAdded)"
16+
OnReady="OnMapReady"
17+
OnSourceAdded="OnDatasourceAdded"/>
1718
1819
@code {
19-
public async Task OnMapReady(MapEventArgs events)
20+
21+
private readonly string _datasourceId = "dataSource";
22+
23+
public async Task OnMapReady(MapEventArgs eventArgs)
2024
{
21-
const string dataSourceId = "dataSource";
22-
var dataSource = new AzureMapsControl.Components.Data.DataSource(dataSourceId);
23-
await events.Map.AddSourceAsync(dataSource);
25+
var dataSource = new AzureMapsControl.Components.Data.DataSource(_datasourceId);
26+
await eventArgs.Map.AddSourceAsync(dataSource);
2427
2528
await dataSource.ImportDataFromUrlAsync("https://raw.githubusercontent.com/arnaudleclerc/ng-azure-maps/main/assets/data/countries.geojson.json");
29+
}
2630
31+
public async Task OnDatasourceAdded(MapSourceEventArgs eventArgs)
32+
{
2733
var fillColorExpressionJsonString = "[\"step\", [\"get\", \"DENSITY\"], \"#00ff80\", 10, \"#09e076\", 20, \"#0bbf67\", 50, \"#f7e305\", 100, \"#f7c707\", 200, \"#f78205\", 500, \"#f75e05\", 1000, \"#f72505\", 10000, \"#6b0a05\"]";
2834
var heightExpressionJsonString = "[\"interpolate\", [\"linear\"], [\"get\", \"DENSITY\"], 0, 100, 1200, 960000]";
2935
3036
var layer = new AzureMapsControl.Components.Layers.PolygonExtrusionLayer
3137
{
3238
Options = new Components.Layers.PolygonExtrusionLayerOptions
3339
{
34-
Source = dataSourceId,
40+
Source = _datasourceId,
3541
Base = new Components.Atlas.ExpressionOrNumber(100),
3642
FillColor = new Components.Atlas.ExpressionOrString(System.Text.Json.JsonDocument.Parse(fillColorExpressionJsonString)),
3743
FillOpacity = 0.7,
@@ -40,7 +46,7 @@ The polygon extrusion layer renders areas of `Polygon` and `MultiPolygon` featur
4046
};
4147
4248
43-
await events.Map.AddLayerAsync(layer, "labels");
49+
await eventArgs.Map.AddLayerAsync(layer, "labels");
4450
}
4551
}
4652
```

0 commit comments

Comments
 (0)