Skip to content

Commit

Permalink
Make obsolete AdvancedMarkerView
Browse files Browse the repository at this point in the history
  • Loading branch information
valentasm committed Jun 10, 2024
1 parent 05e4ee7 commit e011e7a
Show file tree
Hide file tree
Showing 7 changed files with 314 additions and 324 deletions.
26 changes: 25 additions & 1 deletion GoogleMapsComponents/Maps/AdvancedMarkerView.cs
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
using Microsoft.JSInterop;

using System;
using System.Threading.Tasks;

namespace GoogleMapsComponents.Maps;
Expand All @@ -8,6 +8,30 @@ namespace GoogleMapsComponents.Maps;
/// 2023-09
/// Notice: Available only in the v=beta channel.
/// </summary>
public class AdvancedMarkerElement : ListableEntityBase<AdvancedMarkerElementOptions>
{
// https://developers.google.com/maps/documentation/javascript/reference/3.55/advanced-markers
public const string GoogleMapAdvancedMarkerName = "google.maps.marker.AdvancedMarkerElement";

public static async Task<Marker> CreateAsync(IJSRuntime jsRuntime, AdvancedMarkerElementOptions? opts = null)
{
var jsObjectRef = await JsObjectRef.CreateAsync(jsRuntime, GoogleMapAdvancedMarkerName, opts);
var obj = new Marker(jsObjectRef);
return obj;
}

internal AdvancedMarkerElement(JsObjectRef jsObjectRef)
: base(jsObjectRef)
{
}

public Task<int> GetZIndex()
{
return _jsObjectRef.InvokeAsync<int>("getZIndex");
}
}

