Hi,
I have the following scenario:
I create a label with a mouse click, but after it has been created I want to rename the text on the label.
I would like to solve this by entering it in an input field.
But how do I do that?
I couldn’t find a way to update the entity.
Here are some screenshots:
I would be very happy if you could help me with this.
Thanks in advance
You would need to watch for changes to that input field and then update name property on that entity. You seemingly have it’s id (based on the screenshot) so, you would find that entity by id, and change it’s name property to the new value from the text input.
If you aren’t using the entity api and are instead using czml, you would just process a new czml packet with the id of the entity and the new name property and the entity would update.
Hello @david,
thanks for the answer and hint.
Yes, in theory I thought so too. But how do I do that I can search/check for the ID?
I’m missing some knowledge of code since I’m new to Cesium. I’m not familiar with CZML at all. Have never used this.
If you could help me with some code examples, I can understand a lot of things much better with the help of the code.
@Mr.Lion Once the entity is created, you can update its label’s text value when your HTML element’s value changes. See this Sandcastle for an example.
Hope this helps!
Wow, that’s exactly what I was looking for…
But what and how do I do it if I have several labels on the card and there is a separate input field for each label?
So suppose I have 5 labels and also 5 input fields.
So for each label a single separate one.
How can I control that then?
Yeah so, in his example above, he created a single input that referenced an entity that he created right there. That probably wouldn’t your use case (having a variable just sitting there with a reference to the entity). So, for what I’m understanding your use case to be, you would have an entity id associated with each input, and then that input changes, using the input event on the element, you could get the entity from the entityCollection using getById and passing it the id of the entity. Then you would just set the label text for that entity, to the new value in the input.
I took your example in advance to test. But since I’m using TypeScript in my code, I get an error here.
The error is that text is not a type string, but of type Cesium.Property or undefined … If I cast the string to Cesium.Property now, it doesn’t work either.
What can I do here?
Do you have an example for me or could you give an example of what you mean exactly?
Thanks in advance
Something like this. If you have the id, you could just grab the entity using it’s id (see line 10) and then set it.
Just out of curiosity are you using any kind of frontend library for all your UI? React/Vue/Angular/Svelte/etc… anything like that? Or are you using just plain html and javascript?
I have achieved the following. But not quite right either.
The white text comes directly from the input field.
But here I can see that he creates a new instance in the right position and thus a new text instead of taking the existing instance and updating the text from it.
What should also be taken into account here is that the selection should be based on the ID. Otherwise I have the problem when I have several labels that only the last label is updated and not the one you want.
I ask for help.
I’ve had this problem since yesterday and I can’t solve it.
@Mr.Lion In the Sandcastle that I posted above, I demonstrated how to change the label.text property of an Entity. If you are adding multiple entities in your application, you need to store their id properties, so you can query the correct entity based on the ID, using EntityCollection.getById.
For example, if by clicking on the map, you are adding an entity to the viewer’s entity collection, you would simply use viewer.entities.getById(<ID_OF_YOUR_ENTITY_HERE>) and apply the change to that entity, as I have shown in my Sandcastle.
Additionally, you may also query the currently selected entity using viewer.selectedEntity and apply the changes to that.
@sanjeetsuhag
yes I also applied it like in your example and as I showed in the screenshot above it didn’t work properly.
In theory, you can always describe it perfectly like this. But how is it supposed to work? I can’t find any examples of this online…
But I don’t want to click the label on the map to select it. But I have a label = a text field …
So suppose there are 3 labels:
Label 1 = TextField 1
Label 2 = TextField 2
Label 3 = TextField 3
So 1:1 (the text fields are dynamically generated for me the more I create labels) So I don’t need anything I want to click on the map.
@Mr.Lion Does this Sandcastle illustrate the behavior your are looking for? To use it, click on the globe to generate a label.
wow looks good and you are a genius and very fast…
Unfortunately, I still haven’t made it myself. I always seem to make a mistake in thinking.
But you used something completely different here. You went through the view.camera.pickEllipsoid path.
In this way it records which entity belongs to which input field or where exactly are the relationships to each other set up here?
I have to analyze your example first to understand it better. Will then try to integrate your example into my code later. hope it works
Thank you for the great help.
Almost desperate…
How I hate Cesium’s documentation.
There’s almost nothing in here.
I don’t even know what the function is good for and what exactly it does and in which areas it can be used etc.
It only says what type the parameters are and that’s it…
How am I supposed to learn like this?
I don’t know why, for example, you passed scene.globe.ellipsoid in the 2nd parameter. What exactly is the point?
I would be happy if someone could enlighten me on this.
I can’t find anything in the documentation.
In the documentation you could have saved the description of the parameter type. Because you get the information from the IDE anyway. Instead, they should have described what exactly the function does and what it is for.
Thanks in advance
The API documentation is there to help developers explore the different classes and methods in the library. If you’re looking for examples of API usage beyond what’s present in the documentation, it’s worth checking out the Sandcastle and the tutorials.
Hi @sanjeetsuhag,
I managed it but I have a question for you and I need your help.
And I was able to solve it like this:
Like in your example here:
I couldn’t do it because I got type errors.
I do not get it. Text is a string of Type but the error says String and Cesium.Property do not match.
So I created this new instance of the label.
But I have the following problem with this.
When you click, the label looks like this:
And when I edit it:
So I see that all the properties I set are gone. Is also understandable since I created a new instance.
I also have the problem that the ID is no longer the same, it has also changed with the new instance.
How can I make it so that the instance doesn’t change and I can only edit the text?
I’m using TypeScript here and it’s not like in JS that the types don’t matter…
I ask for help.
Thanks in advance
@Mr.Lion I don’t think you should be creating a new LabelGraphics object every time. I am not that familiar with TypeScript, but could you cast the string value to ConstantProperty?
So the conversion doesn’t work either.
Get the following error:
Converting from type “string” to type “ConstantProperty” can be an error because the types do not have enough overlap. If this was intentional, first convert the expression to “unknown”.
On the page here:
TypeSript Online IDE
you can test typescripte online.
I would be very happy if you could help me with this.
I’m back in the hose and can’t get any further…
@Mr.Lion From the API documentation for ConstantProperty, it seems like passing the string in the constructor should be possible.
shape.label!.text = new Cesium.ConstantProperty(target.value);