Access User Location and Display Maps

Display a Map

The AppMap component is an extension of the QML Map item and can display a map and optionally the user location. To actually display the map, it is required to specify a Plugin that provides the map data. QML currently supports the following plugins:

The following example creates a Map that uses the MapBox Map plugin:

iOS Android

 import VPlayApps 1.0
 import QtLocation 5.5

 App {
   NavigationStack {

     Page {
       title: "Map Example"

       // show the map
       AppMap {
         anchors.fill: parent
         plugin: Plugin {
           name: "mapbox"
           // configure your own map_id and access_token here
           parameters: [  PluginParameter {
               name: "mapbox.mapping.map_id"
               value: "mapbox.streets"
             },
             PluginParameter {
               name: "mapbox.access_token"
               value: "pk.eyJ1IjoiZ3R2cGxheSIsImEiOiJjaWZ0Y2pkM2cwMXZqdWVsenJhcGZ3ZDl5In0.6xMVtyc0CkYNYup76iMVNQ"
             },
             PluginParameter {
               name: "mapbox.mapping.highdpi_tiles"
               value: true
             }]
         }

       }
     }
   }
 }

Show Markers on a Map

The AppMap component allows to show a map and optionally the user location. It is based on the QML Map item.

Show User Position

The AppMap already comes with a built-in feature to detect and display the user location. Set the AppMap::showUserPosition property to true to enable this feature. The app then tries to detect the user location and displays a marker on the map if possible. The position can only be displayed if the device is capable of getting a position from either GPS or other position sources.

Note: Also make sure to add required configuration settings to AndroidManifest.xml on Android or the Project-Info.plist on iOS so your app may access gps location on the device.

The following example detects and displays the user location:

iOS Android

 import VPlayApps 1.0
 import QtLocation 5.5
 import QtQuick 2.5

 App {
   NavigationStack {

     Page {
       title: "User Position"

       // show the map
       AppMap {
         anchors.fill: parent
         plugin: Plugin {
           name: "mapbox"
           // configure your own map_id and access_token here
           parameters: [  PluginParameter {
               name: "mapbox.mapping.map_id"
               value: "mapbox.streets"
             },
             PluginParameter {
               name: "mapbox.access_token"
               value: "pk.eyJ1IjoiZ3R2cGxheSIsImEiOiJjaWZ0Y2pkM2cwMXZqdWVsenJhcGZ3ZDl5In0.6xMVtyc0CkYNYup76iMVNQ"
             },
             PluginParameter {
               name: "mapbox.mapping.highdpi_tiles"
               value: true
             }]
         }

         // configure the map to try to display the user's position
         showUserPosition: true
         zoomLevel: 13

         // check for user position initially when component is created
         Component.onCompleted: {
           if(userPositionAvailable)
             center = userPosition.coordinate
         }

         // once we successfully received the location, we zoom to the user position
         onUserPositionAvailableChanged: {
           if(userPositionAvailable)
             zoomToUserPosition()
         }
       }

     }
   }
 }

Custom Overlay Items

There are several overlay items that can be placed on a map, for a list of all possible overlay items see here. The MapQuickItem type allows to place custom QML items on the map, which is what we will use for this example. The following QML code creates a map with a custom overlay at its center:

iOS Android

 import VPlayApps 1.0
 import QtLocation 5.5
 import QtPositioning 5.5
 import QtQuick 2.5

 App {
   NavigationStack {

     Page {
       title: "Map Overlay"

       // show the map
       AppMap {
         anchors.fill: parent
         center: QtPositioning.coordinate(48.2082,16.3738)
         plugin: Plugin {
           name: "mapbox"
           // configure your own map_id and access_token here
           parameters: [  PluginParameter {
               name: "mapbox.mapping.map_id"
               value: "mapbox.streets"
             },
             PluginParameter {
               name: "mapbox.access_token"
               value: "pk.eyJ1IjoiZ3R2cGxheSIsImEiOiJjaWZ0Y2pkM2cwMXZqdWVsenJhcGZ3ZDl5In0.6xMVtyc0CkYNYup76iMVNQ"
             },
             PluginParameter {
               name: "mapbox.mapping.highdpi_tiles"
               value: true
             }]
         }

         MapQuickItem {
           // overlay will be placed at the map center
           coordinate: QtPositioning.coordinate(48.2082,16.3738)

           // the anchor point specifies the point of the sourceItem that will be placed at the given coordinate
           anchorPoint: Qt.point(sourceItem.width/2, sourceItem.height/2)

           // source item holds the actual item that is displayed on the map
           sourceItem: Rectangle {
             width: dp(180)
             height: dp(50)
             color: "white"
             radius: dp(10)

             AppText {
               text: "The heart of Vienna!"
               anchors.centerIn: parent
             }
           }
         } // MapQuickItem
       } // AppMap
     }

   }
 }

How do I access GPS or other device sensors?

V-Play allows you to access various device sensors, with the Qt Sensors QML Types.

The components for Positioning, Maps, and Navigation are found in the Qt Positioning and Qt Location modules.

For example, you can also use the QML PositionSource type to retrieve the GPS position. The AppMap::showUserPosition feature internally uses PositionSource as well.

More Frequently Asked Development Questions

Find more examples for frequently asked development questions and important concepts in the following guides:

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support