CODEWITHSUNDEEP
qtqmlqt5
Mr.Tu
Mr.Tu

Reputation: 2733

how to update or reload MapQuickItem when Map is modified size?

Use MapQuickItem to display a component on a map, the quickitem's coordination is not changed, but when the map is modified size( width or height), the quickitem will dispear on a wrong coordination, how to reset quickitem's coordination(latitude, longitude)

Map {
    id: map
    
    height: 100  // for example, i change the height, marker's position will not update
    width: 100  // but,,, if change, width , will auto update.

    MapItemView {
        model: xxxx
        delegate: MapQuickItem {
            id: marker
            anchorPoint.x: image.width/4
            anchorPoint.y: image.height
            
            coordinate: object.coordinate
            sourceItem: Image {
                id: image
                source: "xxxx.png"
            }
        }
    }
}

i.e the marker does not adjust the position (not coordinate) as map's size changed.

Upvotes: 1

Views: 614

Answers (1)

matt
matt

Reputation: 404

A little late but here's how I did it, because I just had the same problem on macOS and Windows and it may help anyone. As I am on Qt 5.11, I don't have access to onVisibleRegionChanged signal, so I used onHeightChanged and onWidthChanged signals to trigger a timer when resizing is done. To simulate map movement and trigger refresh, I used pan() function.

Map {
    id: map
    height: 500
    width: 500

    onHeightChanged: {
        resizeBugTimer.restart();
    }

    onWidthChanged: {
        resizeBugTimer.restart();
    }

    Timer {
        id: resizeBugTimer
        interval: 50
        repeat: false
        running: false
        onTriggered: {
            map.fixPositionOnResizeBug();
        }
    }

    function fixPositionOnResizeBug() {
        pan(1, 1);
        pan(-1, -1);
    }

    MapItemView {
        model: xxxx
        delegate: MapQuickItem {
            id: marker
            anchorPoint.x: image.width/4
            anchorPoint.y: image.height
        
            coordinate: object.coordinate
            sourceItem: Image {
                id: image
                source: "xxxx.png"
            }
        }
    }
}

Hope this helps.

Upvotes: 1

Related Questions