Add support for MVCArray for polyline

[lombardk]

We use BlazorGoogleMaps in a vehicle tracking solution. New locations are thus periodically added to the polylines. Currently we set the whole path again which may impact on performance.

Google recommends to obtain the existing path and then just to push the new latLng points:
https://developers.google.com/maps/documentation/javascript/examples/polyline-complex
// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event: google.maps.MapMouseEvent) {
const path = poly.getPath();

// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear.
path.push(event.latLng);
}

BlazorGoogleMaps polyline.GetPath() however returns an IENumerable and not a List, so the new latLng's cannot be added.
Please consider changing GetPath() to return the List of points so that new latLng's can be added.

Thank you.

[valentasm1]

It is a bit different story. If i return List adding to it wont appear to map automaticlly.
Maybe it would be reasanable to have custom methor where GetPath would create path, add to array and then it would return ObservableCollection, when addded/removed element would access that element from array and then would add/remove element in js from that array. Or even having c# element Path with events add/remove which would work out of the box with solution.
Probable second approuch would allign more with this library.
As you see it is not so simple. I will try to do it this month. If you wish faster you could make PR.

[lombardk]

Good afternoon Valentas Thank you for the prompt feedback. I downloaded the BlazorGoogleMaps project from Github and after some testing, the following is a short term solution that works: 1. In objectManager.js add new function , addLLtoPLine(plGuid, llLat, llLng) { const pline = window._blazorGoogleMapsObjects[plGuid]; const path = pline.getPath(); path.push(new google.maps.LatLng(llLat, llLng)); } 2. In Polyline.cs add new method public async void AddLatLng(IJSRuntime jsRuntime, Guid guid, LatLngLiteral ll) { await jsRuntime.InvokeVoidAsync("googleMapsObjectManager.addLLtoPLine", guid.ToString(), ll.Lat, ll.Lng); } 3. In MapPolyLine.razor, replace “await polyline.SetPath(path);” with “polyline.AddLatLng(map1.JsRuntime, polyline.Guid, e.LatLng);” I will appreciate it if you can review / comment on above. Regards Kobus Lombard E-mail: ***@***.***> ***@***.*** From: Valentas ***@***.***> Sent: 11 January 2022 16:30 To: rungwiroon/BlazorGoogleMaps ***@***.***> Cc: lombardk ***@***.***>; Author ***@***.***> Subject: Re: [rungwiroon/BlazorGoogleMaps] Add LatLng points to existing Polyline (Issue #169) It is a bit different story. If i return List adding to it wont appear to map automaticlly. Maybe it would be reasanable to have custom methor where GetPath would create path, add to array and then it would return ObservableCollection, when addded/removed element would access that element from array and then would add/remove element in js from that array. Or even having c# element Path with events add/remove which would work out of the box with solution. Probable second approuch would allign more with this library. As you see it is not so simple. I will try to do it this month. If you wish faster you could make PR. — Reply to this email directly, view it on GitHub <#169 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMO3JYR3HWVV4DOGWC6BE43UVQ5HHANCNFSM5LWLNJ3Q> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[valentasm1]

Technically yes. Practically this solution isnt very clean. I try to avoid adding any extra method if possible.

[valentasm1]

Let me know if it suits you.
I know it is not fully support for MVCArray but good draft to continue futher.
https://github.com/rungwiroon/BlazorGoogleMaps/releases/tag/1.5.1

[valentasm1]

Call CreatePath for polyline and then use returned object as in JS