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 we need to replace the TextView created in Tutorial01 with a MapView. For this just rename the TextView xml tag in activity_main.xml to "com.ptvag.navigation.sdk.MapView". Also give it a new android id like "@+id/map".

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.ptvag.navigation.tutorial.MainActivity">

    <com.ptvag.navigation.sdk.MapView
        android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>


</RelativeLayout>

Then we need to tell the MapView when the MainActivity is resumed or finished so that it can be properly initialized and finalized. To see an existing part of the map we also set the new center of the map to Karlsruhe/Germany.

public class MainActivity extends AppCompatActivity {
    private MapView mapView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mapView = (MapView)findViewById(R.id.map);
        mapView.setCenter(new Position(934177, 6268747)); // Karlsruhe/Germany
    }

    @Override
    protected void onResume() {
        super.onResume();

        mapView.resume();
    }

    @Override
    protected void onPause() {
        super.onPause();

        mapView.finish();
    }
}

Now you should see something like:

Gestures

The MapView supports a default implementation for drag, scale and rotate.

Customize map colors

If you want to use your own map colors you can load your own color definition files with MapView.setMapDesign(). Our tutorial comes with some example color definitions for day and night mode. We load them here by overriding onInitialized method of our com.ptvag.navigation.sdk.MapView.

package com.ptvag.navigation.tutorial;

import android.content.Context;
import android.util.AttributeSet;

import java.io.File;

public class MapView extends com.ptvag.navigation.sdk.MapView {
    public MapView(Context context)
    {
        super(context);
    }

    public MapView(Context context, AttributeSet attr) {
        super(context, attr);
    }

    @Override
    protected void onInitialized() {
        File rendererPath = new File(Application.getDataPath(), "renderer");
        File dayFile = new File(rendererPath, "London_day.ini");
        File nightFile = new File(rendererPath, "London_night.ini");
        setMapDesign(dayFile, true);
        setMapDesign(nightFile, false);
    }
}

Do not forget to replace the com.ptvag.navigation.sdk.MapView in the activity_main.xml with your new MapView class name.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.ptvag.navigation.tutorial.MainActivity">

    <com.ptvag.navigation.tutorial.MapView
        android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>


</RelativeLayout>

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