The GMap.NET control is a popular control for .NET that allows you to put interactive maps on your Windows Forms. In this third and last part of our GMap.NET tutorial, we show how you can add clickable polygons and routes to your maps, and how to style them. Don’t forget to visit the first part […]

This article was posted by Independent Software, a website and database application development company based in Maputo, Mozambique. Our website offers regular write-ups on technical and design issues, ranging from details at code level to 3D Studio Max rendering. Read more about Independent Software's philosophy, or get in touch with Independent Software.

The GMap.NET control is a popular control for .NET that allows you to put interactive maps on your Windows Forms. In this third and last part of our GMap.NET tutorial, we show how you can add clickable polygons and routes to your maps, and how to style them.

Don’t forget to visit the first part of the tutorial for GMap.NET: Setting up your map first! Also, if you landed here first, be sure to have a look at part 2: GMap.NET: Adding markers to your map.

Adding polygons to the map

Markers may not always cut it. Sometimes you need to delimit an area of your map. For instance, you may need to indicate where new construction will take place, or who owns which land. Polygons allow you to show just that. To add a polygon to your map, you must define it as a list of latitude/longitude coordinates:

The coordinates are placed in a generic list, which is then passed to the GMapPolygon constructor. I’ve created a special overlay just for the polygons, so that I can show or hide them all at the same time while my markers (which live in a different overlay) remain visible. You are free to put markers, polygons and routes all in the same overlay though.

Tip: don’t forget to add overlays to the map, or they (and the polygons in them) won’t show up.

The polygon that appears on the map will be white with a purple border (you may have to zoom in a little to see it). We can change these colors with the following code:

Here, I’ve given the polygon a red fill at at alpha = 50 (alpha ranges from 0, which is fully transparent, to 255, which is opaque), and red line around it with a thickness of one pixel.

GMap.NET: A map with a polygon

Polygon events

While polygons cannot have tooltips, they can be clicked and you can intercept these clicks. The GMapPolygon  class itself does not support any events, but you’ll find the OnPolygonClick  event in the GMap.NET control itself (look for it in the Properties window, under Events). Thus you can set a Tag value for your polygon and read that in the event code, so you’ll know which polygon was clicked:

If you need even more interaction, the GMap.NET control also has the events OnPolygonEnter  (for when the mouse cursor hovers over a polygon) and OnPolygonLeave  (for when the mouse cursor leaves a polygon) available.

Adding routes to the map

In GMap.NET, routes are very similar to polygons, only without the fill color. The following code adds a route to the map:

Note that I’ve set the route stroke color to red and given the stroke a thickness of 3, or it would blend in with the map since the default color is purple. You may have to zoom the map a little to see the route along the Jardin des Tuileries.

GMap.NET: A route on the map

What’s special about routes is that you can have GMap.NET calculate the total route length using the route’s Distance  property. This will return the route length in kilometers.

Conclusion

This tutorial should allow you to get started with GMap.NET. Here are some parting tips:

You can use different map providers. Some are faster than others. Also, some show more data than others. Depending on your location, this can make all the difference (Maputo, Mozambique is such as location – Yahoo Maps has almost no data).

When adding markers or polygons to an overlay, don’t forget to add the overlay to the map.

If your markers don’t show up, verify that you have MarkersEnabled set to True in the Properties panel for your GMapControl instance.

GMap.NET requires an internet connection to function properly. However, if no connection is available, you can still use cached information (if available) to show your maps. To do this,  do:

Thank you for reading!

Save

Save

Save

Save

Save

Save

Did this article help you out? Please help us find more time to write useful guides & articles like this by donating a buck or two. It'll keep us coffee-fueled. Thanks!

Trackbacks

  1. GMap.NET Beginners Tutorial: Maps, markers, polygons & routes [updated for Visual Studio 2015 and GMap.NET 1.7] (part 2) | Independent Software

Comments

12 12 Responses to “GMap.NET Beginners Tutorial: Adding polygons and routes to your map [updated for Visual Studio 2015 and GMap.NET 1.7]”
  1. Pedro Delgado says:

    Como calculo la longitud total de las rutas? me podrías orientar en eso por favor

  2. J.Theissen says:

    Hello,
    very fine documentation.
    I am using gmap Version 1.7 and visual studio 2015 with c#.
    I have a Database with polygons containing inner polygons which shall be transparent.
    For example the region Brandenburg, excluding the entire region Berlin.

    How can this be shown? I did not find an example.

  3. Very well explained, so thankfull to find this blog. Nice work.

  4. MANISH says:

    Please let me know how to find the polygon click event in GMap.net wpf?

    • Tony says:

      The event is in the GMap control. Look under Misc in the event list in your properties window

      private void gMap_OnPolygonClick(GMapPolygon item, MouseEventArgs e){
      }

  5. Ardsman says:

    Ok, sorry about the above.

    I’d like to ask. I’m trying to make an app in Visual Studio that shows bus routes across Northern Ireland. The basic idea being that you’d select a button for a specific route, then it shows that route on a Google Maps Gmap plugin in red, while also showing the estimated position of the bus based on the time the users selected to view the route.

    Is there any viable way of doing this? I’ve got some routes created thanks to help from this article, but they’re just laid on top of the map. I’ve no idea how to make a marker move accurately based on time or other necessary factors.

    Any help would be greatly appreciated. Thanks.

  6. GMapOverlay routes = new GMapOverlay(“routes”);
    List points = new List();
    points.Add(new PointLatLng(48.866383, 2.323575));
    points.Add(new PointLatLng(48.863868, 2.321554));
    points.Add(new PointLatLng(48.861017, 2.330030));
    GMapRoute route = new GMapRoute(points, “A walk in the park”);
    route.Stroke = new Pen(Color.Red, 3);
    routes.Routes.Add(route);
    gmap.Overlays.Add(routes); —–> This line must go right after
    GMapOverlay routes = new GMapOverlay(“routes”); or else the mapcontrol
    needs refresh.
    !!!!!EXCELLENT !!!!! Job

  7. Yuyang says:

    Hello
    Thank everybody to develop wonderful GMap control. It’s fantastic.
    Now I have two problems. First is dragging by right button of mouse and route clicking.
    Especially route does never response on mouse enter, leave and click.
    Does anyone has experience to overcome this?
    Thank you in advance.

  8. Andrey O. says:

    With this sequence of operators the polygon is NOT visible:

    polygons.Polygons.Add(polygon);
    gmap.Overlays.Add(polygons);

    and with this:

    gmap.Overlays.Add(polygons);
    polygons.Polygons.Add(polygon);

    the polygon IS visible….

    Why?

  9. Andrey O. says:

    When I try to draw 2 routes, they always have the same color. Who knows how to make their colors different?
    Is it at all possible?

  10. faheem gul says:

    how to get back longitude and latitude parameter when i changed the marker position. i want to save this new position of markar.

Leave a Reply

Your email address will not be published. Required fields are marked *