02 Basic map drawing

Overview

We will learn how to display a simple map and how to connect it with gestures to handle the map.

Base

You can use your results from Tutorial01 as a base for our new project.

Show a map

First open the Main.storyboard and drag a standard view into the ViewController. Make the view fullscreen. Open the Xcode "Identity Inspector" in the right pane and put the class "NSDK_UIMapView" in the field "Custom Class". Ctrl-Drag the view into the file ViewContoller.h to create the following property:

@property (weak, nonatomic) IBOutlet NSDK_UIMapView *uiMapView;

Don't forget to import the SDK header at the top of the file:

#import "navicoreFramework/NSDK_Navigation.h"

To see an existing part of the map, we set an appropriate scale level and the center of the map to Karlsruhe, Germany (PTV headquarter btw.). Therefore we edit the ViewController.m file:

...
@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    // check whether an NSDK intialization error occured in 'AppDelegate'
    // and if yes, remove the _uiMapView
    appDelegate = (AppDelegate *)[[UIApplication sharedApplication] delegate];
    if (appDelegate.nsdkStartupError != nil) {
        [_uiMapView removeFromSuperview];
        return;
    }

    [_uiMapView setScale:5000];

    //Mercator coordinates
    NSDK_Position * pos = [[NSDK_Position alloc] initWithX:934177 y:6268747];

    //GPS coordinates
    //NSDK_Position * pos = [[[NSDK_GeoPosition alloc] initWithLatitude:49.005351 longitude:8.401255] toPosition];

    [_uiMapView setCenterWithPosition:pos]; //Karlsruhe, Germany
}

- (void)viewDidAppear:(BOOL)animated {
    [super viewDidAppear:animated];

    // Check whether an NSDK intialization error occured and show it to the user
    if (appDelegate.nsdkStartupError != nil) {
        UIAlertController* alert = [UIAlertController alertControllerWithTitle:@"Navigation Initialization error"
            message:appDelegate.nsdkStartupError.localizedDescription
            preferredStyle:UIAlertControllerStyleAlert];
        [self presentViewController:alert animated:YES completion:nil];
    }
}

...

Hint

The coordinates are in Mercator format (https://en.wikipedia.org/wiki/Mercator_projection). As you can see in the commented code, you can also use GPS coordinates (World Geodetic System 1984, https://en.wikipedia.org/wiki/World_Geodetic_System)

The running app should look like in this picture:

Customize map colors

If you want to use your own map colors, you can load your own color definition files with [NSDK_UIMapView setMapDesign:isDay:]. Our tutorial comes with some example color definitions for day and night mode. We load them by overriding onInitialized method of the NSDK_UIMapView in our custom UIMapView implementation. Do not forget to replace the NSDK_UIMapView class with your custom UIMapView class in the Main.storyboard file.

@implementation UIMapView

- (void) onInitialized {
    NSBundle *b = [NSBundle mainBundle];
    NSString *dir = [b resourcePath];
    NSString *srcPath = [dir stringByAppendingPathComponent:@"res/data/renderer/London_night.ini"];
    [self setMapDesign:srcPath isDay:NO];
    srcPath = [dir stringByAppendingPathComponent:@"res/data/renderer/London_day.ini"];
    [self setMapDesign:srcPath isDay:YES];
}

...

The color definitions are ini files with a [Colors] section and several color parameters. Colors are defined in RGB format, namely r,g,b, where r is red, g is green, and b is blue. r,g,b each take values in the range 0 to 255.

The [Colors] section can define the following parameters:

Parameter	Description
COLMAPBACK	Color for the map background
COLSTREET0	Color for the outside contour of a motorway
COLSTREET1	Color for the outside contour of a national road
COLSTREET2	Color for the outside contour of a motorway slip road
COLSTREET3	Color for the outside contour of a country road
COLSTREET4	Color for the outside contour for a fast urban road
COLSTREET5	Color for the outside contour for a normal urban road
COLSTREET6	Color for the outside contour of a ferry
COLPEDESTRIAN	Color for the outside contour of a pedestrian zone/residential area
COLSTREET0_INNER	Inside color for a motorway
COLSTREET1_INNER	Inside color for a national road
COLSTREET2_INNER	Inside color for a motorway slip road
COLSTREET3_INNER	Inside color for a country road
COLSTREET4_INNER	Inside color for a fast urban road
COLSTREET5_INNER	Inside color for a normal urban road
COLSTREET6_INNER	Inside color for a ferry
COLPEDESTRIAN_INNER	Inside color for a pedestrian zone/residential area
COLROUTEINNER	Inside color for a route trace
COLROUTEOUTER	Outside color for a route trace
COLROUTEINNER_TARGETAREA	Inside color for a route trace in a target area
COLROUTEOUTER_TARGETAREA	Outside color for a route trace in a target area
COLROUTEINNER_ECOTAXE	Inside colorfor a traffic truck toll on-route
COLROUTEOUTER_ECOTAXE	Outside colorfor a traffic truck toll on-route
COLROUTEINNER_TOLL	Inside colorfor a traffic toll on-route
COLROUTEOUTER_TOLL	Outside colorfor a traffic toll on-route
COLTMCINNER	Inside color for a traffic jam on-route
COLTMCOUTER	Outside color for a traffic jam on-route
COLTMCINNEROFFROUTE	Inside color for a traffic jam off-route
COLTMCOUTEROFFROUTE	Outside color for a traffic jam off-route
COLTRUCKERSEGMENTS	Color of segments that are restricted for trucks
COLMANOVERARROWBACK	Shadow color for a maneuver arrow
COLMANOVERARROWFORE	Color of a maneuver arrow
COLWATER	Color for a lake, river, sea
COLURBAN	Color for the town area
COLINDUSTRY	Color for an industrial zone
COLWOOD	Color for a forest
COLPARK	Color for a park
COLSKY	Color for the sky
COLHORIZON	Color of the horizon