Skip to content

Center On LandmarkList Programmatic

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

Programmatically selected Landmarks

Center on landmark list programmatic QML example

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.


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

How it works

Center on landmark list programmatic QML example

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

then browse to the CenterOnLandmarkListProgrammatic example folder and open

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 programmatically

 1Button {
 2   text: "Center on landmark list"
 3   enabled: ServicesManager.settings.connected
 4   onClicked: {
 5      let marker = ServicesManager.createMarker();
 7      addPoi(48.86144,2.33412, marker);//lat,lon,marker
 8      addPoi(48.96144,2.43412, marker);//lat,lon,marker
 9      addPoi(48.93144,2.23412, marker);//lat,lon,marker
10      addPoi(48.76144,2.23412, marker);//lat,lon,marker
11      addPoi(48.73144,2.43412, marker);//lat,lon,marker
12      addPoi(48.76144,2.53412, marker);//lat,lon,marker
13      addPoi(48.93144,2.53412, marker);//lat,lon,marker
15      //show landmarks on map as point markers
16      let renderSettings = ServicesManager.createMarkerRenderSettings();
17      let list = mapView.markerCollection.getExtendedList(MarkerList.Type.Point);
18      list.append(marker, renderSettings);
20      //center on list of waypoints/landmarks
21      mapView.centerOnGeographicArea(routingWaypoints.boundingBox)
22   }

A set of 7 latitude,longitude pairs are defined above in the "Center on landmark list" button block.

 1function addPoi(lat, lon, marker)
 3   //Creates a landmark that is owned by the routingWaypoints, for efficiency.
 4   //This is required because
 5   //routingWaypoints.append(lmk);
 6   //will clone the landmark unless the owner is the routingWaypoints list itself.
 7   let lmk = ServicesManager.createLandmark(routingWaypoints);
 8   let coords = ServicesManager.createCoordinates(lat,lon,0);//lat,lon,alt
 9   lmk.coordinates = coords;
10   marker.append(coords);
11   routingWaypoints.append(lmk);
12   console.log("Waypoint added #########");

The addPoi() function creates a landmark, and also a marker, for each coordinate pair, adding the landmarks to the routingWaypoints list, and the markers to the marker list. The markers are needed to visually render the selected waypoints/landmarks on the map, see also the Markers example.

Center on landmark list programmatic QML example
1LandmarkList {
2       id: routingWaypoints

routingWaypoints is simply a LandmarkList

 1RoutingService {
 2    id: routingService
 3    type: Route.Type.Fastest
 4    transportMode: Route.TransportMode.Car
 5    waypoints: routingWaypoints
 6    onFinished: {
 7        mapView.routeCollection.set(routeList);
 8        mapView.centerOnRouteList(routeList);
 9    }

The list of selected landmarks/waypoints is made available to the 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 selected landmarks.

Thus the above RoutingService block of code is needed only if it is desired that a route is also rendered between the landmarks, in the order in which they were added, where the first landmark is the departure point, and the last one is the destination, whereas the other landmarks are intermediary waypoints.

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


at the bottom of the "Center on landmark list" block, you can add this line:


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

Center on landmark list programmatic QML example

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