Center On LandmarkList Interactive

In this guide you will learn how to interactively select a set of landmarks on an interactive map and then center the bounding box containing all selected landmarks in the viewport.

Interactively selected Landmarks

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.

Overview

CenterOnLandmarkListInteractive demonstrates how easy it is to use MapView to display an interactive map, interactively select a set of landmarks, and center the view on the bounding box containing all selected landmarks.

How it works

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

then browse to the CenterOnLandmarkListInteractive example folder and open CenterOnLandmarkListInteractive.pro

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.

Selecting landmarks interactively

Left click and hold anywhere on the map, and a list of nearby landmarks is displayed. Then left click on one of the options to select it.

If you do not want to select any of the displayed landmarks, click outside the popup, and the list disappears. Then left click and hold somewhere else on the map to try again.

Repeat to select a second and then a third landmark.

Then click the Center on landmark list button, which is now enabled.

Although a minimum of 2 landmarks is required, it is better to select at least 3 so they form a triangle or polygon, so it is visually clearer that the view centers on the selected group of landmarks.

SearchService {
       id: reverseGeocoding
       searchMapPOIs: true
       searchAddresses: true
       limit: 10
       thresholdDistance: 500
       onSearchCompleted: addWaypointPopup.open()
   }

A SearchService is defined.

Reverse geocoding takes as input a location on the map (lon,lat coordinates), in this case, interactively selected by the user, and gives as output a list of points of interest located near the selected position, 3 items in a pop-up, in this example.

The user has the option to click on one of the waypoints/landmarks to select it and add it to the list of landmarks to be centered in the view, using addWaypointPopup.open() or simply click outside the popup to close it.

In the popup, if the user clicks on one of the 3 landmarks shown to select it, the landmark is added to the list: routingWaypoints.append(landmark)

LandmarkList {
       id: routingWaypoints
}

routingWaypoints is simply a LandmarkList

RoutingService {
    id: routingService
    type: Route.Type.Fastest
    transportMode: Route.TransportMode.Car
    waypoints: routingWaypoints
    onFinished: {
        mapView.routeCollection.set(routeList);
        mapView.centerOnRouteList(routeList);
    }
}

The list of selected landmarks/waypoints is made available to the l RoutingService. In this case, a route is not rendered, as we are interested only in the bounding box containing all selected landmarks (2 or more), in order to center the map view on that bounding box/list of interactively selected landmarks.

Button {
   text: "Center on landmark list"
   enabled: ServicesManager.settings.connected && routingWaypoints.length > 1
   onClicked: {
      //show landmarks on map as point markers
      let marker = ServicesManager.createMarker();
      for (let n = 0; n < routingWaypoints.length; n++) {
         let lmkit = routingWaypoints.get(n)
         marker.append(lmkit.coordinates);
      }
      let renderSettings = ServicesManager.createMarkerRenderSettings();
      let list = mapView.markerCollection.getExtendedList(MarkerList.Type.Point);
      list.append(marker, renderSettings);
      mapView.centerOnGeographicArea(routingWaypoints.boundingBox)
   }
}

When the "Center on landmark list" button is clicked, a marker is created for each waypoint/landmark in the list. The list of markers is then rendered on the map. See also the Markers example.

To render a route via the selected landmarks/waypoints, in the above code, after this line:

mapView.centerOnGeographicArea(routingWaypoints.boundingBox)

you can add this line:

routingService.update()

to treat the waypoints as a route in the order in which they were added, instead of a group of landmarks.

Then the route as well as the waypoints are rendered, and the camera centers on the bounding box containing the selected landmarks/waypoints, as well as the route connecting them.

QML Examples

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