Skip to content

Commit

Permalink
Reworking way of setting the options on the map
Browse files Browse the repository at this point in the history 
* Adding SetStyleOptionsAsync on map

* Adding SetUserInteractionAsync on Map

* Adding SetTrafficAsync on Map

* Reworking CameraOptions binding on map

* Reworking StyleOptions bindings on map

* Reworking UserInteractionOptions bindings on map

* Reworking ServiceOptions

* Updating docs
  • Loading branch information
@arnaudleclerc
arnaudleclerc authored Nov 23, 2020
1 parent 39cfdd3 commit daad648
Show file tree
Hide file tree
Showing 45 changed files with 770 additions and 421 deletions.
6 changes: 2 additions & 4 deletions docs/layers/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,7 @@ Layers can be added to the map after the `MapReady` event has been triggered by
@using AzureMapsControl.Components.Map
<AzureMap Id="map"
Center="new Components.Atlas.Position(-99.47, 40.75)"
Zoom="4"
CameraOptions="new CameraOptions { Center = new Components.Atlas.Position(-99.47, 40.75), Zoom = 4}"
EventActivationFlags="MapEventActivationFlags
.None()
.Enable(MapEventType.Ready)"
Expand Down Expand Up @@ -64,8 +63,7 @@ Layers can be removed by calling the `RemoveLayersAsync` method on the map and p
@using AzureMapsControl.Components.Map
<AzureMap Id="map"
Center="new Components.Atlas.Position(-99.47, 40.75)"
Zoom="4"
CameraOptions="new CameraOptions { Center = new Components.Atlas.Position(-99.47, 40.75), Zoom = 4 } "
EventActivationFlags="MapEventActivationFlags
.None()
.Enable(MapEventType.Ready)"
Expand Down
2 changes: 1 addition & 1 deletion docs/layers/bubblelayer/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ The `Bubble Layer` requires a data source. The ID of the datasource to bind to t
@using AzureMapsControl.Components.Map
<AzureMap Id="map"
Zoom="2"
CameraOptions="new CameraOptions { Zoom = 2 }"
EventActivationFlags="MapEventActivationFlags
.None()
.Enable(MapEventType.Ready)"
Expand Down
10 changes: 8 additions & 2 deletions docs/layers/heatmaplayer/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,20 @@ The `Heatmap Layer` requires a data source. The ID of the datasource to bind to
@using AzureMapsControl.Components.Map
<AzureMap Id="map"
Zoom="2"
Style="grayscale_dark"
CameraOptions="new CameraOptions { Zoom = 2 }"
StyleOptions="StyleOptions"
EventActivationFlags="MapEventActivationFlags
.None()
.Enable(MapEventType.Ready)"
OnReady="OnMapReady" />
@code {
public StyleOptions StyleOptions = new StyleOptions
{
Style = "grayscale_dark"
};
public async Task OnMapReady(MapEventArgs events)
{
const string dataSourceId = "heatmapDataSource";
Expand Down
3 changes: 1 addition & 2 deletions docs/layers/imagelayer/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,7 @@ The image layer supports the following image formats
@using AzureMapsControl.Components.Map
<AzureMap Id="map"
Center="new Components.Atlas.Position(11.575454, 48.137392)"
Zoom="13"
CameraOptions="new CameraOptions { Center = new Components.Atlas.Position(11.575454, 48.137392), Zoom = 13 }"
EventActivationFlags="MapEventActivationFlags
.None()
.Enable(MapEventType.Ready)"
Expand Down
11 changes: 8 additions & 3 deletions docs/layers/linelayer/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,20 @@ A line layer can be used to render `LineString` and `MultiLineString` features a
@using AzureMapsControl.Components.Map
<AzureMap Id="map"
Zoom="14"
Center="new Components.Atlas.Position(11.581990, 48.143534)"
Style="grayscale_dark"
CameraOptions="new CameraOptions { Center = new Components.Atlas.Position(11.581990, 48.143534), Zoom = 14 }"
StyleOptions="StyleOptions"
EventActivationFlags="MapEventActivationFlags
.None()
.Enable(MapEventType.Ready)"
OnReady="OnMapReady" />
@code {
public StyleOptions StyleOptions = new StyleOptions
{
Style = "grayscale_dark"
};
public async Task OnMapReady(MapEventArgs events)
{
const string dataSourceId = "dataSource";
Expand Down
6 changes: 2 additions & 4 deletions docs/layers/polygonextrusionlayer/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,7 @@ The polygon extrusion layer renders areas of `Polygon` and `MultiPolygon` featur
@using AzureMapsControl.Components.Map
<AzureMap Id="map"
Zoom="4"
Pitch="45"
Center="new Components.Atlas.Position(11.581990, 48.143534)"
CameraOptions="new CameraOptions { Center = new Components.Atlas.Position(11.581990, 48.143534), Zoom = 4, Pitch = 45 }"
EventActivationFlags="MapEventActivationFlags
.None()
.Enable(MapEventType.Ready)"
Expand All @@ -24,7 +22,7 @@ The polygon extrusion layer renders areas of `Polygon` and `MultiPolygon` featur
var dataSource = new AzureMapsControl.Components.Data.DataSource(dataSourceId);
await events.Map.AddSourceAsync(dataSource);
await dataSource.ImportDataFromUrlAsync("https://raw.githubusercontent.com/arnaudleclerc/ng-azure-maps/master/assets/data/countries.geojson.json");
await dataSource.ImportDataFromUrlAsync("https://raw.githubusercontent.com/arnaudleclerc/ng-azure-maps/main/assets/data/countries.geojson.json");
var layer = new AzureMapsControl.Components.Layers.PolygonExtrusionLayer
{
Expand Down
2 changes: 1 addition & 1 deletion docs/layers/polygonlayer/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ A Polygon Layer renders the areas of `Polygon` and `MultiPolygon` feature geomet
@using AzureMapsControl.Components.Map
<AzureMap Id="map"
Zoom="2"
CameraOptions="new CameraOptions { Zoom = 2 }"
EventActivationFlags="MapEventActivationFlags
.None()
.Enable(MapEventType.Ready)"
Expand Down
4 changes: 2 additions & 2 deletions docs/layers/symbollayer/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@ Connect a symbol to a data source, and use it to render an icon or a text at a g

Symbol layers are rendered using WebGL. Use a symbol layer to render large collections of points on the map. Compared to HTML marker, the symbol layer renders a large number of point data on the map, with better performance. However, the symbol layer doesn't support traditional CSS and HTML elements for styling.

![Symbol Layer](../assets/symbollayer.png)
![Symbol Layer](../../assets/symbollayer.png)

```
@page "/SymbolLayerOnReady"
@using AzureMapsControl.Components.Map
<AzureMap Id="map"
Zoom="2"
CameraOptions="new CameraOptions { Zoom = 2 }"
EventActivationFlags="MapEventActivationFlags
.None()
.Enable(MapEventType.Ready)"
Expand Down
5 changes: 2 additions & 3 deletions docs/layers/tilelayer/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,14 @@

A Tile layer loads in tiles from a server. These images can either be pre-rendered or dynamically rendered. Pre-rendered images are stored like any other image on a server using a naming convention that the tile layer understands. Dynamically rendered images use a service to load the images close to real time.

![Tile Layer](../assets/tilelayer.png)
![Tile Layer](../../assets/tilelayer.png)

```
@page "/TileLayerOnReady"
@using AzureMapsControl.Components.Map
<AzureMap Id="map"
Center="new Components.Atlas.Position(-99.47, 40.75)"
Zoom="4"
CameraOptions="new CameraOptions { Center = new Components.Atlas.Position(-99.47, 40.75), Zoom = 4}"
EventActivationFlags="MapEventActivationFlags
.None()
.Enable(MapEventType.Ready)"
Expand Down
48 changes: 33 additions & 15 deletions docs/map/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,17 @@ You can use the `AzureMap` component to display a map.
@using AzureMapsControl.Components.Map
<AzureMap Id="map"
Center="new AzureMapsControl.Components.Atlas.Position(11.581990, 48.143534)"
Zoom="10"
Style="grayscale_dark"
ShowLogo="false"
ShowFeedbackLink="false" />
CameraOptions="new CameraOptions { Center= new AzureMapsControl.Components.Atlas.Position(11.581990, 48.143534), Zoom= 10 }"
StyleOptions="StyleOptions"/>
@code {
public StyleOptions StyleOptions = new StyleOptions
{
Style = "grayscale_dark",
ShowLogo = false,
ShowFeedbackLink = false
};
}
```

Different inputs can be specified to customize the map. Please refer to the [Azure Maps Web SDK Documentation](https://docs.microsoft.com/en-us/azure/azure-maps/map-create) for more information.
Expand Down Expand Up @@ -85,18 +91,24 @@ The following example activates all the events except `Drag`, `Idle`, `MouseMove
@using AzureMapsControl.Components.Map
<AzureMap Id="map"
Center="new AzureMapsControl.Components.Atlas.Position(11.581990, 48.143534)"
Zoom="10"
Style="grayscale_dark"
ShowLogo="false"
ShowFeedbackLink="false"
CameraOptions="new CameraOptions { Center= new AzureMapsControl.Components.Atlas.Position(11.581990, 48.143534), Zoom= 10 }"
StyleOptions="StyleOptions"
OnReady="@(async (e) => { Console.WriteLine(e.Type); })"
EventActivationFlags="MapEventActivationFlags
.All()
.Disable(MapEventType.Drag,
MapEventType.Idle,
MapEventType.MouseMove,
MapEventType.Render)"/>
@code {
public StyleOptions StyleOptions = new StyleOptions
{
Style = "grayscale_dark",
ShowLogo = false,
ShowFeedbackLink = false
};
}
```

The following example deactivates all the events except `Ready`.
Expand All @@ -106,13 +118,19 @@ The following example deactivates all the events except `Ready`.
@using AzureMapsControl.Components.Map
<AzureMap Id="map"
Center="new AzureMapsControl.Components.Atlas.Position(11.581990, 48.143534)"
Zoom="10"
Style="grayscale_dark"
ShowLogo="false"
ShowFeedbackLink="false"
CameraOptions="new CameraOptions { Center= new AzureMapsControl.Components.Atlas.Position(11.581990, 48.143534), Zoom= 10 }"
StyleOptions="StyleOptions"
OnReady="@(async (e) => { Console.WriteLine(e.Type); })"
EventActivationFlags="MapEventActivationFlags
.None()
.Enable(MapEventType.Ready)"/>
@code {
public StyleOptions StyleOptions = new StyleOptions
{
Style = "grayscale_dark",
ShowLogo = false,
ShowFeedbackLink = false
};
}
```
42 changes: 36 additions & 6 deletions docs/popups/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,19 @@ Popups can be added to the map using the `AddPopupAsync` method on the map. If t
@using AzureMapsControl.Components.Map
<AzureMap Id="map"
Style="grayscale_dark"
StyleOptions="StyleOptions"
EventActivationFlags="MapEventActivationFlags
.None()
.Enable(MapEventType.Ready)"
OnReady="OnMapReady" />
@code {
public StyleOptions StyleOptions = new StyleOptions
{
Style = "grayscale_dark"
};
public async Task OnMapReady(MapEventArgs eventArgs)
{
await eventArgs.Map.AddPopupAsync(new Components.Popups.PopupOptions
Expand All @@ -37,14 +42,19 @@ A popup can also be opened using the `OpenAsync` method.
@using AzureMapsControl.Components.Map
<AzureMap Id="map"
Style="grayscale_dark"
StyleOptions="StyleOptions"
EventActivationFlags="MapEventActivationFlags
.None()
.Enable(MapEventType.Ready)"
OnReady="OnMapReady" />
@code {
public StyleOptions StyleOptions = new StyleOptions
{
Style = "grayscale_dark"
};
public async Task OnMapReady(MapEventArgs eventArgs)
{
var popup = new Components.Popups.Popup(new Components.Popups.PopupOptions
Expand All @@ -67,14 +77,19 @@ The popup can then be close by calling the `CloseAsync` method.
@using AzureMapsControl.Components.Map
<AzureMap Id="map"
Style="grayscale_dark"
StyleOptions="StyleOptions"
EventActivationFlags="MapEventActivationFlags
.None()
.Enable(MapEventType.Ready)"
OnReady="OnMapReady" />
@code {
public StyleOptions StyleOptions = new StyleOptions
{
Style = "grayscale_dark"
};
public async Task OnMapReady(MapEventArgs eventArgs)
{
var popup = new Components.Popups.Popup(new Components.Popups.PopupOptions
Expand All @@ -98,14 +113,19 @@ Calling the `RemoveAsync` method will remove the popup from the map. You can als
@using AzureMapsControl.Components.Map
<AzureMap Id="map"
Style="grayscale_dark"
StyleOptions="StyleOptions"
EventActivationFlags="MapEventActivationFlags
.None()
.Enable(MapEventType.Ready)"
OnReady="OnMapReady" />
@code {
public StyleOptions StyleOptions = new StyleOptions
{
Style = "grayscale_dark"
};
public async Task OnMapReady(MapEventArgs eventArgs)
{
var popup = new Components.Popups.Popup(new Components.Popups.PopupOptions
Expand All @@ -130,14 +150,19 @@ The popup can be updated by calling the `UpdateAsync` method and providing the u
@using AzureMapsControl.Components.Map
<AzureMap Id="map"
Style="grayscale_dark"
StyleOptions="StyleOptions"
EventActivationFlags="MapEventActivationFlags
.None()
.Enable(MapEventType.Ready)"
OnReady="OnMapReady" />
@code {
public StyleOptions StyleOptions = new StyleOptions
{
Style = "grayscale_dark"
};
public async Task OnMapReady(MapEventArgs eventArgs)
{
var popup = new Components.Popups.Popup(new Components.Popups.PopupOptions
Expand All @@ -162,14 +187,19 @@ All the popups can be cleared using the `ClearPopupsAsync` method on the map.
@using AzureMapsControl.Components.Map
<AzureMap Id="map"
Style="grayscale_dark"
StyleOptions="StyleOptions"
EventActivationFlags="MapEventActivationFlags
.None()
.Enable(MapEventType.Ready)"
OnReady="OnMapReady" />
@code {
public StyleOptions StyleOptions = new StyleOptions
{
Style = "grayscale_dark"
};
public async Task OnMapReady(MapEventArgs eventArgs)
{
var popup = new Components.Popups.Popup(new Components.Popups.PopupOptions
Expand Down
12 changes: 9 additions & 3 deletions docs/sources/datasources/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ You can add geometry on a data source using the `AddAsync` method.
@using AzureMapsControl.Components.Map
<AzureMap Id="map"
Zoom="2"
CameraOptions="new CameraOptions { Zoom = 2 }"
EventActivationFlags="MapEventActivationFlags
.None()
.Enable(MapEventType.Ready)"
Expand Down Expand Up @@ -66,14 +66,20 @@ You can import data on the data source using the `ImportDataFromUrlAsync` method
@using AzureMapsControl.Components.Map
<AzureMap Id="map"
Zoom="2"
Style="grayscale_dark"
CameraOptions="new CameraOptions { Zoom = 2 }"
StyleOptions="StyleOptions"
EventActivationFlags="MapEventActivationFlags
.None()
.Enable(MapEventType.Ready)"
OnReady="OnMapReady" />
@code {
public StyleOptions StyleOptions = new StyleOptions
{
Style = "grayscale_dark"
};
public async Task OnMapReady(MapEventArgs events)
{
const string dataSourceId = "heatmapDataSource";
Expand Down
Loading

0 comments on commit daad648

Please sign in to comment.