Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Resize Scale bar on zoom in and zoom out



  • I have a scale bar displayed in the ARCGIS map with QML and i need to resize this scale bar when ever i zoom in and zoom out.

    Created a new qml as ScaleBar.qml

    import QtQuick 2.2
    import Esri.ArcGISRuntime 100.1

    Item {
    id: scaleBar

    property MapView map: null
    
    signal clicked()
    signal doubleClicked()
    
    implicitWidth: 100
    implicitHeight: 50
    
    width: 100
    height: 50
    
    Component.onCompleted: {
        if (!map && parent && parent.objectType && parent.objectType === "MapView") {
            map = parent;
        }
    }
    
    QtObject {
        id: internal
    
        property real segmentWidth: scaleBar.width / 4
        property real segmentHeight: scaleBar.width * 0.05
    }
    
    Column {
        width: parent.width
        spacing: 0
    
        Text {
            id: scaleText
    
            width: parent.width
            text: "1:" + Math.round(map.mapScale).toLocaleString()
            horizontalAlignment: Text.AlignHCenter
            elide: Text.ElideRight
            font {
                pointSize: 10
                bold: true
            }
        }
    
        Item {
            width: parent.width
            height: internal.segmentHeight * 2
    
            Column {
                id: segmentsColumn
    
                anchors.fill: parent
    
                Repeater {
                    model: 2
    
                    Row {
                        id: segmentRow
    
                        property int rowIndex: index
    
                        Repeater {
                            model: 4
    
                            Rectangle {
                                width: internal.segmentWidth
                                height: internal.segmentHeight
    
                                color: (index + segmentRow.rowIndex) & 1 ? "white" : "black"
                            }
                        }
                    }
                }
            }
    
            Rectangle {
                anchors {
                    fill: segmentsColumn
                }
    
                color: "transparent"
                border {
                    color: "black"
                }
            }
        }
    
        Row {
            width: parent.width
    
            Repeater {
                model: 3
    
                Text {
                    text: "d" + index
                    width: parent.width / 2
    
                    horizontalAlignment: Text.AlignLeft
                    font {
                        pointSize: 10
                        bold: true
                    }
                }
            }
        }
    
        Text {
            width: parent.width
            text: qsTr("units")
            horizontalAlignment: Text.AlignHCenter
            elide: Text.ElideRight
            font {
                pointSize: 10
                bold: true
            }
        }
    }
    
    
    MouseArea {
        anchors.fill: parent
    
        onClicked: {
            scaleBar.clicked();
        }
    
        onDoubleClicked: {
            scaleBar.doubleClicked();
        }
    }
    

    }

    This is how i am setting scalebar in Mapview

        ScaleBar{                
            anchors.left: mapView.left
            anchors.bottom: mapView.bottom
            anchors.bottomMargin: 80
            anchors.margins: 10 * scaleFactor
            map:mapView
               }
    

    How can i resize scalebar just like it works in googlemaps.

    5a5badd1-911a-42f8-a0dd-6273e8b21602-image.png


Log in to reply