User input text

CesiumJS
1

I want the user to be able to input latitude longitude coordinates into a textbox, but I can't find a way to do that in Cesium. Does anyone know if that's possible?

2

That’s definitely not something that’s built into Cesium itself. You’ll need to write that yourself using HTML and Javascript.

3

Actually, you can put longitude, latitude coordinates into the Geocoder widget at the top of the page and it will take you to that location.
But if you wanted to add some sort of form to your application, yes, you would have to write that yourself.

Best,

Hannah

4

For anyone who is interested I found a solution. I didn't finish the part that changes the position of the point, but I get the user-inputted latitude and longitude values and put them in an alert. Here's the code

var toolbar = document.getElementById('toolbar');
viewer.infoBox.frame.setAttribute('sandbox', 'allow-same-origin allow-popups allow-forms allow-scripts allow-top-navigation');

viewer.selectedEntity = entity;

var entity = viewer.entities.add({
  name : 'Point',
  position : Cesium.Cartesian3.fromDegrees(-100, 50),
  point : {
        pixelSize : 10,
        color : Cesium.Color.RED
    }
});

viewer.infoBox.frame.addEventListener('load', function() {
    viewer.infoBox.frame.contentDocument.body.addEventListener('click', function(e) {
    if (e.target && e.target.className === 'click-test-button') {
        var LatValue = viewer.infoBox.frame.contentDocument.getElementsByName("Latitude")[0].value;
        var LongValue = viewer.infoBox.frame.contentDocument.getElementsByName("Longitude")[0].value;
        alert(LatValue + "\n" + LongValue);
        }
    }, false);
}, false);

function getValues(event) {
    var LatValue = document.getElementsByName('Latitude')[0].value;
    var LongValue = document.getElementsByName('Longitude')[0].value;
    alert(LatValue + "\n" + LongValue);
    
}

entity.description = '\
    Latitude: <input type="text" name="Latitude" id="Latitude" value="50"><br>\
    Longitude: <input type="text" name="Longitude" id="Longitude" value="50"><br>\
    <div style="padding:15px"><button class="click-test-button">\
    Click here</button></div>';