Creating cross-platform mobile map application with Xamarin in 10 minutes

Quick tutorial: how to create mobile app with maps using Xamarin just in 10 minutes.

Prerequisites

  • Mac computer with installed XCode and Xamarin Studio
  • Subscription to any Xamarin plan starting from Indie and above
  • Basic C# skills

1. Start new solution in Xamarin Studio, select Cross-platform App -> Blank Xamarin.Forms.App

screen01

2. Call the project MapDemo (or any other name you like), check both Android & iOS platforms and use Portable Class Library

Screen Shot 2015-08-19 at 23.53.08

3. Now compile your application and start in iOS simulator, you should get the screen as below

iPhone_6_Vert_SpaceGray_sRGB_0914

4. Before we start to code, it is necessary to add package to support Xamarin maps. Repeat the operation below for every subproject (MapDemo, MapDemo.iOS, MapDemo.Droid): right click on “Packages” and select “Add packages…”

Screen Shot 2015-08-19 at 23.54.01

5. Search for “xamarin.forms.maps” and add the package to the project

Screen Shot 2015-08-19 at 23.54.51

6. Let’s test first map in iOS application. Go to the project MapDemo.iOS, open file “AppDelegate.cs” and add the following line as shown below: global::Xamarin.FormsMaps.Init();

screen02

This operation initialises Xamarin maps component for iOS devices.

7. Go back to cross-platform project “MapDemo”, open the file “MapDemo.cs”, add the following directive in top of the file: using Xamarin.Forms.Maps;

screen03

8. Now change the method “App” of the class Application to add the map on the screen


        public App() {

            var map = new Map( MapSpan.FromCenterAndRadius(
                new Position(41.39479,2.14876), Distance.FromKilometers(5.0))) {
                IsShowingUser = false,
                HasZoomEnabled = true,
                VerticalOptions = LayoutOptions.FillAndExpand,
                HorizontalOptions = LayoutOptions.FillAndExpand,
            };

            var stack = new StackLayout { 
                Spacing = 0, 
                VerticalOptions = LayoutOptions.FillAndExpand,
                HorizontalOptions = LayoutOptions.FillAndExpand, 
            };

            stack.Children.Add(map);

            MainPage = new ContentPage {
                Content = stack
            };
        }

Screen Shot 2015-08-20 at 00.33.17

We are creating map here (parameters of the map are self explanatory: coordinates, zoom and so on), placing the map into StackLayout and making it expanded to the full screen. Just after that we create new ContentPage and adding StackLayout there.

9. That’s it! Now compile the app and start it in iOS simulator, you should see Barcelona on the map 🙂

iPhone_6_001

10. Let’s make the map of Barcelona more interesting putting some sightseeing there with pins, add the following code just after map initialisation:


            map.Pins.Add( new Pin {
                Type = PinType.Generic,
                Position = new Position(41.4036299,2.1743558),
                Label = "Sagrada Familia",
            });
            map.Pins.Add( new Pin {
                Type = PinType.Generic,
                Position = new Position(41.362959,2.1650636),
                Label = "Montjuïc Castle",
            });
            map.Pins.Add( new Pin {
                Type = PinType.Generic,
                Position = new Position(41.387008,2.2004736),
                Label = "Port Olímpic de Barcelona",
            });

Now you should see the following screen after application start:

iPhone_6_002

Enjoy your first Xamarin application with map and stay tuned, next tutorial will explain how to activate map support for Android application.

, , , , ,

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: