Interface JawgPlacesLeafletOptions

Options to configure a Places JS instance for a Leaflet map.

const options = {
  accessToken: '<Access-Token>',
  input: '#my-input',
}

Remarks

Options for JawgPlaces.Leaflet

interface JawgPlacesLeafletOptions {
    accessToken?: string;
    adminArea?: AdminAreaOptions;
    boundary?: BoudaryOptions;
    clearCross?: boolean;
    container?: string | HTMLElement;
    debounceDelay?: number;
    focus?: FocusOptions;
    focusPoint?: LatLon | () => LatLon;
    input?: string | HTMLElement;
    inputClasses?: string | string[];
    L: __module;
    language?: string | () => string;
    layers?: string | string[] | () => string | () => string[];
    marker?: boolean | "all" | LeafletMarkerOptions;
    minLength?: number;
    noResultsMessage?: string | false;
    onClear?: () => void;
    onClick?: (feature: Feature) => void;
    onClose?: () => void;
    onError?: (error: any) => void;
    onFeatures?: (features: Feature[]) => void;
    place?: MapPlaceOptions;
    placeholder?: string;
    position?: "topleft" | "topright" | "bottomleft" | "bottomright";
    resultContainer?: string | HTMLElement;
    reverse?: boolean | ReverseOptions;
    searchOnTyping?: boolean;
    showResultIcons?: boolean;
    size?: number;
    sources?: string | string[] | () => string[] | () => string;
    transition?: LeafletTransitionOptions;
}

Hierarchy

  • JawgPlacesOptions
    • JawgPlacesLeafletOptions

Properties

accessToken? adminArea? boundary? clearCross? container? debounceDelay? focus? focusPoint? input? inputClasses? L language? layers? marker? minLength? noResultsMessage? onClear? onClick? onClose? onError? onFeatures? place? placeholder? position? resultContainer? reverse? searchOnTyping? showResultIcons? size? sources? transition?

Properties

OptionalaccessToken

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 or @jawg/js-loader.

OptionaladminArea

adminArea?: AdminAreaOptions

Set of options to display the selected administrative area on the map when it's available.

const adminArea = {
  show: true,
  fillColor: 'rgba(0, 75, 120, 0.1)',
  outlineColor: 'rgba(0, 75, 120, 1)',
}

Optionalboundary

boundary?: BoudaryOptions

Set of options to restrict your forward geocoding to specific regions. It will filter out all locations outside the configured boundaries.

const boundary = {
  countries: 'fra',
  circle: { lat: 46.842269, lon: 2.39985, radius: 500 },
  rectangle: {
    min: { lat: 43.032582, lon: 5.097656 },
    max: { lat: 49.006466, lon: 26.762695 },
  },
  gids: ['openstreetmap:island:relation/966358']
}

OptionalclearCross

clearCross?: boolean

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

Optionalcontainer

container?: string | HTMLElement

The custom <div> that will contain the input and geocoding results when Places JS is used as Leaflet Control. By default this is generated by Jawg Places JS. With some frameworks/UI libs such as React, you can't use the ref here.

OptionaldebounceDelay

debounceDelay?: number

Set the number of milliseconds to wait before sending search requests. If you press Enter the search will be immediately validated. This option works only when searchOnTyping=true.

Remarks

with a basic plan you may set this option to 1000 to avoid your restrictions.

Default Value

350

Optionalfocus

focus?: FocusOptions

Set of options to prioritize your forward geocoding to specific regions. All locations in these regions will have a better ranking.

const focus = {
  countries: 'fra',
  point: { lat: 46.842269, lon: 2.39985 },
  gids: ['openstreetmap:island:relation/966358']
}

OptionalfocusPoint

focusPoint?: LatLon | () => LatLon

Sort results in part by their proximity to the given coordinate.

Remarks

Coordinates can be static or dynamic through a function. The radius is 50km and cannot be changed.

Deprecated

Replaced by FocusOptions.point

Optionalinput

input?: string | HTMLElement

The <input> to transform into a geocoding search bar. This can be either an 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.

OptionalinputClasses

inputClasses?: string | string[]

Class to add to the input when it's generated by the library.

L

L: __module

The Leaflet instance for marker creation

Optionallanguage

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.

Remarks

Language can be static or dynamic through a function.

Optionallayers

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

Restrict your search (forward and reverse) to specific layers. You can get only addresses or administrative areas for example.

Remarks

Layers can be static or dynamic through a function.

Optionalmarker

marker?: boolean | "all" | LeafletMarkerOptions

Option for Leaflet markers.

const marker = {
  show: 'all',
}

OptionalminLength

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 works only when searchOnTyping=true.

Default Value

0

OptionalnoResultsMessage

noResultsMessage?: string | false

Set a custom message when no results are found. This can be disabled.

OptionalonClear

onClear?: () => void

Callback triggered when the input is cleared.

OptionalonClick

onClick?: (feature: Feature) => void

Callback triggered when the user click on a result.

Type declaration

    • (feature: Feature): void

    • Parameters

      • feature: Feature

        The feature selected by the user

      Returns void

OptionalonClose

onClose?: () => void

Callback triggered when the result list is closed/cleared.

OptionalonError

onError?: (error: any) => void

Callback triggered when Jawg Places API returns an error.

OptionalonFeatures

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

Callback triggered when Jawg Places API returns without error.

Type declaration

    • (features: Feature[]): void

    • Parameters

      • features: Feature[]

        The list of features returned by Jawg Places API. Can be an empty array.

      Returns void

Optionalplace

place?: MapPlaceOptions

Option to activate Place Details detection within the input. You can paste one or many GIDs in the input. The separation can be either , (comma) or (space).

const place = {
  enabled: true,
  geometries: 'source',
  fillColor: 'rgba(105, 87, 117, 0.1)',
  outlineColor: 'rgba(105, 87, 117, 1)',
}

Optionalplaceholder

placeholder?: string

Placeholder text to add when the input in generated by the library.

Optionalposition

position?: "topleft" | "topright" | "bottomleft" | "bottomright"

Position of the input on the map.

OptionalresultContainer

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.

Optionalreverse

reverse?: boolean | ReverseOptions

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

const reverse = {
  enabled: true,
  radius: 5,
}

Default Value

false

OptionalsearchOnTyping

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.

OptionalshowResultIcons

showResultIcons?: boolean

Show icon on the left side of each results.

Optionalsize

size?: number

Set the maximum number of results for forward and reverse geocoding.

Default Value

10

Optionalsources

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

Restrict your search (forward and reverse) to specific data sources. You can get only OSM or WOF data for example. This is not recommended.

Remarks

Sources can be static or dynamic through a function.

Optionaltransition

transition?: LeafletTransitionOptions

Set of option to configure the transition when the user click on a result on Leaflet.

const transition = {
  type: 'hybrid',
}

Settings

Member Visibility

On This Page

Properties