Geolocation

Description

This interaction allows you to geocode a location. You can use this to populate forms using the user's location. The elements you can populate are:

Street Address (only line 1, floor level is not present in the api)
City
Zip
State
Country

This is a singleton widget. This means only a single geocoder can exist per page.

Some browsers won't do this locally, so use Dropbox for testing. Also, it's important to ensure that location services are enabled on the device and/or browser.

Attributes

Basic Advanced JavaScript

data-ur-set="reverse-geocode": add this attribute to the form that wraps the whole interaction
data-ur-reverse-geocode-component="rg-street": for the street field
data-ur-reverse-geocode-component="rg-city": for the city field
data-ur-reverse-geocode-component="rg-zip": for the zip code field
data-ur-reverse-geocode-component="rg-state": for the state field
data-ur-reverse-geocode-component="rg-country": for the country field
data-ur-reverse-geocode-component="rg-button": to wrap a "use my location" button

Required


                  
                    
                      data-ur-set="reverse-geocode"

this element should wrap the whole interaction
attributes
- optional: data-ur-error-callback: inline JavaScript that will be called if geolocation doesn't fully succeed


                  
                    
                      data-ur-reverse-geocode-component="rg-button"

multiple?: false
state: N/A
if not included, the interaction will fire when the page is loaded


                  
                    
                      data-ur-reverse-geocode-component="rg-street"

multiple?: false
state: N/A


                  
                    
                      data-ur-reverse-geocode-component="rg-city"

multiple?: false
state: N/A


                  
                    
                      data-ur-reverse-geocode-component="rg-state"

multiple?: false
state: N/A
can use a select tag or a text-input field


                  
                    
                      data-ur-reverse-geocode-component="rg-zip"

multiple?: false
state: N/A


                  
                    
                      data-ur-reverse-geocode-component="rg-country"

multiple?: false
state: N/A
can use a select tag or a text-input field

You can also directly initialize the widget in JavaScript (components can be passed in as strings/elements/arrays):

Uranium.lib.geocode({
  set: "#a",
  "rg-city": "#b",
  "rg-zip": "#c"
});

Demonstration

The demonstration here activates on page load as long as location services are enabled.

Example

The Code

    <form data-ur-set="reverse-geocode" data-ur-error-callback="alert('Geolocation failed or was not allowed.')">
      <input type="text" data-ur-reverse-geocode-component="rg-street">
      <input type="text" data-ur-reverse-geocode-component="rg-city">
      <input type="text" data-ur-reverse-geocode-component="rg-zip">
      <select data-ur-reverse-geocode-component="rg-state">
        <option value="">None</option>
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        ...
      </select>
      <select data-ur-reverse-geocode-component="rg-country">
        <option value="" selected>Select Country</option>
        <option value="United States">United States</option>
        <option value="United Kingdom">United Kingdom</option>
        ...
      </select>
    </form>

Geocode Examples

Activating the geolocator with a button

Populate text inputs rather than select elements

FAQs

Does the browser always have to ask for a user to share their location?

Yes. It's a security feature of all browsers.