Skip to content

Map Coordinates

In this guide you will learn how to use MapView to display an interactive map, and get and display the longitude and latitude coordinates of any point tapped/clicked on the map by the user.

Coordinates at user click position

Map coordinates at click location 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.


MapCoordinates demonstrates how easy it is to get the longitude and latitude coordinates of a user-selected point on an interactive map displayed by MapView

How it works

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

then browse to the MapCoordinates example folder and open

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.

1import QtQuick 2.12
2import QtQuick.Window 2.12
3import GeneralMagic 2.0
4import FpsCounter 1.0

In main.qml, we need to import the GeneralMagic QML plugin. FpsCounter is used to display the rendering speed in frames per second. Next, we need to make sure we allow online access, and that we are using the latest data by setting allow internet connection to true: ServicesManager.settings.allowInternetConnection = true; as seen in the code below.

 1Component.onCompleted: {
 2  //! [Set token safely]
 3  ServicesManager.settings.token = __my_secret_token;
 4  //! [Set token safely]
 6  ServicesManager.logLevel = ServicesManager.Error;
 7  ServicesManager.settings.allowInternetConnection = true;
 9  updater.autoApplyWhenReady = true;
10  updater.update();

In the Component.onCompleted: block, the b __my_secret_token property in the above QML code is set in C++ as shown below. In this example, in main.cpp, replace the "YOUR_TOKEN" string with your actual General Magic Maps API Key.

1// C++ code
2//! [Set API Key token safely]
3// go to to get your token
4engine.rootContext()->setContextProperty("__my_secret_token", "YOUR_TOKEN");
5//! [Set API Key token safely]
Map coordinates at click location example
1FpsCounter {
2  id: fpsCounter

The FpsCounter is updated from C++, and is defined in fpscounter.h included in this example. It has a readable qml property, fps,

1Q_PROPERTY(double fps READ fps NOTIFY fpsChanged)

which is displayed in the text field in the upper left corner of the viewport, as seen in the code below.

 1MapView {
 2   id: map
 3   anchors.fill: parent
 4   viewAngle: 25
 5   zoomLevel: 69
 6   viewPerspective: MapView.ViewPerspective.View3D
 7   buildingsVisibility: MapView.BuildingsVisibility.Show3D
 8   detailsQualityLevel: MapView.DetailsQualityLevel.Medium
 9   gestures: MapView.Gesture.Pan
10   | MapView.Gesture.PanEnableVelocity
11   | MapView.Gesture.Pinch
12   | MapView.Gesture.Rotate
13   | MapView.Gesture.Tilt
14   Text {
15       anchors.left: parent.left
17       text: "fps: "+fpsCounter.fps
18   }
19   Text {
20       id: lonlat
21       anchors.left: parent.left
22       anchors.bottom: parent.bottom
23       text: "Click on the map to see longitude, latitude coordinates in degrees"
24   }
25   TapHandler {
26       grabPermissions: PointerHandler.CanTakeOverFromAnything
27       onTapped: {
28           let coordinates = map.wgsForScreen(point.pressPosition);
29           console.log("x,y ("+point.pressPosition.x+", "+point.pressPosition.y+")"
30           +" lon "+coordinates.longitude+", lat "+coordinates.latitude);
31           lonlat.text = "x,y ("+point.pressPosition.x+", "+point.pressPosition.y+")"
32           +" lon "+coordinates.longitude+", lat "+coordinates.latitude;
33       }
34   }

In the MapView block, the map settings, such as rendering 3D buildings, and user input gestures to be processed, such as pan, pinch, or rotate, are specified. MapView.Gesture.PanEnableVelocity enables swipe.

Next, the top left text field displays the fps property of the fpsCounter, where fpsCounter is the given id of the {FpsCounter}.

The bottom left text field displays the viewport-relative x,y position, in pixels, where the viewport top left corner is (0,0), and the corresponding longitude and latitude coordinates, in degrees, of the point on the map clicked by the user. To do this, a TapHandler is defined to handle the tap/click gesture in the onTapped block.

The conversion from 2D viewport x,y coordinates to longitude,latitude coordinates is done by the map.wgsForScreen function, where map is the id of the MapView block above: id: map

let coordinates = map.wgsForScreen(point.pressPosition);

The onTapped block updates the text field in the viewport by setting its text property, using the id of the text field: id: lonlat, thus: lonlat.text = "";

This information is also printed in the Qt application output window using console.log(""); and the output appears like this:

qml: x,y (213, 398) lon 9.15316209786437, lat 46.08331203838415

QML Examples

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