[Obsolete("Use AdvancedMarkerElement")]
public class AdvancedMarkerView : ListableEntityBase<AdvancedMarkerViewOptions>
{
// https://developers.google.com/maps/documentation/javascript/reference/3.55/advanced-markers
Expand Down
105 changes: 70 additions & 35 deletions GoogleMapsComponents/Maps/AdvancedMarkerViewOptions.cs
Original file line number Diff line number Diff line change
@@ -1,38 +1,73 @@
using System.Text.Json.Serialization;
using System;
using System.Text.Json.Serialization;

namespace GoogleMapsComponents.Maps
namespace GoogleMapsComponents.Maps;

public class AdvancedMarkerElementOptions : ListableEntityOptionsBase
{
public class AdvancedMarkerViewOptions : ListableEntityOptionsBase
{
/// <summary>
/// Sets the AdvancedMarkerElement's position. An AdvancedMarkerElement may be constructed without a position, but will not be displayed until its position is provided - for example, by a user's actions or choices. An AdvancedMarkerElement's position can be provided by setting AdvancedMarkerElement.position if not provided at the construction.
/// Note: AdvancedMarkerElement with altitude is only supported on vector maps.
/// </summary>
public LatLngLiteral? Position { get; set; }

/// <summary>
/// An enumeration specifying how an AdvancedMarkerElement should behave when it collides with another AdvancedMarkerElement or with the basemap labels on a vector map.
/// Note: AdvancedMarkerElement to AdvancedMarkerElement collision works on both raster and vector maps, however, AdvancedMarkerElement to base map's label collision only works on vector maps.
/// </summary>

[JsonConverter(typeof(GoogleMapsComponents.Serialization.JsonStringEnumConverterEx<CollisionBehavior>))]
public CollisionBehavior? CollisionBehavior { get; set; }

/// <summary>
/// 2023-10-29 Currently only html content is supported
/// Svg, images url could not work
/// </summary>
public string? Content { get; set; }

/// <summary>
/// If true, the AdvancedMarkerElement can be dragged.
/// Note: AdvancedMarkerElement with altitude is not draggable.
/// </summary>
public bool GmpDraggable { get; set; }

/// <summary>
/// Rollover text. If provided, an accessibility text (e.g. for use with screen readers) will be added to the
/// </summary>
public string? Title { get; set; }
}
/// <summary>
/// Sets the AdvancedMarkerElement's position. An AdvancedMarkerElement may be constructed without a position, but will not be displayed until its position is provided - for example, by a user's actions or choices. An AdvancedMarkerElement's position can be provided by setting AdvancedMarkerElement.position if not provided at the construction.
/// Note: AdvancedMarkerElement with altitude is only supported on vector maps.
/// </summary>
public LatLngLiteral? Position { get; set; }

/// <summary>
/// An enumeration specifying how an AdvancedMarkerElement should behave when it collides with another AdvancedMarkerElement or with the basemap labels on a vector map.
/// Note: AdvancedMarkerElement to AdvancedMarkerElement collision works on both raster and vector maps, however, AdvancedMarkerElement to base map's label collision only works on vector maps.
/// </summary>

[JsonConverter(typeof(Serialization.JsonStringEnumConverterEx<CollisionBehavior>))]
public CollisionBehavior? CollisionBehavior { get; set; }

/// <summary>
/// 2023-10-29 Currently only html content is supported
/// Svg, images url could not work
/// </summary>
public string? Content { get; set; }

/// <summary>
/// If true, the AdvancedMarkerElement can be dragged.
/// Note: AdvancedMarkerElement with altitude is not draggable.
/// </summary>
public bool GmpDraggable { get; set; }

/// <summary>
/// Rollover text. If provided, an accessibility text (e.g. for use with screen readers) will be added to the
/// </summary>
public string? Title { get; set; }
}

[Obsolete("Use AdvancedMarkerElementOptions")]
public class AdvancedMarkerViewOptions : ListableEntityOptionsBase
{
/// <summary>
/// Sets the AdvancedMarkerElement's position. An AdvancedMarkerElement may be constructed without a position, but will not be displayed until its position is provided - for example, by a user's actions or choices. An AdvancedMarkerElement's position can be provided by setting AdvancedMarkerElement.position if not provided at the construction.
/// Note: AdvancedMarkerElement with altitude is only supported on vector maps.
/// </summary>
public LatLngLiteral? Position { get; set; }

/// <summary>
/// An enumeration specifying how an AdvancedMarkerElement should behave when it collides with another AdvancedMarkerElement or with the basemap labels on a vector map.
/// Note: AdvancedMarkerElement to AdvancedMarkerElement collision works on both raster and vector maps, however, AdvancedMarkerElement to base map's label collision only works on vector maps.
/// </summary>

[JsonConverter(typeof(Serialization.JsonStringEnumConverterEx<CollisionBehavior>))]
public CollisionBehavior? CollisionBehavior { get; set; }

/// <summary>
/// 2023-10-29 Currently only html content is supported
/// Svg, images url could not work
/// </summary>
public string? Content { get; set; }

/// <summary>
/// If true, the AdvancedMarkerElement can be dragged.
/// Note: AdvancedMarkerElement with altitude is not draggable.
/// </summary>
public bool GmpDraggable { get; set; }

/// <summary>
/// Rollover text. If provided, an accessibility text (e.g. for use with screen readers) will be added to the
/// </summary>
public string? Title { get; set; }
}
Original file line number Diff line number Diff line change
Expand Up @@ -11,28 +11,28 @@ namespace GoogleMapsComponents.Maps.Extension;

/// <summary>
/// <para>
/// A class able to manage a lot of AdvancedMarkerView objects and get / set their properties at the same time, eventually with different values
/// A class able to manage a lot of AdvancedMarkerElement objects and get / set their properties at the same time, eventually with different values
/// </para>
/// <para>
/// Main concept is that for each AdvancedMarkerView to be distinguished from other ones, it needs
/// Main concept is that for each AdvancedMarkerElement to be distinguished from other ones, it needs
/// to have a "unique key" with an "external world meaning", so not necessarily a GUID.
/// </para>
/// <para>
/// In real cases Markers are likely to be linked to places, activities, transit stops and so on -> So, what better way to choose as AdvancedMarkerView "unique key" the "id" of the object each marker is related to?
/// In real cases Markers are likely to be linked to places, activities, transit stops and so on -> So, what better way to choose as AdvancedMarkerElement "unique key" the "id" of the object each marker is related to?
/// A string key has been selected as type due to its implicit versatility.
/// </para>
/// <para>
/// To create Markers, simply call <c>AdvancedMarkerList.CreateAsync</c> with a Dictionary of desired AdvancedMarkerView keys and AdvancedMarkerViewOptions values.
/// To create Markers, simply call <c>AdvancedMarkerList.CreateAsync</c> with a Dictionary of desired AdvancedMarkerElement keys and AdvancedMarkerElementOptions values.
/// After that, a new instance of AdvancedMarkerList class will be returned with its Markers dictionary member populated with the corresponding results
/// </para>
/// <para>
/// At run-time is possible to:<br/>
/// <list type="number">
/// <item><description>add AdvancedMarkerView to the same AdvancedMarkerList class using <c>AddMultipleAsync</c> method (only keys not matching with existent AdvancedMarkerView keys will be created)<br/>
/// Markers dictionary will contain "union distinct" of existent AdvancedMarkerView's keys and new keys</description>
/// <item><description>add AdvancedMarkerElement to the same AdvancedMarkerList class using <c>AddMultipleAsync</c> method (only keys not matching with existent AdvancedMarkerElement keys will be created)<br/>
/// Markers dictionary will contain "union distinct" of existent AdvancedMarkerElement's keys and new keys</description>
/// </item>
/// <item><description>remove AdvancedMarkerView from the AdvancedMarkerList class (only AdvancedMarkerView having keys matching with existent keys will be removed)<br/>
/// Markers dictionary will contain "original - required and found" AdvancedMarkerView's keys (eventually any is all AdvancedMarkerView are removed)</description>
/// <item><description>remove AdvancedMarkerElement from the AdvancedMarkerList class (only AdvancedMarkerElement having keys matching with existent keys will be removed)<br/>
/// Markers dictionary will contain "original - required and found" AdvancedMarkerElement's keys (eventually any is all AdvancedMarkerElement are removed)</description>
/// </item>
/// </list>
/// </para>
Expand All @@ -43,30 +43,30 @@ namespace GoogleMapsComponents.Maps.Extension;
/// </para>
/// <para>
/// Each setter properties can be used as follows:<br/>
/// With a <c>Dictionary&lt;string, {property type}&gt;</c> indicating for each AdvancedMarkerView (related to that key) the corresponding related property value.
/// With a <c>Dictionary&lt;string, {property type}&gt;</c> indicating for each AdvancedMarkerElement (related to that key) the corresponding related property value.
/// </para>
/// </summary>
public class AdvancedMarkerList : ListableEntityListBase<AdvancedMarkerView, AdvancedMarkerViewOptions>
public class AdvancedMarkerElementList : ListableEntityListBase<AdvancedMarkerElement, AdvancedMarkerElementOptions>
{
public Dictionary<string, AdvancedMarkerView> Markers => BaseListableEntities;
public Dictionary<string, AdvancedMarkerElement> Markers => BaseListableEntities;

/// <summary>
/// Create markers list
/// </summary>
/// <param name="jsRuntime"></param>
/// <param name="opts">Dictionary of desired AdvancedMarkerView keys and AdvancedMarkerViewOptions values. Key as any type unique key. Not necessarily Guid</param>
/// <param name="opts">Dictionary of desired AdvancedMarkerElement keys and AdvancedMarkerElementOptions values. Key as any type unique key. Not necessarily Guid</param>
/// <returns>New instance of AdvancedMarkerList class will be returned with its Markers dictionary member populated with the corresponding results</returns>
public static async Task<AdvancedMarkerList> CreateAsync(IJSRuntime jsRuntime, Dictionary<string, AdvancedMarkerViewOptions> opts)
public static async Task<AdvancedMarkerElementList> CreateAsync(IJSRuntime jsRuntime, Dictionary<string, AdvancedMarkerElementOptions> opts)
{
var jsObjectRef = new JsObjectRef(jsRuntime, Guid.NewGuid());

Dictionary<string, JsObjectRef> jsObjectRefs = await JsObjectRef.CreateMultipleAsync(
jsRuntime,
AdvancedMarkerView.GoogleMapAdvancedMarkerName,
AdvancedMarkerElement.GoogleMapAdvancedMarkerName,
opts.ToDictionary(e => e.Key, e => (object)e.Value));

Dictionary<string, AdvancedMarkerView> objs = jsObjectRefs.ToDictionary(e => e.Key, e => new AdvancedMarkerView(e.Value));
var obj = new AdvancedMarkerList(jsObjectRef, objs);
Dictionary<string, AdvancedMarkerElement> objs = jsObjectRefs.ToDictionary(e => e.Key, e => new AdvancedMarkerElement(e.Value));
var obj = new AdvancedMarkerElementList(jsObjectRef, objs);

return obj;
}
Expand All @@ -84,10 +84,10 @@ public static async Task<AdvancedMarkerList> CreateAsync(IJSRuntime jsRuntime, D
/// <returns>
/// The managed list. Assign to the variable you used as parameter.
/// </returns>
public static async Task<AdvancedMarkerList> SyncAsync(AdvancedMarkerList? list,
public static async Task<AdvancedMarkerElementList> SyncAsync(AdvancedMarkerElementList? list,
IJSRuntime jsRuntime,
Dictionary<string, AdvancedMarkerViewOptions> opts,
Action<MouseEvent, string, AdvancedMarkerView>? clickCallback = null)
Dictionary<string, AdvancedMarkerElementOptions> opts,
Action<MouseEvent, string, AdvancedMarkerElement>? clickCallback = null)
{
if (opts.Count == 0)
{
Expand All @@ -101,7 +101,7 @@ public static async Task<AdvancedMarkerList> SyncAsync(AdvancedMarkerList? list,
{
if (list == null)
{
list = await AdvancedMarkerList.CreateAsync(jsRuntime, new Dictionary<string, AdvancedMarkerViewOptions>());
list = await AdvancedMarkerElementList.CreateAsync(jsRuntime, new Dictionary<string, AdvancedMarkerElementOptions>());
if (clickCallback != null)
{
list.EntityClicked += (_, e) =>
Expand All @@ -115,7 +115,7 @@ public static async Task<AdvancedMarkerList> SyncAsync(AdvancedMarkerList? list,
return list;
}

private AdvancedMarkerList(JsObjectRef jsObjectRef, Dictionary<string, AdvancedMarkerView> markers)
private AdvancedMarkerElementList(JsObjectRef jsObjectRef, Dictionary<string, AdvancedMarkerElement> markers)
: base(jsObjectRef, markers)
{
}
Expand All @@ -125,18 +125,18 @@ private AdvancedMarkerList(JsObjectRef jsObjectRef, Dictionary<string, AdvancedM
/// </summary>
/// <param name="opts"></param>
/// <returns></returns>
public async Task SetMultipleAsync(Dictionary<string, AdvancedMarkerViewOptions> opts)
public async Task SetMultipleAsync(Dictionary<string, AdvancedMarkerElementOptions> opts)
{
await base.SetMultipleAsync(opts, AdvancedMarkerView.GoogleMapAdvancedMarkerName);
await base.SetMultipleAsync(opts, AdvancedMarkerElement.GoogleMapAdvancedMarkerName);
}

/// <summary>
/// Only keys not matching with existent AdvancedMarkerView keys will be created
/// Only keys not matching with existent AdvancedMarkerElement keys will be created
/// </summary>
/// <returns></returns>
public async Task AddMultipleAsync(Dictionary<string, AdvancedMarkerViewOptions> opts)
public async Task AddMultipleAsync(Dictionary<string, AdvancedMarkerElementOptions> opts)
{
await base.AddMultipleAsync(opts, AdvancedMarkerView.GoogleMapAdvancedMarkerName);
await base.AddMultipleAsync(opts, AdvancedMarkerElement.GoogleMapAdvancedMarkerName);
}

public Task<Dictionary<string, Animation>> GetAnimations(List<string>? filterKeys = null)
Expand Down Expand Up @@ -352,7 +352,7 @@ public Task SetCursors(Dictionary<string, string> cursors)
}

/// <summary>
/// Set Icon on each AdvancedMarkerView matching a param dictionary key to the param value with single JSInterop call.
/// Set Icon on each AdvancedMarkerElement matching a param dictionary key to the param value with single JSInterop call.
/// </summary>
/// <param name="icons"></param>
/// <returns></returns>
Expand All @@ -379,7 +379,7 @@ public Task SetIcons(Dictionary<string, Icon> icons)
}

/// <summary>
/// Set Label on each AdvancedMarkerView matching a param dictionary key to the param value with single JSInterop call.
/// Set Label on each AdvancedMarkerElement matching a param dictionary key to the param value with single JSInterop call.
/// </summary>
/// <param name="labels"></param>
/// <returns></returns>
Expand Down
7 changes: 2 additions & 5 deletions ServerSideDemo/Pages/AdvancedMarkerViewPage.razor
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,11 @@
@code {
private GoogleMap _map1;
private MapOptions _mapOptions;

private readonly List<String> _events = new List<String>();

private ElementReference memberRef;
private LatLngBounds _bounds;

[Inject]
public IJSRuntime JsObjectRef { get; set; }
public IJSRuntime JsObjectRef { get; set; } = null!;

protected override void OnInitialized()
{
Expand All @@ -43,7 +40,7 @@
{
var mapCenter = await _map1.InteropObject.GetCenter();

var marker = await AdvancedMarkerView.CreateAsync(_map1.JsRuntime, new AdvancedMarkerViewOptions()
var marker = await AdvancedMarkerElement.CreateAsync(_map1.JsRuntime, new AdvancedMarkerElementOptions()
{
Position = mapCenter,
Map = _map1.InteropObject,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,10 @@

<h1>Google Advanced Map Markers List</h1>

<GoogleMap @ref="@map1" Id="map1" Options="@mapOptions"></GoogleMap>
<GoogleMap @ref="_map1" Id="map1" Options="_mapOptions"></GoogleMap>
<button @onclick="AddMarker1">Add advanced markers part 1</button>
<button @onclick="AddMarker2">Add advanced markers part 2</button>
<button @onclick="RemoveMarker">Remove advanced marker</button>
<button @onclick="@RemoveMarkers">Remove all advanced markers</button>
<button @onclick="RemoveMarkers">Remove all advanced markers</button>
<button @onclick="Recenter">Re-center advanced marker</button>
<button @onclick="FitBounds">Fit to advanced markers</button>


<MapEventList @ref="@eventList" Events="@_events"></MapEventList>
<button @onclick="FitBounds">Fit to advanced markers</button>
Loading

0 comments on commit e011e7a

Please sign in to comment.