Skip to main content
Version: Upcoming 🦄

MapButton

The MapButton invokes routing apps. It passes filled in address information and the current location information.

<div
    id="mapButton"
    class="pdf-hide"
    data-hf-control="MapButton"
    data-hf-options="{
        cityId:'address_city',
        zipCodeId: 'address_zip_code',
        streetId:'address_street_and_no',
        buttonLabel: 'Route',
        buttonType: 'large',
        buttonHeading: 'Navigation'
    }"
></div>

FormControl Options​

buttonType - required​

Define the size of the button ('small', 'medium' or 'large').
How to use:
buttonType: 'large'
Type: 'small' | 'medium' | 'large'

cityId - required​

Provide the ID of the Form Control containing the city name. If set, "zipCodeId" is optional.
How to use:
cityId:'address_city''
Type: string

zipCodeId - required​

Provide the ID of the Form Control containing the ZIP code. If set, "cityId" is optional.
How to use:
zipCodeId: 'address_zip_code'
Type: string

buttonHeading​

Define a label for the control element.
How to use:
buttonHeading: 'Navigation'
Type: string

buttonLabel​

Define the button caption.
How to use:
buttonLabel: 'Route'
Type: string

buttonStyle​

Define the style of the button.
How to use:
buttonStyle: 'primary'
Type: 'default' | 'primary' | 'success' | 'error' | 'warning'

hidden​

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

icon​

Sets the icon of the button.
How to use:
icon: 'fa-barcode-scan'
Type: string

nextToField​

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

streetId​

Provide the ID of the Form Control containing the street name and number.
How to use:
streetId:'address_street_and_no'
Type: string