Skip to content

Commit

Permalink
Update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@arnaudleclerc
arnaudleclerc committed Aug 4, 2021
1 parent 2ecd2fd commit d76a2f0
Show file tree
Hide file tree
Showing 6 changed files with 187 additions and 113 deletions.
67 changes: 44 additions & 23 deletions docs/layers/bubblelayer/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,45 +7,66 @@ Bubble layers render points as circles on the map with a fixed pixel radius.
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.

```
@page "/BubbleLayerOnReady"
@page "/Layers/BubbleLayerOnReady"
@using AzureMapsControl.Components.Map
<AzureMap Id="map"
CameraOptions="new CameraOptions { Zoom = 2 }"
EventActivationFlags="MapEventActivationFlags
.None()
.Enable(MapEventType.Ready)"
OnReady="OnMapReady" />
.Enable(MapEventType.Ready, MapEventType.SourceAdded)"
OnReady="OnMapReady"
OnSourceAdded="OnDatasourceAdded" />
@code {
public async Task OnMapReady(MapEventArgs events)
{
const string dataSourceId = "bubbleDataSource";
var dataSource = new AzureMapsControl.Components.Data.DataSource(dataSourceId);
await events.Map.AddSourceAsync(dataSource);
private readonly string _datasourceId = "bubbleDataSource";
var geometries = new List<AzureMapsControl.Components.Atlas.Shape>();
for (var i = 0; i < 10; i++)
public async Task OnMapReady(MapEventArgs eventArgs)
{
var dataSource = new AzureMapsControl.Components.Data.DataSource(_datasourceId)
{
geometries.Add(new AzureMapsControl.Components.Atlas.Shape<AzureMapsControl.Components.Atlas.Point>(new AzureMapsControl.Components.Atlas.Point(new Components.Atlas.Position(i * 5, i * 5))));
}
EventActivationFlags = Components.Data.DataSourceEventActivationFlags.None()
};
await eventArgs.Map.AddSourceAsync(dataSource);
await dataSource.AddAsync(geometries);
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]}}]}";
await dataSource.AddAsync(System.Text.Json.JsonDocument.Parse(json));
}
var layer = new AzureMapsControl.Components.Layers.BubbleLayer
public async Task OnDatasourceAdded(MapSourceEventArgs eventArgs)
{
if (eventArgs.Source.Id == _datasourceId)
{
Options = new Components.Layers.BubbleLayerOptions
var layer = new AzureMapsControl.Components.Layers.BubbleLayer
{
Color = new Components.Atlas.ExpressionOrString("white"),
Radius = new Components.Atlas.ExpressionOrNumber(5),
StrokeColor = new Components.Atlas.ExpressionOrString("#4288f7"),
StrokeWidth = new Components.Atlas.ExpressionOrNumber(6),
Source = dataSourceId
}
};
Options = new Components.Layers.BubbleLayerOptions
{
Color = new Components.Atlas.ExpressionOrString("white"),
Radius = new Components.Atlas.ExpressionOrNumber(5),
StrokeColor = new Components.Atlas.ExpressionOrString("#4288f7"),
StrokeWidth = new Components.Atlas.ExpressionOrNumber(6),
Source = _datasourceId
},
EventActivationFlags = Components.Layers.LayerEventActivationFlags.None().Enable(Components.Layers.LayerEventType.MouseEnter, Components.Layers.LayerEventType.MouseLeave)
};
layer.OnMouseEnter += async _ =>
{
await eventArgs.Map.SetCanvasContainerStylePropertiesAsync(new Dictionary<string, string> {
{ "cursor", "pointer" }
});
};
await events.Map.AddLayerAsync(layer);
layer.OnMouseLeave += async _ =>
{
await eventArgs.Map.SetCanvasContainerStylePropertiesAsync(new Dictionary<string, string> {
{ "cursor", "grab" }
});
};
await eventArgs.Map.AddLayerAsync(layer);
}
}
}
```
23 changes: 14 additions & 9 deletions docs/layers/heatmaplayer/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,31 +7,36 @@ Heat maps, also known as point density maps, are a type of data visualization. T
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.

