Localities Widget Quick Start

How to embed and customize our City & postal codes search Javascript Widget
  1. Introduction
  2. Settings Overview
    1. minimumInputLength
    2. types
    3. data
    4. components
    5. Translations Settings
    6. Multiple Settings example

Introduction

The Woosmap Localities Widget aims to ease the embedding of a city and postal codes search box in your website. It’s a lightweight JavaScript library to quickly implement Woosmap Localities. Please use the hosted and updated online version, as in the example below :

<script src="https://sdk.woosmap.com/localities/localitieswidget.js?key=woos-xxxx"></script>

Replace “woos-xxxx” with your own Woosmap API Key.

To instantiate the Localities Widget, you need to build a new Autocomplete object . This constructor receives 2 arguments:

new woosmap.localities.Autocomplete('#InputSelector', {types: "locality"});

Refer to the Sample Usage to see full widget integration.

Settings Overview

Please refer to the Localities Reference to see all configurable settings. Below is a summary of main parameters. All parameters are optional.

minimumInputLength

Localities search will only trigger when the number of typed chars is superior or equal to minimumInputLength.
Defaults to 1.

"minimumInputLength": 3

types

Requested prediction type : ‘locality’ or ‘postal_code’.
When omitted, will return both.

"types": "locality"

data

Default config will return Postcodes only for (most of) western europe countries. “advanced” data will return postcodes for any country.
Defaults to ‘standard’

"data": "advanced"

components

Components restrictions. Country subparameter restricts results to a single country, or an array of countries.
(using ISO 3166-1 Alpha-2 country codes, case insensitive)

"components": {
    "country": "es"
}
"components": {
    "country": ["fr", "es"]
}

Translations Settings

The results can be displayed in different languages. Define the preferred language parameter when building your config object (e.g. {language: "en"}).

Multiple Settings example

{
    "minimumInputLength": 3,
    "types": "locality",
    "data": "advanced",
    "components": {
        "country": ["fr", "es"]
    },
    "language": "zh"
}