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
123 Xamarin.FormsMaps.Init("application Id", "authentication token");
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