```
@page "/HeatmapLayerOnReady"
@page "/Layers/HeatmapLayerOnReady"
@using AzureMapsControl.Components.Map
<AzureMap Id="map"
CameraOptions="new CameraOptions { Zoom = 2 }"
StyleOptions="StyleOptions"
EventActivationFlags="MapEventActivationFlags
.None()
.Enable(MapEventType.Ready)"
OnReady="OnMapReady" />
.Enable(MapEventType.Ready, MapEventType.SourceAdded)"
OnReady="OnMapReady"
OnSourceAdded="OnDatasourceAdded"/>
@code {
private readonly string _datasourceId = "heatmapDataSource";
public StyleOptions StyleOptions = new StyleOptions
{
Style = MapStyle.GrayscaleDark
};
public async Task OnMapReady(MapEventArgs events)
public async Task OnMapReady(MapEventArgs eventArgs)
{
const string dataSourceId = "heatmapDataSource";
var dataSource = new AzureMapsControl.Components.Data.DataSource(dataSourceId);
await events.Map.AddSourceAsync(dataSource);
var dataSource = new AzureMapsControl.Components.Data.DataSource(_datasourceId);
await eventArgs.Map.AddSourceAsync(dataSource);
await dataSource.ImportDataFromUrlAsync("https://services1.arcgis.com/0MSEUqKaxRlEPj5g/arcgis/rest/services/ncov_cases/FeatureServer/1/query?where=1%3D1&f=geojson&outFields=*");
}
public async Task OnDatasourceAdded(MapSourceEventArgs eventArgs)
{
var weightExpressionJsonString = "[\"get\", \"Confirmed\"]";
var layer = new AzureMapsControl.Components.Layers.HeatmapLayer
Expand All @@ -40,11 +45,11 @@ The `Heatmap Layer` requires a data source. The ID of the datasource to bind to
{
Weight = new Components.Atlas.ExpressionOrNumber(System.Text.Json.JsonDocument.Parse(weightExpressionJsonString)),
Radius = new Components.Atlas.ExpressionOrNumber(20),
Source = dataSourceId
Source = _datasourceId
}
};
await events.Map.AddLayerAsync(layer);
await eventArgs.Map.AddLayerAsync(layer);
}
}
```
71 changes: 34 additions & 37 deletions docs/layers/linelayer/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,35 +5,38 @@ A line layer can be used to render `LineString` and `MultiLineString` features a
![Line Layer](../../assets/linelayer.png)

```
@page "/LineLayerOnReady"
@page "/Layers/LineLayerOnReady"
@using AzureMapsControl.Components.Map
<AzureMap Id="map"
CameraOptions="new CameraOptions { Center = new Components.Atlas.Position(11.581990, 48.143534), Zoom = 14 }"
StyleOptions="StyleOptions"
EventActivationFlags="MapEventActivationFlags
.None()
.Enable(MapEventType.Ready)"
OnReady="OnMapReady" />
.Enable(MapEventType.Ready, MapEventType.SourceAdded)"
OnReady="OnMapReady"
OnSourceAdded="OnDatasourceAdded"/>
@code {
private readonly string _dataSourceId = "dataSource";
public StyleOptions StyleOptions = new StyleOptions
{
Style = MapStyle.GrayscaleDark
};
public async Task OnMapReady(MapEventArgs events)
public async Task OnMapReady(MapEventArgs eventArgs)
{
const string dataSourceId = "dataSource";
var dataSource = new AzureMapsControl.Components.Data.DataSource(dataSourceId)
var dataSource = new AzureMapsControl.Components.Data.DataSource(_dataSourceId)
{
Options = new Components.Data.DataSourceOptions
{
LineMetrics = true
}
};
await events.Map.AddSourceAsync(dataSource);
await eventArgs.Map.AddSourceAsync(dataSource);
await dataSource.AddAsync(new AzureMapsControl.Components.Atlas.Shape<AzureMapsControl.Components.Atlas.LineString>(
new AzureMapsControl.Components.Atlas.LineString(new[] {
Expand All @@ -47,7 +50,15 @@ A line layer can be used to render `LineString` and `MultiLineString` features a
new AzureMapsControl.Components.Atlas.Position(11.581155, 48.141852),
new AzureMapsControl.Components.Atlas.Position(11.581990, 48.143534),
new AzureMapsControl.Components.Atlas.Position(11.583355, 48.143896),
new AzureMapsControl.Components.Atlas.Position(11.583662, 48.144258),
new AzureMapsControl.Components.Atlas.Position(11.583662, 48.144258)
}),
new Dictionary<string, object>()
{
{ "Color", "#00FF00" }
}));
await dataSource.AddAsync(new AzureMapsControl.Components.Atlas.Shape<AzureMapsControl.Components.Atlas.LineString>(
new AzureMapsControl.Components.Atlas.LineString(new[] {
new AzureMapsControl.Components.Atlas.Position(11.585458, 48.145596),
new AzureMapsControl.Components.Atlas.Position(11.587910, 48.145779),
new AzureMapsControl.Components.Atlas.Position(11.589632, 48.146608),
Expand All @@ -58,45 +69,31 @@ A line layer can be used to render `LineString` and `MultiLineString` features a
new AzureMapsControl.Components.Atlas.Position(11.593594, 48.151084),
new AzureMapsControl.Components.Atlas.Position(11.594028, 48.151803),
new AzureMapsControl.Components.Atlas.Position(11.592281, 48.152074)
})));
}),
new Dictionary<string, object>()
{
{ "Color", "#FF0000" }
}));
}
public async Task OnDatasourceAdded(MapSourceEventArgs eventArgs)
{
var layer = new AzureMapsControl.Components.Layers.LineLayer
{
Options = new Components.Layers.LineLayerOptions
Options = new AzureMapsControl.Components.Layers.LineLayerOptions
{
Source = dataSourceId,
StrokeWidth = new Components.Atlas.ExpressionOrNumber(6),
StrokeGradient = new Components.Atlas.Expression(
Source = _dataSourceId,
StrokeWidth = new AzureMapsControl.Components.Atlas.ExpressionOrNumber(6),
StrokeColor = new AzureMapsControl.Components.Atlas.ExpressionOrString(
new AzureMapsControl.Components.Atlas.Expression[]
{
new AzureMapsControl.Components.Atlas.ExpressionOrString("interpolate"),
new Components.Atlas.Expression(
new AzureMapsControl.Components.Atlas.Expression[]
{
new AzureMapsControl.Components.Atlas.ExpressionOrString("linear")
}),
new Components.Atlas.Expression(
new AzureMapsControl.Components.Atlas.Expression[]
{
new AzureMapsControl.Components.Atlas.ExpressionOrString("line-progress")
}),
new AzureMapsControl.Components.Atlas.ExpressionOrNumber(0),
new AzureMapsControl.Components.Atlas.ExpressionOrString("blue"),
new AzureMapsControl.Components.Atlas.ExpressionOrNumber(0.1),
new AzureMapsControl.Components.Atlas.ExpressionOrString("royalBlue"),
new AzureMapsControl.Components.Atlas.ExpressionOrNumber(0.3),
new AzureMapsControl.Components.Atlas.ExpressionOrString("cyan"),
new AzureMapsControl.Components.Atlas.ExpressionOrNumber(0.5),
new AzureMapsControl.Components.Atlas.ExpressionOrString("lime"),
new AzureMapsControl.Components.Atlas.ExpressionOrNumber(0.7),
new AzureMapsControl.Components.Atlas.ExpressionOrString("yellow"),
new AzureMapsControl.Components.Atlas.ExpressionOrNumber(1),
new AzureMapsControl.Components.Atlas.ExpressionOrString("red"),
new AzureMapsControl.Components.Atlas.ExpressionOrString("get"),
new AzureMapsControl.Components.Atlas.ExpressionOrString("Color")
})
}
};
await events.Map.AddLayerAsync(layer);
await eventArgs.Map.AddLayerAsync(layer);
}
}
```
24 changes: 15 additions & 9 deletions docs/layers/polygonextrusionlayer/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,33 +5,39 @@ The polygon extrusion layer renders areas of `Polygon` and `MultiPolygon` featur
![Polygon Extrusion Layer](../../assets/polygonextrusionlayer.png)

