Interface JawgPlacesInputOptions

Options for JawgPlaces.Input

interface JawgPlacesInputOptions {
    accessToken?: string;
    boundary?: BoudaryOptions;
    clearCross?: boolean;
    debounceDelay?: number;
    focusPoint?: LatLon | (() => LatLon);
    input: string | HTMLElement;
    language?: string | (() => string);
    layers?:
        | string
        | string[]
        | (() => string)
        | (() => string[]);
    minLength?: number;
    onClear?: (() => void);
    onClick?: ((feature: Feature) => void);
    onClose?: (() => void);
    onError?: ((error: any) => void);
    onFeatures?: ((features: Feature[]) => void);
    resultContainer?: string | HTMLElement;
    reverse?: ReverseOptions;
    searchOnTyping?: boolean;
    showResultIcons?: boolean;
    size?: number;
    sources?:
        | string
        | string[]
        | (() => string[])
        | (() => string);
}

Hierarchy (view full)

Properties

accessToken?: string

Your personal access token, create your own on the Jawg Lab. This is filled automatically when you get the library with our CDN.

boundary?: BoudaryOptions

Set of options when you are looking for places in a particular region.

clearCross?: boolean

Add a clear cross in the right side of the input.

debounceDelay?: number

Set the number of milliseconds to wait before a search validation. If you press Enter the search will be immediately validated. This option work only when searchOnTyping=true. Default value is 350.

focusPoint?: LatLon | (() => LatLon)
input: string | HTMLElement

The <input> to transform into a geocoding search bar. This can be either a id (e.g #my-input), class selector (e.g .my-input) or the HTMLElement. With some frameworks/UI libs such as React, you can't use the ref here.

language?: string | (() => string)

Return results in a specific language using BCP47 standard (e.g 'en', 'fr', 'de', ...). By default, we use HTTP Header set by the browser and English when not present. Language can be static or dynamic with the function.

layers?:
    | string
    | string[]
    | (() => string)
    | (() => string[])

Filter the kind of place you want to find. Layers can be static or dynamic with the function.

minLength?: number

Set the minimum number of characters to trigger a geocoding request. If you press Enter the search will be validated even if the length is not reached. This option work only when searchOnTyping=true. Default value is 0.

onClear?: (() => void)

Callback triggered when the input is empty.

onClick?: ((feature: Feature) => void)

Callback triggered when the user click on a result.

Type declaration

    • (feature): void
    • Parameters

      • feature: Feature

        The feature selected by the user

      Returns void

onClose?: (() => void)

Callback triggered when the result list is closed/cleared.

onError?: ((error: any) => void)

Callback triggered when Jawg Places API returns an error.

onFeatures?: ((features: Feature[]) => void)

Callback triggered when Jawg Places API returns without error.

Type declaration

    • (features): void
    • Parameters

      • features: Feature[]

        The list of features returned by Jawg Places API

      Returns void

resultContainer?: string | HTMLElement

The custom <div> that will contain the geocoding results. By default the container is created by Jawg Places JS. With some frameworks/UI libs such as React, you can't use the ref here.

reverse?: ReverseOptions

Option to activate reverse geocoding withing the input. You can paste coordinates in the form {lat}/{lon} in the input. The separation can be either / (slash), , (comma) or (space).

searchOnTyping?: boolean

Set this to true to activate search on typing, this will also use autocomplete search. Default value is false, you will need to press Enter to validate your search.

showResultIcons?: boolean

Show icon at the left each results.

size?: number

Set the default number of results. Default value is 10.

sources?:
    | string
    | string[]
    | (() => string[])
    | (() => string)

Filter the originating source of the data. Sources can be static or dynamic with the function.