Geocode an address

Description

Makes an Ajax callback to a web service to geocode an address. Fill in the latitude and longitude fields in the current record with the information.

images/ga.png

If using Google, an API key is required.

Geocode Settings

Geocode method

Specify the method to use to geocode the address. Google sets a limit on how many addresses can be encoded, but may provide better results than Nominatim.

Address

Specify the field that has the address.

City

Specify the field that has the city.

State/Province

Specify the field that has the state/province.

Zip/Postal Code

(Optional) Specify the field that has the zip/postal code.

Country

(Optional) Specify the field that has the country.

Latitude field

Specify the name of the latitude field. This field will be filled in with the value that is looked up.

Longitude field

Specify the name of the longitude field. This field will be filled in with the value that is looked up.

Return the Latitude and Longitude of an Entered Address

  1. In the UX Builder on the UX Controls page open the 'Data Controls' menu. Click on the [TextBox] option to add a textbox control to the component. Give this textbox the name and label of 'Address'

    images/ga2.png
  2. Click on the [TextBox] option again to add a second textbox control. Name and label the control 'City'

    images/ga3.png
  3. Add a third [TextBox] control to the component. Name and label this control 'State'.

    images/ga4.png
  4. Add a fourth [TextBox] control with the name and label of 'Latitude'

    images/ga5.png
  5. Add a final [TextBox] control to the component with the name and label of 'Longitude'

    images/ga6.png
  6. Highlight the 'State' textbox control in the controls tree. Open the 'Other Controls' menu and click on the [Button] option to add a button under the 'State' textbox.

    images/ga7.png
  7. Highlight the button. In the properties list on the right under 'Button Properties' set the 'Button text' to read 'Find Coordinates'

    images/ga8.png
  8. Scroll down the properties list to the 'Javascript - (Touch, Mouse, Pointer Events)' section. Click the button next to the 'click' property.

    images/ga9.png
  9. Check the 'Action Javascript' radio button and click the 'Add New Action' button.

    images/ga10.png
  10. Type 'geo' into the Filter list, highlight the 'Geocode an address' action in the actions list, and click OK.

    images/ga11.png
  11. In the Geocode an Address properties set the 'Geocode method' to be 'Nominatim'.

    images/ga12.png
  12. Click the dropdown next to the 'Address' property and select the 'Address' textbox.

    images/ga13.png
  13. Click the dropdown next to the 'City' property and select the 'City' textbox.

    images/ga14.png
  14. Click the dropdown next to the 'State/Province' property and select the 'State' textbox.

    images/ga15.png
  15. Click the dropdown next to the 'Latitude' property and select the 'Latitude' textbox.

    images/ga16.png
  16. Click the dropdown next to the 'Longitude' property and select the 'Longitude' textbox. Click OK and Save

    images/ga17.png
  17. Run the component in Live Preview. Fill in the Address, City, and State fields and click the 'Find Coordinates' button.

    images/ga18.png
  18. The latitude and longitude should appear in their respective textbox controls.

    images/ga19.png

Obtain a Latitude and Longitude from an Address in a List

  1. In the UX Builder on the UX Controls page open the 'Data Controls' menu. Click on the [List] option to add a list control to the component.

    images/gal.png
  2. Highlight the list control. In the properties list on the right, scroll down to the 'List Properties' section and click the button next to the 'List properties' property to open the List Builder.

    images/gal2.png
  3. On the List Builder's Data Source pane select 'Static' from the 'Data Source Type' menu.

    images/gal3.png
  4. Click the button next to the 'Static data' property in the Static Data section.

    images/gal4.png
  5. In the Static Choices dialog click on the 'Sample data' button in the lower left corner. From the sample data choices select the 'Name and addresses (big data set)' option and click OK and OK.

    images/gal5.png
  6. In the 'Return Value' section set the 'Return value type' property to be 'Field'

    images/gal6.png
  7. Click the button next to the 'Return field' property and select 'Address' as the return field.

    images/gal7.png
  8. Open the 'List Layout' pane and use the blue > arrow to move the 'ContactName', Address', 'City', and 'Country' fields from the 'Available Fields' list to the 'Columns in List' section. Click OK to close the List Builder.

    images/gal8.png
  9. In the 'Other Controls' menu select the [Button] option to add a button control under the list control.

    images/gal9.png
  10. Open the 'Data Controls' menu click on the [TextBox] option to add a textbox control underneath the button in the controls tree. Name and label the textbox 'Latitude'.

    images/gal10.png
  11. Click on [TextBox] again to add a second textbox to the component. Name and label this textbox 'Longitude'.

    images/gal11.png
  12. Highlight the button control in the controls tree. In the properties list in the 'Button Properties' section set the 'Button text' property to be 'Find Coordinates'.

    images/gal13.png
  13. Scroll down the properties list to the 'Javascript - (Touch, Mouse, Pointer Events)' section. Click the button next to the 'click' property.

    images/gal12.png
  14. In the Edit Click Event dialog select 'Action Javascript' from the radio button options. Click the 'Add New Action' button.

    images/gal14.png
  15. Type 'geo' into the Filter list, highlight the 'Geocode and address' action in the actions list, and click OK.

    images/gal15.png
  16. In the Geocode an Address properties list set the 'Geocode method' property to be 'Nominatim'.

    images/gal16.png
  17. Click the dropdown next to the 'Address' property and select the list you defined, 'list1'.

    images/gal17.png
  18. Click the dropdown next to the 'Latitude field' property and select the 'latitude' textbox from the list of choices.

    images/gal18.png
  19. Set the 'Longitude field' property to be 'longitude'. Click 'OK' and 'Save' to exit.

    images/gal19.png
  20. Run the component in Live Preview. Click on a row in the list and then click the 'Find Coordinates' button. The latitude and longitude values for the address should appear in the Latitude and Longitude textboxes.

    images/gal20.png

See Also