CODEWITHSUNDEEP
xamarinxamarin.forms
jaczjill
jaczjill

Reputation: 334

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

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.

Upvotes: 0

Views: 876

Answers (1)

Steven Thewissen
Steven Thewissen

Reputation: 2981

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:

enter image description here

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.

Upvotes: 2

Related Questions