Feature: Traffic, Transit and Bicycle Layer #339

GoogleMapsComponents/GoogleMapsComponents.csproj

@@ -15,7 +15,7 @@
 		<RazorLangVersion>3.0</RazorLangVersion>
 		<AddRazorSupportForMvc>true</AddRazorSupportForMvc>
 		<PackageId>BlazorGoogleMaps</PackageId>
-		<Version>4.4.2</Version>
+		<Version>4.5.0</Version>
 		<Authors>Rungwiroon</Authors>
 		<Company>QueueStack Solution</Company>
 		<Product>BlazorGoogleMaps</Product>

GoogleMapsComponents/Maps/BicyclingLayer.cs

@@ -0,0 +1,42 @@
+using GoogleMapsComponents.Maps.Extension;
+using Microsoft.JSInterop;
+using System;
+using System.Threading.Tasks;
+
+namespace GoogleMapsComponents.Maps;
+
+/// <summary>
+/// https://developers.google.com/maps/documentation/javascript/reference/map#BicyclingLayer
+/// </summary>
+public class BicyclingLayer : EventEntityBase, IJsObjectRef
+{
+    public Guid Guid => _jsObjectRef.Guid;
+
+    public static async Task<BicyclingLayer> CreateAsync(IJSRuntime jsRuntime)
+    {
+        var jsObjectRef = await JsObjectRef.CreateAsync(jsRuntime, "google.maps.BicyclingLayer");
+        var obj = new BicyclingLayer(jsObjectRef);
+
+        return obj;
+    }
+
+    internal BicyclingLayer(JsObjectRef jsObjectRef)
+        : base(jsObjectRef)
+    {
+    }
+
+    public virtual Task<Map> GetMap()
+    {
+        return _jsObjectRef.InvokeAsync<Map>("getMap");
+    }
+
+    /// <summary>
+    /// Renders the map entity on the specified map or panorama. 
+    /// If map is set to null, the map entity will be removed.
+    /// </summary>
+    /// <param name="map"></param>
+    public virtual async Task SetMap(Map? map)
+    {
+        await _jsObjectRef.InvokeAsync("setMap", map);
+    }
+}

GoogleMapsComponents/Maps/ListableEntityOptionsBase.cs

@@ -1,5 +1,5 @@
-using System.Text.Json.Serialization;
-using GoogleMapsComponents.Serialization;
+using GoogleMapsComponents.Serialization;
+using System.Text.Json.Serialization;
 
 namespace GoogleMapsComponents.Maps;
 
@@ -21,7 +21,7 @@ public abstract class ListableEntityOptionsBase
     /// Map on which to display the Entity.
     /// </summary>
     [JsonConverter(typeof(JsObjectRefConverter<Map>))]
-    public Map Map { get; set; }
+    public Map? Map { get; set; }
 
     /// <summary>
     /// If true, the Entity is visible

GoogleMapsComponents/Maps/TrafficLayer.cs

@@ -0,0 +1,45 @@
+using GoogleMapsComponents.Maps.Extension;
+using Microsoft.JSInterop;
+using System;
+using System.Threading.Tasks;
+
+namespace GoogleMapsComponents.Maps;
+
+/// <summary>
+/// https://developers.google.com/maps/documentation/javascript/reference/map#TrafficLayer
+/// </summary>
+public class TrafficLayer : EventEntityBase, IJsObjectRef
+{
+    public Guid Guid => _jsObjectRef.Guid;
+    public static async Task<TrafficLayer> CreateAsync(IJSRuntime jsRuntime, TrafficLayerOptions? opts = null)
+    {
+        var jsObjectRef = await JsObjectRef.CreateAsync(jsRuntime, "google.maps.TrafficLayer", opts);
+
+        var obj = new TrafficLayer(jsObjectRef);
+
+        return obj;
+    }
+
+    /// <summary>
+    /// Constructor for use in ListableEntityListBase. Must be the first constructor!
+    /// </summary>
+    internal TrafficLayer(JsObjectRef jsObjectRef)
+        : base(jsObjectRef)
+    {
+    }
+
+    public virtual Task<Map> GetMap()
+    {
+        return _jsObjectRef.InvokeAsync<Map>("getMap");
+    }
+
+    /// <summary>
+    /// Renders the map entity on the specified map or panorama. 
+    /// If map is set to null, the map entity will be removed.
+    /// </summary>
+    /// <param name="map"></param>
+    public virtual async Task SetMap(Map? map)
+    {
+        await _jsObjectRef.InvokeAsync("setMap", map);
+    }
+}

GoogleMapsComponents/Maps/TrafficLayerOptions.cs

@@ -0,0 +1,14 @@
+using GoogleMapsComponents.Serialization;
+using System.Text.Json.Serialization;
+
+namespace GoogleMapsComponents.Maps;
+
+public class TrafficLayerOptions
+{
+    public bool AutoRefresh { get; set; }
+    /// <summary>
+    /// Map on which to display the Entity.
+    /// </summary>
+    [JsonConverter(typeof(JsObjectRefConverter<Map>))]
+    public Map? Map { get; set; }
+}

