Accessing delegate component of the MapItemView model

[Vijaykarthikeyan]

Im trying to modify the delegate item of the MapItem view model. On Clicked on that item, it's source should be changed while the other items in that view remains same..On clicking the other item,previously changed item should comeback to normal like other items..while currently clicked item should be modified. I succesfully implemented the logic.But,upon running,when i click the 1st item,it is changing the last item and so on.TFor example,when i click the 1st item,on debugging it shows correctly the first item is 1.But,on map,it is modifying the last.the index are reversed.how to solve this.

this is my code snippet:

        MapItemView
            {
                id:markerItem2
                model: routeQuery2.waypoints

                delegate: MapQuickItem
                                {
                                    id:mark2
                                    anchorPoint.x: waypointMarker.width / 2
                                    anchorPoint.y: waypointMarker.height / 2
                                    coordinate: modelData
                                    visible: true

                                        sourceItem: Image
                                                        {
                                                            id: waypointMarker
                                                            source: "qrc:/resources/images/location.png"
                                                            width: 32
                                                            height: 32
                                                            fillMode: Image.PreserveAspectFit
                                                            z:2
                                                            visible:true
                                                            transformOrigin: Item.Center

                                                            MouseArea
                                                                {
                                                                    anchors.fill: parent

                                                                    onClicked :function(mouse)
                                                                                    {
                                                                                        mouse.accepted=true
                                                                                        // Access properties of the clicked item using index
                                                                                        //var clickedItemData = markerItem2.model[index];


                                                                        // Access properties of the clicked item using index
                                                                        var clickedIndex = markerItem2.children[index];

                                                                        for (var marker in markerItem2.children)
                                                                                    {
                                                                                       if(markerItem2.model[marker]===markerItem2.model[index])
                                                                                       {
                                                                                           console.log(marker)
                                                                                            markerItem2.children[marker].sourceItem.source = "qrc:/resources/images/locate_green.png";
                                                                                        }else
                                                                                           markerItem2.children[marker].sourceItem.source= "qrc:/resources/images/location.png";
                                                                                    }

                                                                    }
                                                                }
                                                        }
                                }

            }

[Vijaykarthikeyan]

@GrecKo Thank you.. you have solved my greatest problem...I'm seraching the solution for the past 1 week..thank you once again..thank you so much

[GrecKo]

@Vijaykarthikeyan Don't modify delegates directly.

Add a property outside of them and modify that property. Here you can do it with a selectedWaypoint property in the MapItemView, the code is then much simpler:

 MapItemView {
    id: markerItem2
    model: routeQuery2.waypoints
    property int selectedWaypoint: -1
    
    delegate: MapQuickItem {
        id: mark2
        anchorPoint.x: waypointMarker.width / 2
        anchorPoint.y: waypointMarker.height / 2
        coordinate: modelData
        
        sourceItem: Image {
            readonly property bool isSelected: index === markerItem2.selectedWaypoint
            source: "qrc:/resources/images/" + (isSelected ? "locate_green.png" : "location.png")
            width: 32
            height: 32
            fillMode: Image.PreserveAspectFit
            z:2
            visible:true
            transformOrigin: Item.Center
            TapHandler {
                onTapped: markerItem2.selectedWaypoint = index
            }
        }
    }    
}

[Vijaykarthikeyan]

@GrecKo Thank you.. you have solved my greatest problem...I'm seraching the solution for the past 1 week..thank you once again..thank you so much