Skip to content

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