This is a migrated thread and some comments may be shown as answers.

Clickable Map Points in WinForm

3 Answers 44 Views
Map
This is a migrated thread and some comments may be shown as answers.
Ammar
Top achievements
Rank 1
Ammar asked on 15 Feb 2021, 07:27 PM

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?

 

3 Answers, 1 is accepted

Sort by
0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 16 Feb 2021, 01:50 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Ammar
Top achievements
Rank 1
answered on 22 Feb 2021, 10:50 PM

Thanks Dess.

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

0
Dess | Tech Support Engineer, Principal
Telerik team
answered on 23 Feb 2021, 05:25 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Map
Asked by
Ammar
Top achievements
Rank 1
Answers by
Dess | Tech Support Engineer, Principal
Telerik team
Ammar
Top achievements
Rank 1
Share this question
or