QML osm Plugin draw both path & items

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);
        }
    }
}