Get input values from text box

I would like to get input values from users (latitude,longitude) and plot those points on the globe. I am using the Simple CZML Demo as a basis. I haven’t seen any examples of displaying input from users on the globe other than the picking demo which is quite different than what I want to do. Please help.

This is actually fairly easy to do. Take a look at the Billboards sample in Sandcastle.

Wayne is right. A combination of the picking example and billboard example will get you heading in the right direction.

Patrick

I’ve never used Dojo before and am having trouble with the dijit/form/NumberTextBox. I understand that the Billboard is an example of how to plot point. I’m having trouble getting the points from a text box. Can anyone provide a quick example? I’m a novice and new to programming as well (but very diligent). Thanks.

This Dojo tutorial may help:

http://dojotoolkit.org/documentation/tutorials/1.8/themes_buttons_textboxes/

In general, Dojo text boxes have a “value” property, which you can use to get the current value out of the text box with code like: textbox.get(‘value’)

See http://dojotoolkit.org/reference-guide/1.8/dijit/form/TextBox.html#getting-and-manipulating-the-value

There’s a snippet there that shows an event handler hooked up to the “change” event on at text box. You might prefer to hook up a “click” event to a button instead, but the code that gets the value will be the same.

Scott

Thanks Scott. I think one of the problems that I’m havng is that my text box is hidden behind some buttons. I haven’t seen any properties for location. How can I move the text box, or the buttons…in the style sheet?

Yes, CSS is the way to position items, though it can get a bit complicated.

http://www.w3schools.com/css/css_positioning.asp

In our Sandcastle examples, the “toolbar” container is positioned in the top left corner using absolute positioning, by setting top: 0; left: 0. One option is to use CSS to move your text box by making it be absolutely positioned too, and then changing top or left to change it’s location. Another option is to instead place your text boxes inside an absolutely positioned container, like the toolbar, and then create more sub-containers inside to control the position of items.

For example, the Terrain Sandcastle example uses two divs inside the toolbar div to position the location buttons below the terrain selector drop-down: http://cesium.agi.com/Cesium/Apps/Sandcastle/index.html?src=Terrain.html

I am using another div inside of the toolbar div but I can only get one of my textboxes to show up. Am I doing something wrong? Here is my HTML code:

Loading...

Longitude:
Latitude:

The javascript code for the textboxes looks like this:

function createTextBoxInterface() {
LatBox = new NumberTextBox({
name: “LatBox”,
constraints: {pattern: “0.######”}
}, “LatBox”);
LatBox.placeAt(‘LatBox’):

     LonBox = new NumberTextBox({
        name: "LonBox",
      constraints: {pattern: "0.######"}
}, "LonBox");
    LonBox.placeAt('LonBox');
}