Adding graphics to a Map!

Should you be in need of adding a marker or any other kind of graphics to a map, just know that’s a very simple step to take. In the Map Explorer, the device current position is marked with a red map marker (a Polygon). This said map marker may as well be an image, a Grid,…

What are markers useful for? Well, if you are creating, for instance, a tourism app of your home city, then you will need to set some markers around with the main attractions available, right?

Let’s get on with some code, then!

First of all we’ll need to create the marker itself. In this example we’ll be using a Polygon:

Polygon polygon = new Polygon();
polygon.Points.Add(new Point(0, 0)); //sets the sizes of the polygon
polygon.Points.Add(new Point(0, 75));
polygon.Points.Add(new Point(25, 0));
polygon.Fill = new SolidColorBrush(Colors.Red); //sets the polygon color

Done this, we might want to add a click event to the polygon. This way we can enable the marker to be tapped for location informations:

polygon.Tag = new GeoCoordinate(coordinate.Latitude, coordinate.Longitude);
polygon.MouseLeftButtonUp += new MouseButtonEventHandler(Marker_Click);

Where “coordinate” is a GeoCoordinate variable containing the right coordinates you need to set, and where Marker_Click is a simple click function we’ll detail in a future post.

Now it’s time to create a MapOverlay:

MapOverlay overlay = new MapOverlay();

Fill it with the Polygon element we created earlier:

overlay.Content = polygon;

Set the coordinates of this overlay. This will implicitely place the Polygon object:

overlay.GeoCoordinate = new GeoCoordinate(coordinate.Latitude, coordinate.Longitude);
overlay.PositionOrigin = new Point(0.0, 1.0);

And, finally, add the Overlay to the MapLayer we are working on (a MapLayer, for the record, is a collection of MapOverlay objects).

mapLayer.Add(overlay);

If you did everything right, the result should look like the screenshot below:
map_explorer_light

Happy coding! 🙂

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...