rungwiroon / BlazorGoogleMaps

Blazor interop for GoogleMap library
MIT License
309 stars 99 forks source link

polygonList not rendering the polygons #323

Closed ham187 closed 1 month ago

ham187 commented 3 months ago

Is there anything extra we need to do when using polygonlist, I'm just using the same paths that worked indervidually, but its not creating them;

_polygonList = await PolygonList.CreateAsync(map1.JsRuntime, DictofAllPolygons);

valentasm1 commented 3 months ago

This one works. Added demo to server side map circle page

 private async void CreateBunchOfPolygon()
{
    var outerCoords = new List<LatLngLiteral>()
    {
        new LatLngLiteral(13.501908279929077, 100.69801114196777),
        new LatLngLiteral(13.491392275719202, 100.74933789367675),
        new LatLngLiteral(13.465851481053091, 100.71637890930175),
    };

    var innerCoords = new List<LatLngLiteral>()
    {
        new LatLngLiteral(13.487386057049033, 100.72633526916503),
        new LatLngLiteral(13.48137660307361, 100.719125491333),
        new LatLngLiteral(13.478705686132331, 100.72959683532714),
    };

    var createedPolygons = await PolygonList.CreateAsync(_map1.JsRuntime, new Dictionary<string, PolygonOptions>()
    {
        { Guid.NewGuid().ToString(), new PolygonOptions()
        {
            Paths = new[] { outerCoords, innerCoords },
            Draggable = true,
            Editable = false,
            FillColor = "blue",
            ZIndex = 999,
            Visible = true,
            StrokeWeight = 5,
            Map = _map1.InteropObject
        }}
    });
    var first = createedPolygons.Polygons.First().Value;
    var path = await first.GetPath();
    await _map1.InteropObject.SetCenter(path.First());
}
ham187 commented 3 months ago

Legend, that worked, I needed to add in : Map = _map1.InteropObject, in the options, sorry I thought the PolygonList.CreateAsync(_map1.JsRuntime, would do it ,

thank you

ham187 commented 3 months ago

sorry, is removing done via if (_polygonList != null) { await _polygonList.SetMaps(null); }

or

await _polygonList.RemoveAllAsync();

neither of them are working, I want to remove the polygon off the map

ham187 commented 3 months ago

Worked out you can do it with the loop;

foreach (var polygonz in _polygonList.Polygons) { await polygonz.Value.SetMap(null); }

does the maps version work?

_polygonList.SetMaps(null);

_polygonList.Polygons.Values.SetMap(null);

So its not one at a time?

valentasm1 commented 3 months ago

does the maps version work? I dont get this

ham187 commented 3 months ago

Sorry, No the maps version doesnt work, I wrote some javascript to handle it,

valentasm1 commented 3 months ago

Could you give example what steps is done and you dont get desired result? I want to reproduce

ham187 commented 3 months ago

sure, I'm not a good programmer, so likely doing something really bad but;

Concept I came up with was to get the guid's sent over in an array, find them using the object manager and remove them;

So javascript command: works for polygon or markers

function removeMarkerPolygon(sentRecords){   
    if (sentRecords != "") {
        for (var i = 0; i < sentRecords[0].length; i++) {

            var currentStr = sentRecords[i];

            var mark;
            mark = blazorGoogleMaps.objectManager.mapObjects[currentStr];

            if (mark != null) {
                mark.setMap(null);
                mark.setVisible(false);                       
            } 
        }
    }
}

//on the blazor side, I found out that there is a limit on the amount of data you can send, so I split at 20 (likely could be more)

List<string> listOfGuidsObjects = new List<string>();

foreach (var polygonz in _polygonList.Polygons)
{
    if (listOfGuidsObjects.Count == 20)
    {
        await JS.InvokeVoidAsync("removeMarkerPolygon", listOfGuidsObjects);
        listOfGuidsObjects.Clear();
    }

    listOfGuidsObjects.Add(polygonz.Value.Guid.ToString());
}
await JS.InvokeVoidAsync("removeMarkerPolygon", listOfGuidsObjects);

_polygonList.Polygons.Clear();
await _polygonList.RemoveAllAsync();

So result was it reduced the amount of websocket trips for removing, i will try to increase the 20 to see where it cuts off, to further reduce ws round trips

update- 35 works

valentasm1 commented 3 months ago

I think you could do similar to this. Whats wrong with this approuch?

private async Task RemoveBunchOfPolygon()
{
    if (_createedPolygons != null)
    {
        foreach (var markerListMarker in _createedPolygons.Polygons)
        {
            await markerListMarker.Value.SetMap(null);
        }

        await _createedPolygons.RemoveAllAsync();
    }
}