Skip to main content
Version: Upcoming 🦄

ReverseGeolocatorButton

This Form control is a button which request the current location of the user and fills in the Form fields defined in its options.

<div
    id="getLocation"
    class="pdf-hide"
    data-hf-control="ReverseGeolocatorButton"
    data-hf-options="{
        buttonLabel: 'Get Location',
        buttonType: 'small',
        targetFields: {'address_zip_code':'postal_code', 'address_city': 'locality', 'address_street_and_no':'route + street_number' },
        typesSeperator: ', ', 
        nextToField: 'address_city',
        watcher: {
            alwaysShowAccuracy: true,
            acceptResultAfter: 10,
            acceptPositionIfExact: true,
            requestAlwaysNewPosition: true
        }
    }"
></div>

FormControl Options​

targetFields - required​

An object with key-value pairs. The key is the fieldId, the value is one of the possible components of a google maps reverse geocoding result. For more information about the different address types see the reverse geocoding documentation of Google. Concatenation of address types is possible with the plus sign.
How to use:
targetFields: {'address_zip_code':'postal_code', 'address_city': 'locality', 'address_street_and_no':'route + street_number' }
Type: { [formControlId: string]: string }

buttonLabel​

Sets the label of the button (displayed if buttonType is "medium" or "large")
How to use:
buttonLabel: 'Get Location'
Type: string

buttonType​

There are three buttonTypes "small", "medium" and "large".
How to use:
buttonType: 'large'
Type: 'small' | 'medium' | 'large'

doNotCopy​

Set "true" whenever the field should be cleared if the Form is copied.
How to use:
doNotCopy: true
Type: boolean

hidden​

Hide FormControl in Form.
How to use:
hidden: true
Type: boolean

nextToField​

Define the Form Control the button should be placed next to. Looks like: this
How to use:
nextToField: 'address_city'
Type: string

typesSeperator​

Specifies a delimiter for the concatenation of address components, eg. if you want to combine the street (route) with the street number address component in one field, seperated by a comma: "Baker Street, 221b".
How to use:
typesSeperator: ', '
Type: string

watcher​

Define additional functions to the query and the result.
How to use:
watcher: {...}
Type: object

Watcher Object​

acceptPositionIfExact​

Set this property to accept the query result automatically if the accuracy deviation is below 10 m.
How to use:
acceptPositionIfExact: true
Type: boolean

acceptResultAfter​

Set this property to the number of seconds after which the result will be accepted automatically and stored.
How to use:
acceptResultAfter: 10
Type: number

alwaysShowAccuracy​

This property provides an information on the approximate deviation in meter and by color code ( red: deviation more than 50 m, orange: deviation between 10 and 50 m, green: deviation lower than 10 m).
How to use:
alwaysShowAccuracy: true
Type: boolean
Default: true

requestAlwaysNewPosition​

Set this property to false to prevent any observation of the user position changes and result updates.
How to use:
requestAlwaysNewPosition: false
Type: boolean
Default: true

Stored data

​

{
    "id": "getLocation",
    "value": {
        "position": {
            "latitude": 47.06732,
            "longitude": 15.43345,
            "accuracy": 21,
            "accuracyFormatted": "~ 21 m",
            "timestamp": "2018-07-05T08:38:11.717Z"
        },
        "geocoderResult": {
            "address_components": [
                {
                    "long_name": "1a",
                    "short_name": "1a",
                    "types": ["street_number"]
                },
                {
                    "long_name": "Entenplatz",
                    "short_name": "Entenpl.",
                    "types": ["route"]
                },
                {
                    "long_name": "Gries",
                    "short_name": "Gries",
                    "types": ["political", "sublocality", "sublocality_level_1"]
                },
                {
                    "long_name": "Graz",
                    "short_name": "Graz",
                    "types": ["locality", "political"]
                },
                {
                    "long_name": "Graz",
                    "short_name": "Graz",
                    "types": ["administrative_area_level_2", "political"]
                },
                {
                    "long_name": "Steiermark",
                    "short_name": "Steiermark",
                    "types": ["administrative_area_level_1", "political"]
                },
                {
                    "long_name": "Austria",
                    "short_name": "AT",
                    "types": ["country", "political"]
                },
                {
                    "long_name": "8020",
                    "short_name": "8020",
                    "types": ["postal_code"]
                }
            ],
            "formatted_address": "Entenplatz 1a, 8020 Graz, Austria",
            "geometry": {
                "bounds": {
                    "south": 47.0671784,
                    "west": 15.433212700000013,
                    "north": 47.0675852,
                    "east": 15.433834899999965
                },
                "location": {
                    "lat": 47.0674364,
                    "lng": 15.433538099999964
                },
                "location_type": "ROOFTOP",
                "viewport": {
                    "south": 47.0660328197085,
                    "west": 15.432174819708507,
                    "north": 47.0687307802915,
                    "east": 15.434872780291471
                }
            },
            "place_id": "ChIJQa-mgHk1bkcR-_XOmRNkV8g",
            "types": ["premise"]
        }
    }
}