diff --git a/GoogleMapsComponents/GoogleMapsComponents.csproj b/GoogleMapsComponents/GoogleMapsComponents.csproj index 3a00eb39..984396c4 100644 --- a/GoogleMapsComponents/GoogleMapsComponents.csproj +++ b/GoogleMapsComponents/GoogleMapsComponents.csproj @@ -15,7 +15,7 @@ 3.0 true BlazorGoogleMaps - 4.9.1 + 4.9.2 Rungwiroon QueueStack Solution BlazorGoogleMaps diff --git a/GoogleMapsComponents/Maps/SymbolPath.cs b/GoogleMapsComponents/Maps/SymbolPath.cs index 5208149e..8bda018d 100644 --- a/GoogleMapsComponents/Maps/SymbolPath.cs +++ b/GoogleMapsComponents/Maps/SymbolPath.cs @@ -1,39 +1,41 @@ using System.Runtime.Serialization; +using System.Text.Json.Serialization; namespace GoogleMapsComponents.Maps; /// /// Built-in symbol paths. /// +[JsonConverter(typeof(JsonStringEnumConverter))] public enum SymbolPath { /// /// A backward-pointing closed arrow. /// - [EnumMember(Value = "3")] + [EnumMember(Value = "BACKWARD_CLOSED_ARROW")] BACKWARD_CLOSED_ARROW = 3, /// /// A backward-pointing open arrow. /// - [EnumMember(Value = "4")] + [EnumMember(Value = "BACKWARD_OPEN_ARROW")] BACKWARD_OPEN_ARROW = 4, /// /// A circle. /// - [EnumMember(Value = "0")] + [EnumMember(Value = "CIRCLE")] CIRCLE = 0, /// /// A forward-pointing closed arrow. /// - [EnumMember(Value = "1")] + [EnumMember(Value = "FORWARD_CLOSED_ARROW")] FORWARD_CLOSED_ARROW = 1, /// /// A forward-pointing open arrow. /// - [EnumMember(Value = "2")] + [EnumMember(Value = "FORWARD_OPEN_ARROW")] FORWARD_OPEN_ARROW = 2 } \ No newline at end of file diff --git a/GoogleMapsComponents/wwwroot/js/objectManager.js b/GoogleMapsComponents/wwwroot/js/objectManager.js index 23f17fd5..6772bedf 100644 --- a/GoogleMapsComponents/wwwroot/js/objectManager.js +++ b/GoogleMapsComponents/wwwroot/js/objectManager.js @@ -134,6 +134,25 @@ parsedItem[propertyName] = animationMapping[propertyValue] || propertyValue; } + if (propertyName == "icons") { + if (Array.isArray(propertyValue)) { + propertyValue.forEach(item => { + var iconPath = item.icon.path; + if (iconPath) { + const symbolPathMapping = { + "BACKWARD_CLOSED_ARROW": google.maps.SymbolPath.BACKWARD_CLOSED_ARROW, + "BACKWARD_OPEN_ARROW": google.maps.SymbolPath.BACKWARD_OPEN_ARROW, + "CIRCLE": google.maps.SymbolPath.CIRCLE, + "FORWARD_CLOSED_ARROW": google.maps.SymbolPath.FORWARD_CLOSED_ARROW, + "FORWARD_OPEN_ARROW": google.maps.SymbolPath.FORWARD_OPEN_ARROW, + }; + + item.icon.path = symbolPathMapping[item.icon.path]; + } + }); + } + } + // Convert specific Google Maps CollisionBehavior strings to their corresponding objects if (typeof propertyValue === "string" && propertyValue.startsWith("google.maps.CollisionBehavior")) { const collisionBehaviorMapping = { diff --git a/ServerSideDemo/Pages/MapPolyline.razor b/ServerSideDemo/Pages/MapPolyline.razor index d96e66be..ec8090d0 100644 --- a/ServerSideDemo/Pages/MapPolyline.razor +++ b/ServerSideDemo/Pages/MapPolyline.razor @@ -70,11 +70,32 @@ private async Task StartDrawingPolyline() { - _polyline = await Polyline.CreateAsync(_map1.JsRuntime, new PolylineOptions() + _polyline = await Polyline.CreateAsync(_map1.JsRuntime, + new PolylineOptions() { Draggable = true, Editable = true, - Map = _map1.InteropObject + Map = _map1.InteropObject, + Icons = new IconSequence[] { + new IconSequence + { + Icon = new Symbol { + Path = SymbolPath.BACKWARD_CLOSED_ARROW, + Scale = 3f, + StrokeColor = "green" }, + Offset = "0%" + }, + new IconSequence + { + Icon = new Symbol + { + Path = SymbolPath.CIRCLE, + Scale = 3f, + StrokeColor = "red" + }, + Offset = "100%" + }, + } }); _path.Clear();