QML osm Plugin draw both path & items - qt

Question

How can I draw both item icons & path between points from model using QML and osm plugin?
XmlListModel {
...
}
Plugin {
id: mapPlugin
objectName: "mapPlugin"
name: "osm"
...
}
Map {
id: map
objectName: "map"
anchors.fill: parent
plugin: mapPlugin
MapItemView {
id: mapItemView
model: mapModel
// draw item icons
delegate: MapQuickItem {
coordinate: QtPositioning.coordinate( model.latitude, model.longitude )
...
}
// could draw lines between points, but unable to use two delegates
/* delegate: MapPolyline {
path: pathRole
line.color: "red"
line.width: 5
} */
}

Answer 1

One trick you could do is create two MapItemViews. One for drawing the icons and the other for drawing line segments connecting the two, i.e.
MapItemView { // for drawing icons
model: mapModel
}
MapItemView { // for drawing line segments
model: mapModel.count - 1
}
Here's a sample of how you may do this:
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtLocation 5.15
import QtPositioning 5.15
Page {
Plugin {
id: mapPlugin
name: "osm"
}
Map {
anchors.fill: parent
plugin: mapPlugin
center: QtPositioning.coordinate(43.0896, -79.0849)
zoomLevel: 12
MapItemView {
model: mapModel
delegate: MapQuickItem {
coordinate: QtPositioning.coordinate(lat, lon)
anchorPoint.x: 5
anchorPoint.y: 5
sourceItem: Rectangle {
width: 10
height: 10
color: "red"
border.color: "black"
}
}
}
MapItemView {
model: mapModel.count - 1
delegate: MapPolyline {
line.width: 3
line.color: "green"
path: [
{ latitude: mapModel.get(index).lat, longitude: mapModel.get(index).lon },
{ latitude: mapModel.get(index + 1).lat, longitude: mapModel.get(index + 1).lon }
]
}
}
}
ListModel {
id: mapModel
function appendCoordinate(lat, lon) {
append( {lat, lon} );
}
Component.onCompleted: {
appendCoordinate(43.0896, -79.0849);
appendCoordinate(43.0796, -79.0849);
appendCoordinate(43.0796, -79.0949);
}
}
}