nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Changing the text of a text graphic

RainerFarsch

I'm putting a text graphic onto a graphic layer that shows the distance from a vehicle (Point geometry) to a waypoint (also Point geometry). The text graphic will eventually be below the the waypoint graphic, right now it sits on top of it. If the user changes the position of the waypoint, then the waypoint graphic changes its position, the distance between it and vehicle is recalculated, and the text is changed.

GraphicsLayer {

id: root

// -------------------------------------------------------------------------

// Waypoint distance graphic.

Graphic {

id: waypointDistanceTextGraphic

geometry: waypointCoord // Places text graphic on top of waypoint graphic - ToDo: move text graphic below waypoint graphic

symbol: TextSymbol {

id: textSymbol

text: courseTrack.geometry.geodesicLength()

textColor: "white"

}

onWaypointCoordChanged: {

// Try using the cloning technique:

var waypointDistanceTextGraphic2 = waypointDistanceTextGraphic.clone()

waypointDistanceTextGraphic2.text = heloCoord.distance(waypointCoord)

console.log("Waypoint distance: ", waypointDistanceTextGraphic2.text)

waypointDistanceTextGraphic = waypointDistanceTextGraphic2

}

The distance printed to the console is correct, but the text graphic remains the same (in this case the geodesic length of the course track - just trying different things here). Can the text of a text graphic be changed? If so, how?

Thanks!

-Rainer

Find more posts tagged with

Accepted answers

Lucas Danzinger

Rainer-

The reason this is happening is because it is a value based object, so when you are getting/setting, you are seeing a copy, but the actual value is not updated. You will need to get the symbol out of the graphic, modify it, then assign it back.

GraphicsLayer {
  id: gl


  Graphic {
  id: g
  geometry:  Point {
    x: 0
    y: 0
    spatialReference: mainMap.spatialReference
  }


  symbol: TextSymbol {
    id: txt
    text: "0"
    }
  }
}


Button {
  property var count: 0
  anchors {
    right: parent.right
    top: parent.top
    margins: 15
  }
  text: "set text"
  onClicked: {
    var txtSymbol = g.symbol;
    txtSymbol.text = "some text " + count++;
    g.symbol = txtSymbol;
  }
}

-Luke

All comments

RainerFarsch

Thanks Luke,

This will do nicely for now. I should have found 'yOffset' on my own . I appreciate your time and patience.

-Rainer

Lucas Danzinger

Rainer-

You can use yOffset to move it below another symbol. Take a look at what I did below. However, we don't currently have anything for conflict detection with other labels, or to know if you are moving off the screen. This is getting into more advanced labeling of features, which we plan to support in the future. I have added a note to consider the case of when labels begin to move off the screen, so that they re-arrange themselves automatically.

Thanks,

Luke

       GraphicsLayer {
            id: gl

            Graphic {
                id: g
                geometry:  Point {
                    x: 0
                    y: 0
                    spatialReference: mainMap.spatialReference
                }

                symbol: TextSymbol {
                    id: txt
                    text: "0"
                    yOffset: -15
                }
            }

            Graphic {
                id: g2
                geometry:  Point {
                    x: 0
                    y: 0
                    spatialReference: mainMap.spatialReference
                }

                symbol: SimpleMarkerSymbol {
                    color: "red"
                    size: 14
                }
            }
        }

RainerFarsch

Thanks Luke,

Sounds simple enough. I was re-using the cloning technique we used for the changing the geometry on a polyline in an ealier posting; but I did not implement it correctly here. I've implemented what you have suggested and it works nicely.

Follow-up:

How would I best move the text down below the symbol marker (rather than on top of it)? I tried offsetting the geometry, but a got a major signal fault and as I understand, it would only move the text right or left of the symbol. Is there a standard way to do this? For example, is there a way to ensure that the text is always directed towards the center of the screen so there is no chance that the text gets cutoff by the left, right, top or bottom edges of the screen if the waypoint is set too close to an edge?

Thanks again!

-Rainer

Lucas Danzinger

Rainer-

GraphicsLayer {
  id: gl


  Graphic {
  id: g
  geometry:  Point {
    x: 0
    y: 0
    spatialReference: mainMap.spatialReference
  }


  symbol: TextSymbol {
    id: txt
    text: "0"
    }
  }
}


Button {
  property var count: 0
  anchors {
    right: parent.right
    top: parent.top
    margins: 15
  }
  text: "set text"
  onClicked: {
    var txtSymbol = g.symbol;
    txtSymbol.text = "some text " + count++;
    g.symbol = txtSymbol;
  }
}

-Luke

OwenEarley

I haven't used the Qt SDK but in the API the TextSymbol class has a SetText method that should update the text value. The text property on the TextSymbol class only appears to return the current value.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.