Xamarin.Forms.Maps integration in WinPhone Project
Map is an external component which will be obtained from the Nuget Component store.
Integration of Maps requires some config changes from platform to platforms. I have targeted the WinPhone project configuration here. In the next blog, will point to other platforms.
Simple Steps
- Add Xamarin.Forms.Map to every project in the solution
- Call the FormMaps.Init() method in each project to initialize the map
- Create the Map object with region co-ordinates
- Add that Map object in a layout in the PCL/Shared project
In the PCL/Shared project, Let’s add a new Content page and name it as MapPage.cs. Now time to add the below code to it.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
public class MapPage : ContentPage { public MapPage() { var zoomLevel = 15; var lnglatDegree = 360 / (Math.Pow(2, zoomLevel)); var map = new Map(new MapSpan(new Position(20.303367, 85.840057), lnglatDegree, lnglatDegree)) { VerticalOptions = LayoutOptions.FillAndExpand }; map.MapType = MapType.Street; // Creates a map pin var pin = new Pin { Type = PinType.Place, Position = new Position(20.303367, 85.840057), Label = "Computer Science Department", Address = "Utkal University, Bhubaneswar, Odisha, India" }; // Adds the to the map map.Pins.Add(pin); Content = new StackLayout { Children = { map } }; } } |
Project Specific configuration
In the Windows Phone Project, in MainPage.Xaml.cs initialize the Map
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
public partial class MainPage : global::Xamarin.Forms.Platform.WinPhone.FormsApplicationPage { public MainPage() { InitializeComponent(); SupportedOrientations = SupportedPageOrientation.PortraitOrLandscape; global::Xamarin.Forms.Forms.Init(); Xamarin.FormsMaps.Init(); LoadApplication(new MSDC.App()); } } |
NOTE : Before publishing to the store, we need to make following changes in the MainPage.Xaml.cs
The application Id and Authentication Token will be obtained from the Store.
Setting up the permission
In windows phone project, in Properities > WMAppMenifest.xml allow
- ID_CAP_LOCATION
- ID_CAP_MAP
Now we are ready to run the app.
In my next blog, I will point the Android project config changes.
Happy coding 🙂
Categories: Cross Platform Mobile App, CSharp, Visual Studio, Windows Phone, Xamarin