Clickable Map Points in WinForm

[Ammar]

How can I add clickable map pins (or points) to RadMap in WinForm? 
I have already added Points  to the radMap but I want to create Events (Mouse click) and (Mouse hoover) on those points. 

Could you please help?

 

[Dess | Tech Support Engineer, Principal]

Hello, Ammar, 

In order to detect that a MapPin is clicked you can use the HitTest method that the MapLayer offers. I have prepared a sample code snippet for your reference: 

        public RadForm1()
        {
            InitializeComponent();
             
            OpenStreetMapProvider osmProvider = new OpenStreetMapProvider(); 
            osmProvider.EnableCaching = false;
            MapTileDownloader tileDownloader = osmProvider.TileDownloader as MapTileDownloader;
            tileDownloader.WebHeaders.Add(System.Net.HttpRequestHeader.UserAgent, "your application name");
            this.radMap1.MapElement.Providers.Add(osmProvider);

            SetupLayers();
            SetupData();
            this.radMap1.MouseDown += radMap1_MouseDown;
        }

        private void radMap1_MouseDown(object sender, MouseEventArgs e)
        {
            RadMap map = (RadMap)sender;
            PointL point = new PointL(e.X - map.MapElement.PanOffset.Width, e.Y - map.MapElement.PanOffset.Height);
            PointG location = MapTileSystemHelper.PixelXYToLatLong(point.X, point.Y, map.MapElement.ZoomLevel);

            while (location.Longitude > 180)
            {
                location.Longitude -= 360;
            }

            MapPin pin = map.MapElement.Layers["CitiesLayer"].HitTest(location) as MapPin;
            if (pin != null)
            {
                this.Text = "Pin Clicked";
            }
        }

        private void SetupLayers()
        {
            MapLayer easternLayer = new MapLayer("CitiesLayer");
            this.radMap1.Layers.Add(easternLayer);
        }

        private void SetupData()
        {
            MapPin element = new MapPin(new PointG(40.4467648, -80.01576030));
            element.Text = "Pittsburgh";
            element.BackColor = Color.Red;
            this.radMap1.Layers["CitiesLayer"].Add(element);
            element = new MapPin(new PointG(40.8130697, -74.07439790));
            element.Text = "New York";
            element.BackColor = Color.Green;
            this.radMap1.Layers["CitiesLayer"].Add(element);
            element = new MapPin(new PointG(42.3665137, -71.06160420));
            element.Text = "Boston";
            element.BackColor = Color.Blue;
            this.radMap1.Layers["CitiesLayer"].Add(element);
            element = new MapPin(new PointG(43.6434661, -79.37909890));
            element.Text = "Toronto";
            element.BackColor = Color.Yellow;
            this.radMap1.Layers["CitiesLayer"].Add(element);
        }

I hope this information helps. If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[Ammar]

Thanks Dess.

This worked perfectly for me. Is there a way to use an image to display the map pin?

[Dess | Tech Support Engineer, Principal]

Hi, Ammar,

Please have a look at the following KB article demonstrating how to add an image to the MapPin: https://docs.telerik.com/devtools/winforms/knowledge-base/radmap-pins-with-an-image 

I believe that this solution would be applicable for your case.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik