The Map widget displays the current aircraft's data, as well as other relevant location data on top of a map view. This includes aircraft location, home location, aircraft trail path, aircraft heading, aircraft path to home and No Fly Zones. Here is an example of what the map widget looks like.

The map widget has a modularized architecture to better manage complexity, testability, and extensibility. In general, functionality is kept inside the component that it belongs in.

A brief overview of the components is below.

DUXBetaDataProvider is the class that is responsible for interfacing with DJIFlyZoneManager. For better separation of concepts, expose any additional DJIFlyZoneManager functionality to the rest of the map widget only via DUXBetaDataProvider.

DUXBetaAnnotationProvider and DUXBetaOverlayProvider handle the conversion of fly zone data into drawable map objects.

DUXBetaMapRenderer is responsible for handling MKMapView callbacks, and generating views from the drawable map objects.

The map widget includes custom classes for fly zone overlays and annotations. In general overlays need to conform to MapKit MKOverlay protocol, and annotations to MKAnnotation protocol. We do not currently support custom annotations or overlays, but instead will expose methods to customize specific visual properties of those items.

If creating the map widget through code it can be added using the convenience method:

- (void)installInViewController:(nullable UIViewController *)viewController

which adds the widget the method is called on as a subview of the ViewController that is passed in as an argument. Following this add constraints to the widget using it's widgetSizeHint property to determine width, height and aspect ratio constraints.

If creating the widget through storyboard use the object library to drag a container view controller into the desired view controller like so:

Following this make sure to change the class of the child view controller to be DUXBetaMapWidget. From here you can create the constraints on the container view using the Map Widget's widgetSizeHint property.

The map widget is highly customizable, starting with the underlying map view. We use MKMapView from MapKit to present standard map data. Every aspect of the map view may be customized. For example, to change the type of map displayed to satellite:

mapWidget.mapView.mapType = MKMapTypeSatellite;

mapWidget.mapView.mapType = .satellite;

Besides standard MKMapView properties, almost every aspect of added-on DJI functionality may be customized as well.

Show a straight path line to the aircraft home point.

mapWidget.showDirectionToHome = YES;

mapWidget.showDirectionToHome = true;

This line shows the path the aircraft has taken during its flight.

mapWidget.showFlightPath = YES;

mapWidget.showFlightPath = true;

For both flight path and direction to home, customize the stroke thickness and color

mapWidget.directionToHomeStrokeColor = [UIColor colorWithRed:0.83 green:0.33 blue:0.00 alpha:1.0];
mapWidget.directionToHomeStrokeWidth = 0.5f;

mapWidget.directionToHomeStrokeColor = UIColor(red: 0.83, green: 0.33, blue: 0.0, alpha: 1.0)
mapWidget.directionToHomeStrokeWidth = 0.5;

When turned on, it will keep the map camera focused on the aircraft even as it moves or if the user adjusts the map.

mapWidget. isMapCameraLockedOnAircraft = YES;

mapWidget. isMapCameraLockedOnAircraft = true;

Map widget users have access to the same fly zone database as exposed by DJIFlightZoneManager. To enable flight zones, set the visibleFlyZones property with a bitmask of the types of zones desired.

mapWidget.visibleFlyZones = DUXBetaVisibleFlyZonesWarning;

mapWidget.visibleFlyZones = .warning;

You can also enable tap to unlock to enable unlocking functionality.

mapWidget.tapToUnlockEnabled = YES;

mapWidget.tapToUnlockEnabled = true;

Tapping on the annotation will allow the user to unlock it if it's unlockable. Already unlocked annotations will display a callout listing the details of the unlocking.

Customizing fly zone color, alpha, and border width are all exposed by the map widget.

[mapWidget.setFlyZoneOverlayColor:[UIColor myCustomColor] forFlyZoneCategory:DJIFlyZoneCategoryAuthorization];
[mapWidget.setFlyZoneOverlayAlpha:0.5f forFlyZoneCategory:DJIFlyZoneCategoryAuthorization];

mapWidget.setFlyZoneOverlayColor(UIColor.myCustomColor, for: .authorization)
mapWidget.setFlyZoneOverlayAlpha(0.5, for: .authorization)

Unlocked fly zones can be customized too

You can set custom annotation images for zones that can be unlocked, unlocked zones, and aircraft / home point locations.

[mapWidget changeAnnotationType:DUXBetaMapAnnotationTypeEligibleFlyZones withImage:[UIImage myImage] withCenterOffset:CGPointZero];

mapWidget.changeAnnotation(of: .eligibleFlyZones, toCustomImage: UIImage.customImage, withCenterOffset: CGPointZero)