Creating resizeable, draggable marker on mouse move

Topics: General
Feb 14, 2012 at 7:39 AM

Hello,

what is the best way to create resizable, dragable marker with shape of rectangle which is created during draging mouse with pressed button?

I was trying to figure out how examples works. I connected circle visual example with custom marker demo to drag shapes over the map - which doesn't work as it should ;).

What will the best to have access to methods which allow me to do think which I want?

 

Best regards!

Coordinator
Feb 14, 2012 at 7:42 AM

it's ..complicated ;}

Feb 14, 2012 at 7:51 AM

I think that resizing is the worst part of all of that. I thought that there is some prepared class which can handle it. I can drag rectangle shape over the map and creating rectangle on mouse move will be enough for now.

Feb 15, 2012 at 8:42 PM
Edited Feb 15, 2012 at 8:44 PM

[deleted]

Coordinator
Feb 16, 2012 at 9:34 AM

From: mike_mankus // restored post, may be helpful anyway...

"You need to use a polygon and four markers.  (i set two to invisable - you need them only to define the polygon) So you'll have a visable marker set to the top-left corner of the polygon and another visable one set to the bottom-right of the polygon.

Then you need to add a listener to the marker event for mousedown.  When the user mouse-down's on a marker (from the polygon) you need to set a flag that the mouse is down on a marker and set which marker is selected..  Then you need to add a listener for the mousemove event of the map.  If the mouse is moving and the current marker is one of the corners of the polygon AND the mouse is down, then you need to move that marker to the position of the mouse and update the polygon to the new size.

I have it working but my code has alot going on with it.  Take from it what you can.  When I need a polygon, I add it to the center of the map at a set size.  The user can then resize as needed.  Works great."

private GMapPolygon polygon;

private void CreatePoly()
{
    GPoint c = MainMap.MapProvider.Projection.FromLatLngToPixel(heatCenter, (int)MainMap.Zoom);
    int boxLength = (MainMap.MapProvider.Projection.FromLatLngToPixel(heatTL, (int)MainMap.Zoom).X - MainMap.MapProvider.Projection.FromLatLngToPixel(heatBR, (int)MainMap.Zoom).X) / 10;
    GMapMarker m1 = new GMapMarker(MainMap.MapProvider.Projection.FromPixelToLatLng(c.X - boxLength, c.Y - boxLength, (int)MainMap.Zoom));
    GMapMarker m2 = new GMapMarker(MainMap.MapProvider.Projection.FromPixelToLatLng(c.X + boxLength, c.Y - boxLength, (int)MainMap.Zoom));
    GMapMarker m3 = new GMapMarker(MainMap.MapProvider.Projection.FromPixelToLatLng(c.X + boxLength, c.Y + boxLength, (int)MainMap.Zoom));
    GMapMarker m4 = new GMapMarker(MainMap.MapProvider.Projection.FromPixelToLatLng(c.X - boxLength, c.Y + boxLength, (int)MainMap.Zoom));
    m1.IsVisible = m3.IsVisible = true;
    m2.IsVisible = m4.IsVisible = m2.IsHitTestVisible = m4.IsHitTestVisible = false;
    polygons.Markers.Clear();
    polygons.Markers.Add(m1);
    polygons.Markers.Add(m2);
    polygons.Markers.Add(m3);
    polygons.Markers.Add(m4);
    RegeneratePolygon();
}

private void RegeneratePolygon()
{
    List<PointLatLng> polygonPoints = new List<PointLatLng>();

    foreach (GMapMarker m in polygons.Markers)
    {
        if (m is GMapPolygonMarker)
        {
            m.Tag = polygonPoints.Count;
            polygonPoints.Add(m.Position);
        }
    }

    if (polygon == null)
    {
        polygon = new GMapPolygon(polygonPoints, "known source");
        polygon.Fill = new SolidBrush(Color.FromArgb(100, Color.AliceBlue));
        polygons.Polygons.Add(polygon);
    }
    else
    {
        polygon.Points.Clear();
        polygon.Points.AddRange(polygonPoints);

        if (polygons.Polygons.Count == 0)
        {
            polygons.Polygons.Add(polygon);
        }
        else
        {
            MainMap.UpdatePolygonLocalPosition(polygon);
        }
    }
}

private void MainMap_OnMarkerEnter(GMapMarker item)
{
    if (polygons.Markers.Contains(item) && !isDraggingMarker)
        currentMarker = item;
}

private void MainMap_MouseDown(object sender, MouseEventArgs e)
{
    if (e.Button == MouseButtons.Left && currentMarker != null && currentMarker.IsMouseOver)
        isDraggingMarker = true;
}

private void MainMap_MouseMove(object sender, MouseEventArgs e)
{
    if (e.Button == MouseButtons.Left && currentMarker != null && isDraggingMarker)
    {
        PointLatLng p = MainMap.FromLocalToLatLng(e.X, e.Y);
        string lat = GeoCoordinate.Convert(p.Lat, GPSType);
        string lng = GeoCoordinate.Convert(p.Lng, GPSType);
        mousePos.Text = "Lat: " + lat + "  " + "Lng: " + lng;

        if (currentMarker is GMapPolygonMarker)
        {
            int? pIndex = (int?)currentMarker.Tag;
            if (pIndex.HasValue)
            {
                if (pIndex < polygon.Points.Count)
                    polygon.Points[pIndex.Value] = p;

                if (pIndex.Value == 0 && pIndex < polygon.Points.Count)
                {
                    GMapMarker m2 = polygons.Markers[1];
                    GMapMarker m4 = polygons.Markers[3];
                    polygons.Markers[1].Position = new PointLatLng(p.Lat, m2.Position.Lng);
                    polygons.Markers[3].Position = new PointLatLng(m4.Position.Lat, p.Lng);
                    polygon.Points[1] = polygons.Markers[1].Position;
                    polygon.Points[3] = polygons.Markers[3].Position;
                }
                else if (pIndex.Value == 2 && pIndex < polygon.Points.Count)
                {
                    GMapMarker m2 = polygons.Markers[1];
                    GMapMarker m4 = polygons.Markers[3];
                    polygons.Markers[1].Position = new PointLatLng(m2.Position.Lat, p.Lng);
                    polygons.Markers[3].Position = new PointLatLng(p.Lat, m4.Position.Lng);
                    polygon.Points[1] = polygons.Markers[1].Position;
                    polygon.Points[3] = polygons.Markers[3].Position;
                }
                MainMap.UpdatePolygonLocalPosition(polygon);
            }
            currentMarker.Position = p;
        }
                
        MainMap.Refresh();
    }
}

Mar 5, 2012 at 10:15 AM

Hello,

 

for now I have tried something much more easily. I create area from ploygon using the mechanism of creating rectangle in Core. Then I added some ability to change values from dialog box - resize in manual way, for now.

It's good enough, but in future I will try with mentioned solution by you.

 

Regards!