How to display globe view (3D view) of Maps in Xamarn.forms - xamarin

Question

We need to show selected cities on 3D map of earth in Android, iOS & Windows.UWP using Xamarin.Forms. Currently we are using Xamarin.Forms.Maps, but it only shows 2D map of earth.
How do we go for 3D map of earth?
Note: We will require zoom-in feature of map as well.

Answer 1

If you want something like Google Earth you're probably going to have to create your own implementation. What you can do in Xamarin Forms however is use the existing Xamarin.Forms.Maps controls and add what's called a camera. Basically this is a viewpoint from which you look upon the map. These can be in 3D space so it looks like you have a 3D map. You can create this using custom renderers.
Within these custom renderers you will come across things like pitch, heading and distance. This image show what's what:
iOS custom renderer
[assembly: ExportRenderer(typeof(Map3d), typeof(MapView3dRenderer))]
namespace MyApp.iOS.Renderers
{
public class MapView3dRenderer : MapRenderer
{
MKMapView _nativeMap;
protected override void OnElementChanged(ElementChangedEventArgs<View> e)
{
base.OnElementChanged(e);
if (e.NewElement != null && Control != null)
{
_nativeMap = Control as MKMapView;
}
}
protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (_nativeMap == null)
return;
if (e.PropertyName == "VisibleRegion")
UpdateCameraView();
}
void UpdateCameraView()
{
var target = new CLLocationCoordinate2D(50.890119f, 5.857798f);
//Enable 3D buildings
_nativeMap.ShowsBuildings = true;
_nativeMap.PitchEnabled = true;
// Attach the camera
var camera = MKMapCamera.CameraLookingAtCenterCoordinate(target, 650, 60, 0);
_nativeMap.Camera = camera;
}
}
}
Android
For Android I don't have a custom renderer ready but you should be able to figure it out. It also involves attaching a Camera object. This time you add it to an instance of GoogleMap.
// Create the camera
CameraPosition cameraPosition = new CameraPosition.Builder()
.Target(location)
.Tilt(45)
.Zoom(10)
.Bearing(0)
.Build();
// Convert to an update object
CameraUpdate cameraUpdate = CameraUpdateFactory.NewCameraPosition(cameraPosition);
// Attach the camera
map.MoveCamera(cameraUpdate); // map is of type GoogleMap
Check out the Android docs on how this works.