Polygon Drag Not Refreshing Until Map Is Panned about mapsui

[pauldendulk]

Thanks a lot for providing a sample!

I could reproduce problematic behavior on Windows desktop. To circumvent caching I rewrote your sample to use a WritableLayer (derived from IModifyFeatureLayer) and to use a GeometryFeature to call IFeature.RenderedGeometry.Clear();

In v5 (not released yet) this was already changed. There you do not need to use a specific layer. You do need to call IFeature.Modified();

Note, that we have samples for editing. They need to be simplified some more though. Using your own code like this is not a bad idea (perhaps better) but the samples can help you find the difference.

using Mapsui;
using Mapsui.ArcGIS;
using Mapsui.ArcGIS.ImageServiceProvider;
using Mapsui.Cache;
using Mapsui.Extensions;
using Mapsui.Layers;
using Mapsui.Nts;
using Mapsui.Nts.Extensions;
using Mapsui.Providers;
using Mapsui.Styles;
using Mapsui.Tiling;
using Mapsui.UI.Maui;
using NetTopologySuite.Geometries;
using System.Diagnostics;
using Brush = Mapsui.Styles.Brush;
using Color = Mapsui.Styles.Color;
using Polygon = NetTopologySuite.Geometries.Polygon;

namespace MauiApp1
{
    public partial class MainPage : ContentPage
    {

        GeometryFeature _draggedPolygon;
        List<Coordinate> _draggedOrigCoords;
        MPoint _touchStartedScreenPoint { get; set; }
        ILayer _touchStartedLayer { get; set; }
        GeometryFeature _polygonFeature;
        MapControl _mapControl;
        double x = -9188151.36056;
        double y = 3235144.74039;

        public MainPage()
        {
            InitializeComponent();

            _mapControl = new Mapsui.UI.Maui.MapControl()
            {
                Map = new Mapsui.Map()
                {
                    CRS = "EPSG:3857",
                }
            };

            _mapControl.Map.Layers.Add(OpenStreetMap.CreateTileLayer());
            _mapControl.Loaded += MapControl_Loaded;
            _mapControl.TouchStarted += MapControl_TouchStarted;
            _mapControl.TouchMove += MapControl_TouchMove;
            _mapControl.TouchEnded += MapControl_TouchEnded;

            var point = new MPoint(x, y);
            _mapControl.Map.Home = (n) => n.CenterOnAndZoomTo(point, resolution: 1000, 500, Mapsui.Animations.Easing.CubicOut);

            Content = _mapControl;
        }

        private void MapControl_TouchEnded(object sender, Mapsui.UI.TouchedEventArgs e)
        {
            _mapControl.Map.Navigator.PanLock = false;
            _touchStartedScreenPoint = null;
            ClearPolygonFields();
        }

        private void MapControl_TouchMove(object sender, Mapsui.UI.TouchedEventArgs e)
        {
            var point = e.ScreenPoints.First();
            if (_touchStartedLayer?.Name == "Polygons")
            {
                MovePolygon(point, _polygonFeature);
            }
        }

        private void MapControl_TouchStarted(object sender, Mapsui.UI.TouchedEventArgs e)
        {
            var mapInfo = _mapControl.GetMapInfo(e.ScreenPoints.FirstOrDefault());
            _touchStartedLayer = mapInfo.Layer;
            _touchStartedScreenPoint = e.ScreenPoints.First();
        }

        private void MapControl_Loaded(object sender, EventArgs e)
        {
            var baseCoordinate = new Coordinate(x, y);
            _polygonFeature = CreatePolygon(baseCoordinate);
            var polygonLayer = CreatePolygonLayer(_polygonFeature);
            _mapControl.Map.Layers.Add(polygonLayer);
            _mapControl.Refresh();
        }

        private void ClearPolygonFields()
        {
            Debug.WriteLine("Ended");

            _draggedPolygon = null;
            _draggedOrigCoords = null;
        }

        private void MovePolygon(MPoint screenPoint, GeometryFeature geometryFeature)
        {
            Debug.WriteLine($"Polygon Coord 0 X: {geometryFeature.Geometry.Coordinates.First().X}");
            Debug.WriteLine($"Polygon Coord 0 Y: {geometryFeature.Geometry.Coordinates.First().Y}");


            if (_draggedPolygon == null)
            {
                _mapControl.Map.Navigator.PanLock = true;
                // set the dragged polygon
                _draggedPolygon = geometryFeature;
                _draggedOrigCoords = geometryFeature.Geometry.Coordinates.Select(r => new Coordinate(r.X, r.Y)).ToList();
            }
            else if (_touchStartedScreenPoint != null)
            {
                // move polygon with screen point 
                for (var i = 0; i < geometryFeature.Geometry.Coordinates.Length; i++)
                {
                    var coordinate = geometryFeature.Geometry.Coordinates[i];
                    var originalCoordinate = _draggedOrigCoords[i];
                    var firstTouchedWorldPoint = _mapControl.Map.Navigator.Viewport.ScreenToWorld(_touchStartedScreenPoint);
                    var currentWorldPoint = _mapControl.Map.Navigator.Viewport.ScreenToWorld(screenPoint);

                    coordinate.X = Math.Round(currentWorldPoint.X - firstTouchedWorldPoint.X + originalCoordinate.X, 5, MidpointRounding.AwayFromZero);
                    coordinate.Y = Math.Round(currentWorldPoint.Y - firstTouchedWorldPoint.Y + originalCoordinate.Y, 5, MidpointRounding.AwayFromZero);

                }
            }

            _draggedPolygon.RenderedGeometry.Clear();
            _mapControl.Refresh();

        }

        private ILayer CreatePolygonLayer(GeometryFeature polygon)
        {
            var polygonList = new List<GeometryFeature> { { polygon } };
            var layer = new WritableLayer()
            {
                Name = "Polygons",
                Style = new VectorStyle
                {
                    Fill = new Brush(Color.Orange),
                    Outline = new Pen
                    {
                        Color = Color.Orange,
                        Width = 1,
                        PenStyle = PenStyle.DashDotDot,
                        PenStrokeCap = PenStrokeCap.Round
                    }
                },
                Opacity = .3,
                IsMapInfoLayer = true,
            };
            layer.AddRange(polygonList);

            return layer;
        }

        private GeometryFeature CreatePolygon(Coordinate baseCoordinate)
        {
            var width = 250000;
            var height = 250000;

            var point = new MPoint(baseCoordinate.X, baseCoordinate.Y);
            var topLeft = new Coordinate(point.X - (width / 2), point.Y - (height / 2));
            var topRight = new Coordinate(point.X + (width / 2), point.Y - (height / 2));
            var bottomRight = new Coordinate(point.X + (width / 2), point.Y + (height / 2));
            var bottomLeft = new Coordinate(point.X - (width / 2), point.Y + (height / 2));

            var ring = new LinearRing(new[] { topLeft, topRight, bottomRight, bottomLeft, topLeft });
            var polygon = new Polygon(ring);

            return new GeometryFeature(polygon);
        }
    }
}

[nm4568]

Great! Thank you for the resolution and you are quite welcome for the sample.

I've tested this code out and it is working as expected.

Looking forward to v5 :)