```
@page "/PolygonExtrusionLayerOnReady"
@page "/Layers/PolygonExtrusionLayerOnReady"
@using AzureMapsControl.Components.Map
<AzureMap Id="map"
CameraOptions="new CameraOptions { Center = new Components.Atlas.Position(11.581990, 48.143534), Zoom = 4, Pitch = 45 }"
EventActivationFlags="MapEventActivationFlags
.None()
.Enable(MapEventType.Ready)"
OnReady="OnMapReady" />
.Enable(MapEventType.Ready, MapEventType.SourceAdded)"
OnReady="OnMapReady"
OnSourceAdded="OnDatasourceAdded"/>
@code {
public async Task OnMapReady(MapEventArgs events)
private readonly string _datasourceId = "dataSource";
public async Task OnMapReady(MapEventArgs eventArgs)
{
const string dataSourceId = "dataSource";
var dataSource = new AzureMapsControl.Components.Data.DataSource(dataSourceId);
await events.Map.AddSourceAsync(dataSource);
var dataSource = new AzureMapsControl.Components.Data.DataSource(_datasourceId);
await eventArgs.Map.AddSourceAsync(dataSource);
await dataSource.ImportDataFromUrlAsync("https://raw.githubusercontent.com/arnaudleclerc/ng-azure-maps/main/assets/data/countries.geojson.json");
}
public async Task OnDatasourceAdded(MapSourceEventArgs eventArgs)
{
var fillColorExpressionJsonString = "[\"step\", [\"get\", \"DENSITY\"], \"#00ff80\", 10, \"#09e076\", 20, \"#0bbf67\", 50, \"#f7e305\", 100, \"#f7c707\", 200, \"#f78205\", 500, \"#f75e05\", 1000, \"#f72505\", 10000, \"#6b0a05\"]";
var heightExpressionJsonString = "[\"interpolate\", [\"linear\"], [\"get\", \"DENSITY\"], 0, 100, 1200, 960000]";
var layer = new AzureMapsControl.Components.Layers.PolygonExtrusionLayer
{
Options = new Components.Layers.PolygonExtrusionLayerOptions
{
Source = dataSourceId,
Source = _datasourceId,
Base = new Components.Atlas.ExpressionOrNumber(100),
FillColor = new Components.Atlas.ExpressionOrString(System.Text.Json.JsonDocument.Parse(fillColorExpressionJsonString)),
FillOpacity = 0.7,
Expand All @@ -40,7 +46,7 @@ The polygon extrusion layer renders areas of `Polygon` and `MultiPolygon` featur
};
await events.Map.AddLayerAsync(layer, "labels");
await eventArgs.Map.AddLayerAsync(layer, "labels");
}
}
```
Loading

0 comments on commit d76a2f0

Please sign in to comment.