Is it possible to move a pin on a map by click drag and drop?

2 posts, 1 answers
  1. John
    John avatar
    3 posts
    Member since:
    Mar 2016

    Posted 21 Jun Link to this post

    This is for moving a pin to a precise location on the map.  I saw the example of moving a pin and dropping it to a list box, but not to another location on the map, then save that new locations coordinates.  Thanks!
  2. Answer
    Hristo
    Admin
    Hristo avatar
    1031 posts

    Posted 23 Jun Link to this post

    Hi John,

    Thank you for writing.

    You can follow a similar approach and handle the DragDrop event of the map instead of the list view. Please check my code snippet below: 
    public partial class DragAndDropForm : RadForm
    {
        public DragAndDropForm()
        {
            InitializeComponent();
     
            this.SetupProviders();
            this.SetupLayer();
            this.SetupLegend();
            this.SetupData();
     
            this.radMap1.AllowDrop = true;
     
            this.radMap1.MouseMove += RadMap1_MouseMove;
            this.radMap1.MouseUp += RadMap1_MouseUp;
            this.radMap1.DragEnter += RadMap1_DragEnter;
            this.radMap1.DragDrop += RadMap1_DragDrop;
        }
     
        private void RadMap1_DragDrop(object sender, DragEventArgs e)
        {
            MapPin pin = e.Data.GetData(typeof(MapPin)) as MapPin;
            if (pin != null)
            {
                Point p = this.radMap1.MapElement.PointFromScreen(new Point(e.X, e.Y));
                PointL pl = new PointL(p.X + this.radMap1.MapElement.ViewportInPixels.Location.X, p.Y + this.radMap1.MapElement.ViewportInPixels.Location.Y);
                PointG location = MapTileSystemHelper.PixelXYToLatLong(pl.X, pl.Y, this.radMap1.MapElement.ZoomLevel);
                pin.Location = new PointG(location.Latitude, location.Longitude);
            }
        }
     
        private void RadMap1_MouseMove(object sender, MouseEventArgs e)
        {
            if (!(e.Button == MouseButtons.Left))
            {
                return;
            }
     
            PointL point = new PointL(e.X - this.radMap1.MapElement.PanOffset.Width, e.Y - this.radMap1.MapElement.PanOffset.Height);
            MapPin pin = this.radMap1.Layers.HitTest(point) as MapPin;
     
            if (pin != null && this.radMap1.MapElement.EnablePanning)
            {
                this.radMap1.MapElement.EnablePanning = false;
            }
     
            if (pin == null && !this.radMap1.MapElement.EnablePanning)
            {
                this.radMap1.MapElement.EnablePanning = true;
            }
     
            if (pin != null)
            {
                ((RadMap)sender).DoDragDrop(pin, DragDropEffects.Move);
            }
        }
     
        private void RadMap1_DragEnter(object sender, DragEventArgs e)
        {
            MapPin pin = e.Data.GetData(typeof(MapPin)) as MapPin;
            e.Effect = pin == null ? DragDropEffects.None : DragDropEffects.Move;
        }
     
        private void RadMap1_MouseUp(object sender, MouseEventArgs e)
        {
            this.radMap1.MapElement.EnablePanning = true;
        }
     
        private void SetupProviders()
        {
            OpenStreetMapProvider osmProvider = new OpenStreetMapProvider();
            osmProvider.InitializationComplete += OsmProvider_InitializationComplete;
     
            this.radMap1.MapElement.Providers.Add(osmProvider);
        }
     
        private void OsmProvider_InitializationComplete(object sender, System.EventArgs e)
        {
            this.radMap1.Pan(new SizeL(-240, -440));
        }
     
        private void SetupLayer()
        {
            MapLayer pinsLayer = new MapLayer("Pins");
            MapLayer calloutLayer = new MapLayer("Callout");
            this.radMap1.Layers.Add(pinsLayer);
            this.radMap1.Layers.Add(calloutLayer);
        }
     
        private void SetupLegend()
        {
            this.radMap1.MapElement.LegendElement.TitleElement.Text = "Pins";
            this.radMap1.MapElement.LegendElement.SubtitleElement.Text = "Pin Layer";
            this.radMap1.MapElement.LegendElement.Orientation = Orientation.Horizontal;
     
            this.radMap1.MapElement.LegendElement.ItemStackElement.Children.Add(new MapLegendItemElement("Pins", Color.FromArgb(37, 160, 218)));
     
        }
     
        private void SetupData()
        {
            this.radMap1.BeginUpdate();
     
            using (StringReader reader = new StringReader(Properties.Resources.PhotoSpots))
            {
                string line;
     
                while ((line = reader.ReadLine()) != null)
                {
                    string[] coordinates = line.Split(',');
                    double latitude = double.Parse(coordinates[0], CultureInfo.InvariantCulture);
                    double longitude = double.Parse(coordinates[1], CultureInfo.InvariantCulture);
     
                    MapPin pin = new MapPin(new PointG(latitude, longitude));
                    pin.Text = "Lat: " + coordinates[0] + " Long: " + coordinates[1];
                    pin.BackColor = Color.FromArgb(37, 160, 218);
                    this.radMap1.Layers["Pins"].Add(pin);
                }
            }
     
            this.radMap1.EndUpdate();
        }
    }

    I am also sending you a short video showing the result on my end.

    I hope this helps. Should you have further questions please do not hesitate to write back.

    Regards,
    Hristo
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top