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. Therefore we edit the ViewController.m file:

...
@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [_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
}
...

Hint

The coordinates are in Mercator format (https://en.wikipedia.org/wiki/Mercator_projection). As you can see in the commented code, you also can 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 wan't 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.

@implementation ViewController

- (void)viewDidLoad {
...

    //setMapDesign
    NSBundle *b = [NSBundle mainBundle];
    NSString *dir = [b resourcePath];
    NSString *srcPath = [dir stringByAppendingPathComponent:@"res/data/renderer/London_night.ini"];
    [_uiMapView setMapDesign:srcPath isDay:NO];
    srcPath = [dir stringByAppendingPathComponent:@"res/data/renderer/London_day.ini"];
    [_uiMapView 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, see
COLURBAN	color for the town area
COLINDUSTRY	color for an industrial zone
COLWOOD	color for a forrest
COLPARK	color for a park
COLSKY	color for the sky
COLHORIZON	color of the horizont