In this lesson, you will learn:
You can use the Zebble.Plugin.Map component to render a Map. It supports adding annotations too. You can add it to your project from nuget.
To use this component, install the Zebble.Map nuget package.
It's open source and available on GitHub. Also we welcome any contributions to enhace it.
To add a map to your page, you can use the built-in map object in Zebble. You can set the Center and Zoom level of the map to define the starting position. After that the user can drag the round or zoom in and out.
You can also add an annotations to the map. Each annotation should specify the location, icon, text and some other details. Internally it is rendered as a native map for each operating system and each annotation will be displayed as a marker on the map.
<Map.Annotation
Location="51.5074, 0.1278"
IconPath="Images/Icons/MyPin.png" IconWidth="25" IconHeight="50"
Title="Marker 1" Subtitle="Some description..." />
<Map.Annotation … />
</Map>
You can add annotations using C#:
{
MyMap.Add(new Map.Annotation
{
Location = new Zebble.Services.GeoLocation(item.Latitude, item.Longitude),
Title = item.Name
});
}
You can specify which interactions are enabled on the map by setting the following boolean properties on the map:
To use the Google Maps Android API, you must register your app project on the Google API Console and get a Google API key which you can add to your app. For details, see the guide to getting an API key.
In order for the map and location services to work you should add the necessary permissions to the manifest files. The following lists the relevant permissions you might need:
AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" android:versionName="4.5" package="com.xamarin.docs.android.mapsandlocationdemo2" android:versionCode="6"> <uses-sdk android:minSdkVersion="14" android:targetSdkVersion="17" /> <!-- Google Maps for Android v2 requires OpenGL ES v2 --> <uses-feature android:glEsVersion="0x00020000" android:required="true" /> <!-- We need to be able to download map tiles and access Google Play Services--> <uses-permission android:name="android.permission.INTERNET" /> <!-- Allow the application to access Google web-based services. --> <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" /> <!-- Google Maps for Android v2 will cache map tiles on external storage --> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <!-- Google Maps for Android v2 needs this permission so that it may check the connection state as it must download data --> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <!-- Permission to receive remote notifications from Google Play Services --> <!-- Notice here that we have the package name of our application as a prefix on the permissions. --> <uses-permission android:name="<PACKAGE NAME>.permission.MAPS_RECEIVE" /> <permission android:name="<PACKAGE NAME>.permission.MAPS_RECEIVE" android:protectionLevel="signature" /> <!-- These are optional, but recommended. They will allow Maps to use the My Location provider. --> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <application android:label="@string/app_name"> <!-- Put your Google Maps V2 API Key here. --> <meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="YOUR_API_KEY" /> <meta-data android:name="com.google.android.gms.version" android:value="@integer/google_play_services_version" /> </application> </manifest>
If the functionality provided by the native map components is not enough, then you can use the MapBox Plugin for Zebble which you can install from Nuget.
To install Map for Zebble for Xamarin, run the following command in the Package Manager Console
To use this component, install the Zebble.MapBox nuget package.
It's open source and available on GitHub. Also we welcome any contributions to enhace it.
It has some advanced features such as custom colour themes, data visualizations and navigation.
You can use below codes for showing MapBox:
More information : https://www.mapbox.com