GeoFlickr (QML) | Qt Positioning 6.4.3

- Qt 6.4
- Qt Positioning
- Qt Positioning Examples
- GeoFlickr (QML)
- Qt 6.4.3 Reference Documentation

# GeoFlickr (QML)

The GeoFlickr example shows how to use the user's current position to fetch local content from a web service.

This is a small example, illustrating one of the very core parts of the Qt Positioning API: the ability to retrieve and use the user's current geographic position.

Key QML types shown in this example:

- PositionSource
- XmlListModel

#### Running the Example

To run the example from Qt Creator, open the Welcome mode and select the example from Examples. For more information, visit Building and Running an Example.

#### Retrieving the Current Position

Retrieving the user's current position is achieved using the PositionSource type. In this example, we instantiate the PositionSource as part of the `GeoTab` component (the floating "window" describing current position and status).

         PositionSource {
             id: positionSource

             // used with nmea plugin only
             PluginParameter { name: "nmea.source"; value: "qrc:///flickrmobile/nmealog.txt" }

             onPositionChanged: {
                 planet.source = "images/sun.png";
                 sourceText.text = ((name === "nmea") ? "(filesource): " : "Source: ") +
                         printableMethod(supportedPositioningMethods)
             }

             onSourceErrorChanged: {
                 if (sourceError == PositionSource.NoError)
                     return

                 console.log("Source error: " + printableError(sourceError))
                 activityText.fadeOut = true

                 if (supportedPositioningMethods === PositionSource.NoPositioningMethods) {
                     name = "nmea";
                     update();
                 }
             }
         }

When the "Locate and update" button is pressed, we instruct the PositionSource to request a location update. If the update finishes with an error, we check if the default backend is capable of providing positioning data. If it's not, we switch to `nmea` backend with pre-recorded data, and request the location update again.

We cannot check the supportedPositioningMethods in advance, because on mobile platforms (Android and iOS) this method will return `NoPositioningMethods` before the permissions are granted. And the permissions request is first performed when location update is requested.

         Button {
             id: locateButton
             text: "Locate & update"
             onClicked: {
                 positionSource.update();
             }
         }

To share the new position data with the rest of the application, we use properties that we have created on the `GeoTab` component:

         property var coordinate

#### Using the Current Position

The longitude and latitude values retrieved here are eventually set in the properties on the `RestModel` component. The `RestModel` is an XmlListModel, which retrieves XML data from a URL and creates a data model by parsing it.

In this case, it retrieves data from the Flickr REST API online, based on our current position

     XmlListModel {
         property var coordinate

         source: "https://api.flickr.com/services/rest/?" +
                 "min_taken_date=2000-01-01+0:00:00&" +
                 "extras=date_taken&" +
                 "method=flickr.photos.search&" +
                 "per_page=30&" +
                 "sort=date-taken-desc&" +
                 "api_key=e36784df8a03fea04c22ed93318b291c&" +
                 "lat=" + coordinate.latitude + "&lon=" + coordinate.longitude;
         query: "/rsp/photos/photo"

         XmlListModelRole { name: "title"; elementName: ""; attributeName: "title" }
         XmlListModelRole { name: "datetaken"; elementName: ""; attributeName: "datetaken" }
         XmlListModelRole { name: "farm"; elementName: ""; attributeName: "farm" }
         XmlListModelRole { name: "server"; elementName: ""; attributeName: "server" }
         XmlListModelRole { name: "id"; elementName: ""; attributeName: "id" }
         XmlListModelRole { name: "secret"; elementName: ""; attributeName: "secret" }
     }

This model data is then shown in a variety of Qt Quick views to produce the example application.

Example project @ code.qt.io