Places Map (QML) | Qt Location 5.4

- Qt 5.4
- Qt Location
- Places Map (QML)
- Qt 5.4.2 Reference Documentation

# Places Map (QML)

To write a QML application that will show places on a map, we start by making the following import declarations.

    import QtQuick 2.0
    import QtPositioning 5.2
    import QtLocation 5.3

Instantiate a Plugin instance. The Plugin is effectively the backend from where places are sourced from. Because the `nokia` plugin has been specified, some mandatory parameters need to be filled in, see the Nokia Plugin documentation for details:

    Plugin {
        id: myPlugin
        name: "nokia"
        //specify plugin parameters if necessary
        //PluginParameter {...}
        //PluginParameter {...}
        //...
    }

Next we instantiate a PlaceSearchModel which we can use to specify search parameters and perform a places search operation. For illustrative purposes, update() is invoked once construction of the model is complete. Typically update() would be invoked in response to a user action such as a button click.

    PlaceSearchModel {
        id: searchModel

        plugin: myPlugin

        searchTerm: "Pizza"
        //Brisbane
        searchArea: QtPositioning.circle(QtPositioning.coordinate(-27.46778, 153.02778))

        Component.onCompleted: update()
    }

The map is displayed by using the Map type and inside we declare the MapItemView and supply the search model and a delegate. An inline delegate has been used and we have assumed that every search result is of type `PlaceSerachesult`. Consequently it is assumed that we always have access to the place role, other search result types may not have a place role.

    Map {
        id: map
        anchors.fill: parent
        plugin: myPlugin;
        center {
            latitude: -27.47
            longitude: 153.025
        }
        zoomLevel: 13

        MapItemView {
            model: searchModel
            delegate: MapQuickItem {
                coordinate: place.location.coordinate

                anchorPoint.x: image.width * 0.5
                anchorPoint.y: image.height

                sourceItem: Image {
                    id: image
                    source: "marker.png"
                }
            }
        }
    }

Files:

- places_map/places_map.qml
- places_map/main.cpp
- places_map/places_map.pro