GoogleMapsComponents/Maps/TransitLayer.cs

@@ -0,0 +1,42 @@
+using GoogleMapsComponents.Maps.Extension;
+using Microsoft.JSInterop;
+using System;
+using System.Threading.Tasks;
+
+namespace GoogleMapsComponents.Maps;
+
+/// <summary>
+/// https://developers.google.com/maps/documentation/javascript/reference/map#TransitLayer
+/// </summary>
+public class TransitLayer : EventEntityBase, IJsObjectRef
+{
+    public Guid Guid => _jsObjectRef.Guid;
+
+    public static async Task<TransitLayer> CreateAsync(IJSRuntime jsRuntime)
+    {
+        var jsObjectRef = await JsObjectRef.CreateAsync(jsRuntime, "google.maps.TransitLayer");
+        var obj = new TransitLayer(jsObjectRef);
+
+        return obj;
+    }
+
+    internal TransitLayer(JsObjectRef jsObjectRef)
+        : base(jsObjectRef)
+    {
+    }
+
+    public virtual Task<Map> GetMap()
+    {
+        return _jsObjectRef.InvokeAsync<Map>("getMap");
+    }
+
+    /// <summary>
+    /// Renders the map entity on the specified map or panorama. 
+    /// If map is set to null, the map entity will be removed.
+    /// </summary>
+    /// <param name="map"></param>
+    public virtual async Task SetMap(Map? map)
+    {
+        await _jsObjectRef.InvokeAsync("setMap", map);
+    }
+}

ServerSideDemo/Pages/KmlExample.razor

@@ -14,8 +14,8 @@
 <div id="capture">@((MarkupString)(_capture))</div>
 
 @code {
-    private GoogleMap _map1;
-    private MapOptions _mapOptions = new MapOptions()
+    private GoogleMap _map1 = null!;
+    private readonly MapOptions _mapOptions = new MapOptions()
     {
         Zoom = 2,
         Center = new LatLngLiteral()

ServerSideDemo/Pages/MapLayerPage.razor

@@ -0,0 +1,66 @@
+@page "/map-layer"
+@using GoogleMapsComponents
+@using GoogleMapsComponents.Maps
+
+<h1>Map Layers. Traffic, Transit and Bicycle</h1>
+
+<GoogleMap @ref="@_map1" Id="map1" Options="@_mapOptions"></GoogleMap>
+
+<button @onclick="AddTrafficLayer">Add Traffic Layer</button> 
+<button @onclick="RemoveTrafficLayer">Remove Traffic Layer</button> 
+<br/>
+<button @onclick="AddTransitLayer">Add TransitLayer Layer</button>
+<br/>
+<button @onclick="AddBicyclingLayer">Add Bicycling Layer</button>
+
+@code {
+    private GoogleMap _map1 = null!;
+    private TrafficLayer? _trafficLayer;
+    private TransitLayer? _transitLayer;
+    private BicyclingLayer? _bicyclingLayer;
+    private MapOptions _mapOptions = null!;
+
+    protected override void OnInitialized()
+    {
+        _mapOptions = new MapOptions
+        {
+            Zoom = 13,
+            Center = new LatLngLiteral
+            {
+                Lat = -33.8688,
+                Lng = 151.2195
+            },
+            MapTypeId = MapTypeId.Roadmap
+        };
+    }
+
+    private async Task AddTrafficLayer()
+    {
+        _trafficLayer = await TrafficLayer.CreateAsync(_map1.JsRuntime, new TrafficLayerOptions()
+        {
+            Map = _map1.InteropObject
+        });
+    }
+
+    private async Task RemoveTrafficLayer()
+    {
+        if (_trafficLayer != null)
+        {
+            await _trafficLayer.SetMap(null);
+        }
+    }
+
+    private async Task AddTransitLayer()
+    {
+        _transitLayer = await TransitLayer.CreateAsync(_map1.JsRuntime);
+        await _transitLayer.SetMap(_map1.InteropObject);
+    }
+
+    private async Task AddBicyclingLayer()
+    {
+        _bicyclingLayer = await BicyclingLayer.CreateAsync(_map1.JsRuntime);
+        await _bicyclingLayer.SetMap(_map1.InteropObject);
+
+    }
+
+}

ServerSideDemo/Shared/NavMenu.razor

@@ -118,6 +118,11 @@
                 <span class="oi oi-list-rich" aria-hidden="true"></span> MapData
             </NavLink>
         </li>
+        <li class="nav-item px-3">
+            <NavLink class="nav-link" href="map-layer">
+                <span class="oi oi-list-rich" aria-hidden="true"></span> Map Layers
+            </NavLink>
+        </li>
         <li class="nav-item px-3">
             <NavLink class="nav-link" href="dispose-circle-list">
                 <span class="oi oi-list-rich" aria-hidden="true"></span> Dispose Circle List