Reworking way of setting the options on the map

* 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

Author: arnaudleclerc

docs/layers/README.md

@@ -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)"
@@ -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)"

docs/layers/bubblelayer/README.md

@@ -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)"

docs/layers/heatmaplayer/README.md

@@ -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";

docs/layers/imagelayer/README.md

@@ -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)"

docs/layers/linelayer/README.md

@@ -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";

docs/layers/polygonextrusionlayer/README.md

@@ -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)"
@@ -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
         {

docs/layers/polygonlayer/README.md

@@ -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)"

docs/layers/symbollayer/README.md

@@ -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)"

docs/layers/tilelayer/README.md

@@ -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)"

docs/map/README.md

@@ -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.
@@ -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`.
@@ -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
+    };
+}
 ```