From 70a7cd95c9379282faeb841885fa03e41c1b18b2 Mon Sep 17 00:00:00 2001 From: Valentas Date: Sat, 22 Jun 2024 09:21:36 +0300 Subject: [PATCH] Feature: Traffic, Transit and Bicycle Layer #339 --- .../GoogleMapsComponents.csproj | 2 +- GoogleMapsComponents/Maps/BicyclingLayer.cs | 42 ++++++++++++ .../Maps/ListableEntityOptionsBase.cs | 6 +- GoogleMapsComponents/Maps/TrafficLayer.cs | 45 +++++++++++++ .../Maps/TrafficLayerOptions.cs | 14 ++++ GoogleMapsComponents/Maps/TransitLayer.cs | 42 ++++++++++++ ServerSideDemo/Pages/KmlExample.razor | 4 +- ServerSideDemo/Pages/MapLayerPage.razor | 66 +++++++++++++++++++ ServerSideDemo/Shared/NavMenu.razor | 5 ++ 9 files changed, 220 insertions(+), 6 deletions(-) create mode 100644 GoogleMapsComponents/Maps/BicyclingLayer.cs create mode 100644 GoogleMapsComponents/Maps/TrafficLayer.cs create mode 100644 GoogleMapsComponents/Maps/TrafficLayerOptions.cs create mode 100644 GoogleMapsComponents/Maps/TransitLayer.cs create mode 100644 ServerSideDemo/Pages/MapLayerPage.razor diff --git a/GoogleMapsComponents/GoogleMapsComponents.csproj b/GoogleMapsComponents/GoogleMapsComponents.csproj index 7004683e..e251d629 100644 --- a/GoogleMapsComponents/GoogleMapsComponents.csproj +++ b/GoogleMapsComponents/GoogleMapsComponents.csproj @@ -15,7 +15,7 @@ 3.0 true BlazorGoogleMaps - 4.4.2 + 4.5.0 Rungwiroon QueueStack Solution BlazorGoogleMaps diff --git a/GoogleMapsComponents/Maps/BicyclingLayer.cs b/GoogleMapsComponents/Maps/BicyclingLayer.cs new file mode 100644 index 00000000..4c2e74a5 --- /dev/null +++ b/GoogleMapsComponents/Maps/BicyclingLayer.cs @@ -0,0 +1,42 @@ +using GoogleMapsComponents.Maps.Extension; +using Microsoft.JSInterop; +using System; +using System.Threading.Tasks; + +namespace GoogleMapsComponents.Maps; + +/// +/// https://developers.google.com/maps/documentation/javascript/reference/map#BicyclingLayer +/// +public class BicyclingLayer : EventEntityBase, IJsObjectRef +{ + public Guid Guid => _jsObjectRef.Guid; + + public static async Task 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 GetMap() + { + return _jsObjectRef.InvokeAsync("getMap"); + } + + /// + /// Renders the map entity on the specified map or panorama. + /// If map is set to null, the map entity will be removed. + /// + /// + public virtual async Task SetMap(Map? map) + { + await _jsObjectRef.InvokeAsync("setMap", map); + } +} \ No newline at end of file diff --git a/GoogleMapsComponents/Maps/ListableEntityOptionsBase.cs b/GoogleMapsComponents/Maps/ListableEntityOptionsBase.cs index 10b6b7f0..44bd5430 100644 --- a/GoogleMapsComponents/Maps/ListableEntityOptionsBase.cs +++ b/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. /// [JsonConverter(typeof(JsObjectRefConverter))] - public Map Map { get; set; } + public Map? Map { get; set; } /// /// If true, the Entity is visible diff --git a/GoogleMapsComponents/Maps/TrafficLayer.cs b/GoogleMapsComponents/Maps/TrafficLayer.cs new file mode 100644 index 00000000..9550155c --- /dev/null +++ b/GoogleMapsComponents/Maps/TrafficLayer.cs @@ -0,0 +1,45 @@ +using GoogleMapsComponents.Maps.Extension; +using Microsoft.JSInterop; +using System; +using System.Threading.Tasks; + +namespace GoogleMapsComponents.Maps; + +/// +/// https://developers.google.com/maps/documentation/javascript/reference/map#TrafficLayer +/// +public class TrafficLayer : EventEntityBase, IJsObjectRef +{ + public Guid Guid => _jsObjectRef.Guid; + public static async Task CreateAsync(IJSRuntime jsRuntime, TrafficLayerOptions? opts = null) + { + var jsObjectRef = await JsObjectRef.CreateAsync(jsRuntime, "google.maps.TrafficLayer", opts); + + var obj = new TrafficLayer(jsObjectRef); + + return obj; + } + + /// + /// Constructor for use in ListableEntityListBase. Must be the first constructor! + /// + internal TrafficLayer(JsObjectRef jsObjectRef) + : base(jsObjectRef) + { + } + + public virtual Task GetMap() + { + return _jsObjectRef.InvokeAsync("getMap"); + } + + /// + /// Renders the map entity on the specified map or panorama. + /// If map is set to null, the map entity will be removed. + /// + /// + public virtual async Task SetMap(Map? map) + { + await _jsObjectRef.InvokeAsync("setMap", map); + } +} \ No newline at end of file diff --git a/GoogleMapsComponents/Maps/TrafficLayerOptions.cs b/GoogleMapsComponents/Maps/TrafficLayerOptions.cs new file mode 100644 index 00000000..6abca916 --- /dev/null +++ b/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; } + /// + /// Map on which to display the Entity. + /// + [JsonConverter(typeof(JsObjectRefConverter))] + public Map? Map { get; set; } +} \ No newline at end of file diff --git a/GoogleMapsComponents/Maps/TransitLayer.cs b/GoogleMapsComponents/Maps/TransitLayer.cs new file mode 100644 index 00000000..6b939a2e --- /dev/null +++ b/GoogleMapsComponents/Maps/TransitLayer.cs @@ -0,0 +1,42 @@ +using GoogleMapsComponents.Maps.Extension; +using Microsoft.JSInterop; +using System; +using System.Threading.Tasks; + +namespace GoogleMapsComponents.Maps; + +/// +/// https://developers.google.com/maps/documentation/javascript/reference/map#TransitLayer +/// +public class TransitLayer : EventEntityBase, IJsObjectRef +{ + public Guid Guid => _jsObjectRef.Guid; + + public static async Task 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 GetMap() + { + return _jsObjectRef.InvokeAsync("getMap"); + } + + /// + /// Renders the map entity on the specified map or panorama. + /// If map is set to null, the map entity will be removed. + /// + /// + public virtual async Task SetMap(Map? map) + { + await _jsObjectRef.InvokeAsync("setMap", map); + } +} \ No newline at end of file diff --git a/ServerSideDemo/Pages/KmlExample.razor b/ServerSideDemo/Pages/KmlExample.razor index e9009ebd..1257f06a 100644 --- a/ServerSideDemo/Pages/KmlExample.razor +++ b/ServerSideDemo/Pages/KmlExample.razor @@ -14,8 +14,8 @@
@((MarkupString)(_capture))
@code { - private GoogleMap _map1; - private MapOptions _mapOptions = new MapOptions() + private GoogleMap _map1 = null!; + private readonly MapOptions _mapOptions = new MapOptions() { Zoom = 2, Center = new LatLngLiteral() diff --git a/ServerSideDemo/Pages/MapLayerPage.razor b/ServerSideDemo/Pages/MapLayerPage.razor new file mode 100644 index 00000000..b59c25fc --- /dev/null +++ b/ServerSideDemo/Pages/MapLayerPage.razor @@ -0,0 +1,66 @@ +@page "/map-layer" +@using GoogleMapsComponents +@using GoogleMapsComponents.Maps + +

Map Layers. Traffic, Transit and Bicycle

+ + + + + +
+ +
+ + +@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); + + } + +} \ No newline at end of file diff --git a/ServerSideDemo/Shared/NavMenu.razor b/ServerSideDemo/Shared/NavMenu.razor index 8b1862b1..9510fc26 100644 --- a/ServerSideDemo/Shared/NavMenu.razor +++ b/ServerSideDemo/Shared/NavMenu.razor @@ -118,6 +118,11 @@ MapData +
  • + + Map Layers + +
  • Dispose Circle List