From be887c4f76973e29aa8c339d8a91e58ea23342a8 Mon Sep 17 00:00:00 2001 From: Valentas Date: Sat, 24 Aug 2024 10:31:20 +0300 Subject: [PATCH] Added client side advanced marker sample --- ClientSideDemo/ClientSideDemo.csproj | 2 +- .../Pages/MapAdvancedMarkerPage.razor | 400 ++++++++++++++++++ ClientSideDemo/Shared/NavMenu.razor | 5 + 3 files changed, 406 insertions(+), 1 deletion(-) create mode 100644 ClientSideDemo/Pages/MapAdvancedMarkerPage.razor diff --git a/ClientSideDemo/ClientSideDemo.csproj b/ClientSideDemo/ClientSideDemo.csproj index 609056ba..659a3785 100644 --- a/ClientSideDemo/ClientSideDemo.csproj +++ b/ClientSideDemo/ClientSideDemo.csproj @@ -2,7 +2,7 @@ net8.0 - 8.0 + latest enable true true diff --git a/ClientSideDemo/Pages/MapAdvancedMarkerPage.razor b/ClientSideDemo/Pages/MapAdvancedMarkerPage.razor new file mode 100644 index 00000000..1d3071f0 --- /dev/null +++ b/ClientSideDemo/Pages/MapAdvancedMarkerPage.razor @@ -0,0 +1,400 @@ +@page "/map-advanced-marker" +@using GoogleMapsComponents +@using GoogleMapsComponents.Maps +@using GoogleMapsComponents.Maps.Coordinates +@using GoogleMapsComponents.Maps.Extension + +

Google Map Advanced Markers

+ + + + + + + + +
+

Marker list

