How to change colour of delegate component on map in qt qml

Question

I am using MapQuickItem as a delegate component on map. I have three component. I want to chnage the colour of delegate component when I am clicking on component.And rest are as same colour.How to change the colour of only selected component colour

 Plugin
{
    id: hereMaps
    name: "here"
    PluginParameter { name: "here.app_id"; value: "oBB4FivcP23m2UZQCj8K" }
    PluginParameter { name: "here.token"; value: "P-D8XRRGeVt0YphUuOImeA" }
}

Map {
    id: map
    anchors.fill: parent
    activeMapType: supportedMapTypes[1];
    zoomLevel: 18
    plugin: hereMaps
    center: QtPositioning.coordinate(19.997454, 73.789803)

    MapItemView {
        id: markerItem
        model: [
            { id: "marker1", color: "red" },
            { id: "marker2", color: "red" },
            { id: "marker3", color: "red" }
        ]
        delegate: mapMarkerComponent
    }

    Component {
        id : mapMarkerComponent

        MapQuickItem {
            id: mapMarker
            coordinate: QtPositioning.coordinate(19.997454, 73.789803)

            sourceItem: Rectangle {

                id: handle
                color: modelData.color
                width: 40
                height: 40

                MouseArea {
                    drag.target: parent
                    anchors.fill: parent
                    onClicked: {

                        handle.color = "green"

                    }
                }
            }

            onCoordinateChanged: {
                console.log(modelData.id + ":" + coordinate);
            }
        }
    }
   }

This code already do that: changes colour of clicked marker from red to green... Be more precise. What you trying to achieve? — DaszuOne, Apr 23 '20 at 11:06
I want to change colour of that rectangle component when I will click on that. There are three rectangle components in my code. When I click on first rectangle it becomes green and other two are red. When I am clicking on second rectangle I want to change the colour of second rectangle and first and third becomes red. But in my code when I click on second rectangle first is also remains green.How to make first and third rectangle red and only clicked rectangle to red — srs, Apr 23 '20 at 12:23

score 1 · Accepted Answer · answered Apr 23 '20 at 15:05

Most obvious approach is to iterate through all markers and reset colours of those, then change colour of clicked marker. To do this, change onClicked to:

// switch to red if its green
if (handle.color == "#008000") {
    handle.color = "#ff0000";
    return;
}
// switch all markers to red
for(var marker in markerItem.children) {
    markerItem.children[marker].sourceItem.color = "#ff0000";
}
// switch clicked marker to green
handle.color = "#008000";

However, this is not the best solution (manipulate on colours), if you want to "select" marker. Read about states in QML (link), and try to implement some kind of "normal" and "selected" state to your markers.

How to change colour of delegate component on map in qt qml

1 Answers1