Map View Example

Files:

• maps/mapview/assets/main.qml
• maps/mapview/src/main.cpp
• maps/mapview/mapview.pro
• maps/mapview/translations/mapview.pro

Description

The Map View example allows the user to select a cinema from a list and display the location of the selected cinema on a map. The user can navigate inside the map then by zooming (via the pinch gesture) or scrolling (with the pan gesture).

Overview

In this example we'll learn how to use the MapView class of the BB10 framework to show a given address on an interactive map.

The UI

The UI of this sample application consists of two pages. The main page contains a ListView with a couple of addresses of cinemas. Whenever the user selects one of the addresses, the second page shows up with a MapView that has the address as central position.

The address information of the cinemas are stored in the XML file 'cinemas.xml', which is used as source for a DataSource object. As soon as the data source has loaded the XML data and parsed out the elements underneath '/ResultSet/Result', the dataLoaded() signal is emitted. Inside the connected signal handler we clear the current data of the GroupDataModel 'cinemasModel' and fill it with the new data.

            // The data source that loads the cinema addresses
            DataSource {
                id: cinemasDataSource

                source: "cinemas.xml"
                query: "/ResultSet/Result"

                onDataLoaded: {
                    cinemasModel.clear()
                    cinemasModel.insertList(data)
                }
            },

            // The data model that contains the cinema addresses
            GroupDataModel {
                id: cinemasModel

                grouping: ItemGrouping.None
            },

The 'cinemasModel' is used as data model by the ListView on the main page. Whenever the user selects on item in the list, the latitude and longitude of the selected address is set on the MapView object and the altitude (which represents the current zoom factor) is reset to 1000 meter. Afterwards the address label is updated with the selected postal address and then the sheet, which contains the MapView and address label, is opened.

            // The list view with the cinema addresses
            ListView {
                horizontalAlignment: HorizontalAlignment.Fill
                verticalAlignment: VerticalAlignment.Fill

                leftPadding: 30
                topPadding: 50
                rightPadding: 30
                bottomPadding: 30

                dataModel: cinemasModel

                listItemComponents: ListItemComponent {
                    type: "item"

                    StandardListItem {
                        title: ListItemData.Title
                        description: qsTr("%1, %2").arg(ListItemData.Address).arg(ListItemData.City)
                    }
                }

                onTriggered: {
                    // Configure the map view with the selected location
                    mapView.latitude = dataModel.data(indexPath).Latitude
                    mapView.longitude = dataModel.data(indexPath).Longitude
                    mapView.altitude = 1000

                    // Update the content of the address label
                    addressLabel.text = qsTr("%1, %2").arg(dataModel.data(indexPath).Address)
                                                       .arg(dataModel.data(indexPath).City)

                    // Show the sheet with the map view
                    mapSheet.open()
                }
            }

After the construction of the MapView element, we enforce it to use the 3D rendering engine, since by default the 'Blank' rendering engine is used. Whenever the user clicks on the 'Back' button, the sheet is closed and the main page becomes visible again.

            // The sheet that contains the map view
            Sheet {
                id: mapSheet

                Page {
                    Container {
                        background: Color.Black

                        // The address label
                        Label {
                            id: addressLabel

                            horizontalAlignment: HorizontalAlignment.Center

                            textStyle {
                                base: SystemDefaults.TextStyles.TitleText
                                color: Color.White
                                textAlign: TextAlign.Center
                            }
                        }

                        // The map view
                        MapView {
                            id: mapView

                            horizontalAlignment: HorizontalAlignment.Fill

                            // Enforce the usage of the 3D rendering engine
                            onCreationCompleted: setRenderEngine("RenderEngine3D")
                        }

                        // The 'Back' button
                        Button {
                            horizontalAlignment: HorizontalAlignment.Center

                            text: qsTr ("Back")

                            onClicked: mapSheet.close()
                        }
                    }
                }
            }