+ + + + + + + + +@code { + + private GoogleMap _map1 = null!; + private int _counter; + const string Svg = "\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n"; + private readonly MapOptions _mapOptions = new MapOptions() + { + Zoom = 13, + Center = new LatLngLiteral() + { + Lat = 13.505892, + Lng = 100.8162 + }, + IsFractionalZoomEnabled = false, + HeadingInteractionEnabled = true, + CameraControl = true, + MapTypeId = MapTypeId.Roadmap, + // ColorScheme = ColorScheme.Dark, + MapId = "e5asd595q2121" + }; + private LatLngBounds _bounds = null!; + private readonly List _events = new List(); + private readonly Stack _markers = new Stack(); + private AdvancedMarkerElementList? _markerElementList; + + [Inject] + // ReSharper disable once UnusedAutoPropertyAccessor.Global + public IJSRuntime JsObjectRef { get; set; } = null!; + + protected async Task OnAfterRenderAsync() + { + _bounds = await LatLngBounds.CreateAsync(_map1.JsRuntime); + } + + private async Task AddMarker() + { + var mapCenter = await _map1.InteropObject.GetCenter(); + + var marker = await AdvancedMarkerElement.CreateAsync(_map1.JsRuntime, new AdvancedMarkerElementOptions() + { + Position = mapCenter, + Map = _map1.InteropObject, + Content = Svg + }); + + _markers.Push(marker); + await _bounds.Extend(mapCenter); + + await marker.AddListener("click", e => + { + _events.Add($"Clicked {e.LatLng.Lat} {e.LatLng.Lng}"); + StateHasChanged(); + e.Stop(); + }); + } + + private async Task AddMarker2() + { + var coordinates = new List() + { + new LatLngLiteral(){ Lng = 145.128708, Lat = -37.759859 }, + new LatLngLiteral(){ Lng = 145.133858, Lat = -37.765015 }, + new LatLngLiteral(){ Lng = 145.143299, Lat = -37.770104 }, + new LatLngLiteral(){ Lng = 145.145187, Lat = -37.7737 }, + new LatLngLiteral(){ Lng = 145.137978, Lat = -37.774785 }, + new LatLngLiteral(){ Lng = 144.968119, Lat = -37.819616 }, + new LatLngLiteral(){ Lng = 144.695692, Lat = -38.330766 }, + new LatLngLiteral(){ Lng = 175.053218, Lat = -39.927193 }, + new LatLngLiteral(){ Lng = 174.865694, Lat = -41.330162 }, + new LatLngLiteral(){ Lng = 147.439506, Lat = -42.734358 }, + new LatLngLiteral(){ Lng = 147.501315, Lat = -42.734358 }, + new LatLngLiteral(){ Lng = 147.438, Lat = -42.735258 }, + new LatLngLiteral(){ Lng = 170.463352, Lat = -43.999792 }, + }; + await AddMarkersGroup(coordinates); + } + + private async Task AddMarker1() + { + var coordinates = new List() + { + new LatLngLiteral(){ Lng = 147.154312, Lat = -31.56391 }, + new LatLngLiteral(){ Lng = 150.363181, Lat = -33.718234 }, + new LatLngLiteral(){ Lng = 150.371124, Lat = -33.727111 }, + new LatLngLiteral(){ Lng = 151.209834, Lat = -33.848588 }, + new LatLngLiteral(){ Lng = 151.216968, Lat = -33.851702 }, + new LatLngLiteral(){ Lng = 150.863657, Lat = -34.671264 }, + new LatLngLiteral(){ Lng = 148.662905, Lat = -35.304724 }, + new LatLngLiteral(){ Lng = 175.699196, Lat = -36.817685 }, + new LatLngLiteral(){ Lng = 175.790222, Lat = -36.828611 }, + new LatLngLiteral(){ Lng = 145.116667, Lat = -37.75 }, + }; + + + for (int index = 0; index < 200; index++) + { + var dif = (index * 0.001); + coordinates.Add(new LatLngLiteral() { Lng = 145.116667 + dif, Lat = -37.75 + dif }); + } + + await AddMarkersGroup(coordinates); + } + + + + private async Task AddMarkersGroup(ICollection coordinates) + { + if (_markerElementList == null) + { + _markerElementList = await AdvancedMarkerElementList.CreateAsync( + _map1.JsRuntime, + coordinates.ToDictionary(_ => Guid.NewGuid().ToString(), y => new AdvancedMarkerElementOptions() + { + Position = new LatLngLiteral() { Lng = y.Lng, Lat = y.Lat }, + Map = _map1.InteropObject, + GmpDraggable = true, + Title = Guid.NewGuid().ToString(), + Content = "
My pin
", + }) + ); + } + else + { + var cordDic = coordinates.ToDictionary(_ => Guid.NewGuid().ToString(), y => new AdvancedMarkerElementOptions() + { + Position = new LatLngLiteral() { Lng = y.Lng, Lat = y.Lat }, + Map = _map1.InteropObject, + GmpDraggable = true, + Title = Guid.NewGuid().ToString(), + Content = "
My pin
", + }); + + await _markerElementList.AddMultipleAsync(cordDic); + } + + foreach (var latLngLiteral in coordinates) + { + await _bounds.Extend(latLngLiteral); + } + + await FitBounds(); + } + + private async Task RemoveMarkers() + { + if (_markerElementList == null) + { + return; + } + + foreach (var markerListMarker in _markerElementList.Markers) + { + await markerListMarker.Value.SetMap(null); + } + + await _markerElementList.RemoveAllAsync(); + } + + private async Task RemoveMarker() + { + if (!_markers.Any()) + { + return; + } + + var lastMarker = _markers.Pop(); + await lastMarker.SetMap(null); + } + + private async Task FitBounds() + { + if (await this._bounds.IsEmpty()) + { + return; + } + + var boundsLiteral = await _bounds.ToJson(); + await _map1.InteropObject.FitBounds(boundsLiteral, OneOf.OneOf.FromT0(5)); + } + + private async Task AddMarkerWithPinElement() + { + //Some examples of pin elements + //https://developers.google.com/maps/documentation/javascript/advanced-markers/graphic-markers#javascript + var mapCenter = await _map1.InteropObject.GetCenter(); + PinElement? pinElement; + _counter++; + const string constantImageSource = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png"; + + AdvancedMarkerElement marker; + var actionNr = _counter % 3; + if (actionNr == 0) + { + pinElement = new PinElement() + { + BorderColor = "red", + Background = "blue", + Scale = 2 + }; + + marker = await AdvancedMarkerElement.CreateAsync(_map1.JsRuntime, new AdvancedMarkerElementOptions() + { + Position = mapCenter, + Map = _map1.InteropObject, + Content = pinElement + }); + } + else if (actionNr == 1) + { + pinElement = new PinElement() + { + Glyph = constantImageSource, + Background = "green", + Scale = 2 + }; + + marker = await AdvancedMarkerElement.CreateAsync(_map1.JsRuntime, new AdvancedMarkerElementOptions() + { + Position = mapCenter, + Map = _map1.InteropObject, + Content = pinElement + + }); + } + else + { + marker = await AdvancedMarkerElement.CreateAsync(_map1.JsRuntime, new AdvancedMarkerElementOptions() + { + Position = mapCenter, + Map = _map1.InteropObject, + Content = Svg + }); + } + + _markers.Push(marker); + + await marker.AddListener("click", e => + { + _events.Add($"Clicked Pin Marker {e.LatLng.Lat} {e.LatLng.Lng}"); + StateHasChanged(); + e.Stop(); + }); + } + + private async Task UpdatePosition() + { + if (!_markers.Any()) + { + return; + } + + var lastMarker = _markers.Peek(); + var mapCenter = await _map1.InteropObject.GetCenter(); + await lastMarker.SetPosition(mapCenter); + await _bounds.Extend(mapCenter); + } + + private async Task UpdateContent() + { + if (!_markers.Any()) + { + return; + } + + const string newContent = "\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n"; + var isPin = _counter % 2 == 0; + if (isPin) + { + var pinElement = new PinElement() + { + BorderColor = "red", + Background = "blue", + Scale = 2 + }; + var lastMarker = _markers.Peek(); + await lastMarker.SetContent(pinElement); + } + else + { + var lastMarker = _markers.Peek(); + await lastMarker.SetContent(newContent); + } + + _counter++; + } + + private async Task GetMarkerPosition() + { + if (!_markers.Any()) + { + return; + } + + var lastMarker = _markers.Peek(); + var position = await lastMarker.GetPosition(); + _events.Add($"Marker position {position.Lat} {position.Lng}"); + + var gmpClickable = await lastMarker.GetGmpClickable(); + await lastMarker.SetGmpClickable(!gmpClickable); + var newGpmClickable = await lastMarker.GetGmpClickable(); + _events.Add($"gmpClickable new and old value are equal: {newGpmClickable == !gmpClickable}"); + + var gmpDraggable = await lastMarker.GetGmpDraggable(); + await lastMarker.SetGmpDraggable(!gmpDraggable); + var newGmpDraggable = await lastMarker.GetGmpDraggable(); + _events.Add($"gmpDraggable new and old value are equal: {newGmpDraggable == !gmpDraggable}"); + + StateHasChanged(); + } + + private async Task InvokeClustering() + { + var coordinates = GetClusterCoordinates(); + + var markers = await GetMarkers(coordinates); + + var markerClustering = await MarkerClustering.CreateAsync(_map1.JsRuntime, _map1.InteropObject, markers, new() + { + //RendererObjectName = "customRendererLib.interpolatedRenderer", + ZoomOnClick = true, + }); + + //await markerClustering.FitMapToMarkers(1); + } + + private async Task> GetMarkers(ICollection coords) + { + var result = new List(coords.Count()); + var index = 1; + foreach (var latLngLiteral in coords) + { + var marker = await AdvancedMarkerElement.CreateAsync(_map1.JsRuntime, new AdvancedMarkerElementOptions() + { + Position = latLngLiteral, + Map = _map1.InteropObject, + Content = index.ToString() + }); + + result.Add(marker); + } + + + return result; + } + + private static List GetClusterCoordinates() + { + return new List() + { + new() { Lng = 147.154312, Lat = -31.56391}, + new() { Lng = 150.363181, Lat = -33.718234}, + new() { Lng = 150.371124, Lat = -33.727111}, + new() { Lng = 151.209834, Lat = -33.848588}, + new() { Lng = 151.216968, Lat = -33.851702}, + new() { Lng = 150.863657, Lat = -34.671264}, + new() { Lng = 148.662905, Lat = -35.304724}, + new() { Lng = 175.699196, Lat = -36.817685}, + new() { Lng = 175.790222, Lat = -36.828611}, + new() { Lng = 145.116667, Lat = -37.75}, + new() { Lng = 145.128708, Lat = -37.759859}, + new() { Lng = 145.133858, Lat = -37.765015}, + new() { Lng = 145.143299, Lat = -37.770104}, + new() { Lng = 145.145187, Lat = -37.7737}, + new() { Lng = 145.137978, Lat = -37.774785}, + new() { Lng = 144.968119, Lat = -37.819616}, + new() { Lng = 144.695692, Lat = -38.330766}, + new() { Lng = 175.053218, Lat = -39.927193}, + new() { Lng = 174.865694, Lat = -41.330162}, + new() { Lng = 147.439506, Lat = -42.734358}, + new() { Lng = 147.501315, Lat = -42.734358}, + new() { Lng = 147.438, Lat = -42.735258}, + new() { Lng = 170.463352, Lat = -43.999792}, + }; + } +} diff --git a/ClientSideDemo/Shared/NavMenu.razor b/ClientSideDemo/Shared/NavMenu.razor index 1c407f92..e7d10a11 100644 --- a/ClientSideDemo/Shared/NavMenu.razor +++ b/ClientSideDemo/Shared/NavMenu.razor @@ -27,6 +27,11 @@ Markers +
  • + + Advanced marker + +
  • Info window