Skip to content

Hello Map

In this guide you will learn how to use MapView to display an interactive map.

Interactive Map

QML hello map example

First, get an API key token, see the Getting Started guide.

Qt should be installed to continue.

The Maps SDK for Qt should be installed, see the Setup Maps SDK for Qt guide.

Overview

SimpleMap demonstrates how easy it is to use MapView to display an interactive map.

How it works

In Qt, go to the File menu and select Open File or Project…

QML hello map example

then browse to the SimpleMap example folder and open SimpleMap.pro

You may want to have a look at Setting your API Key to see how to open and configure a project and set your API Key.

In main.qml, we need to import the GeneralMagic QML plugin. Next, we need to make sure we allow online access, and that we are using the latest data.

 1import QtQuick 2.12
 2import QtQuick.Window 2.12
 3import GeneralMagic 2.0
 4
 5Window
 6{
 7  visible: true
 8  width: 640
 9  height: 480
10  title: qsTr("Hello Map")
11  Component.onCompleted:
12  {
13    //! [Set API Key token safely]
14    ServicesManager.settings.token = __my_secret_token;
15    //! [Set API Key token safely]
16
17    ServicesManager.logLevel = ServicesManager.Error;
18    ServicesManager.settings.allowInternetConnection = true;
19
20    var updater = ServicesManager.contentUpdater(ContentItem.Type.RoadMap);
21    updater.autoApplyWhenReady = true;
22    updater.update();
23  }
24  MapView
25  {
26    anchors.fill: parent
27    viewAngle: 25
28    zoomLevel: 69
29    preferences.viewPerspective: MapViewPreferences.ViewPerspective.View3D
30    preferences.show3DBuildings: true
31  }
32}

The __my_secret_token property in the above QML code is set in C++ like this.

1// C++ code
2QQmlApplicationEngine engine;
3//...
4//! [Set API Key token safely]
5// go to https://developer.magiclane.com to get your token
6engine.rootContext()->setContextProperty("__my_secret_token", "YOUR_TOKEN");
7//! [Set API Key token safely]
8
9engine.load(url);

In this example, in main.cpp, replace YOUR_TOKEN with your actual Magic Lane Maps API Key.

QML Examples

Maps SDK for Qt Examples can be downloaded or cloned with Git