Hello Map¶
In this guide you will learn how to use MapView
to display an interactive map.
Interactive Map¶
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…
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.