New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
@geoapify/geocoder-autocomplete
Advanced tools
@geoapify/geocoder-autocomplete - npm Package Compare versions
Comparing version 1.0.7 to 1.1.0
@@ -15,5 +15,9 @@ export declare class GeocoderAutocomplete { | ||
| private options; | ||
| private BY_COUNTRYCODE; | ||
| private BY_RECT; | ||
| private BY_CIRCLE; | ||
| private BY_PROXIMITY; | ||
| constructor(container: HTMLElement, apiKey: string, options?: GeocoderAutocompleteOptions); | ||
| setType(type: 'country' | 'state' | 'city' | 'postcode' | 'street' | 'amenity'): void; | ||
| setLang(lang: 'en' | 'de' | 'it' | 'fr'): void; | ||
| setLang(lang: SupportedLanguage): void; | ||
| setCountryCodes(codes: CountyCode[]): void; | ||
@@ -23,2 +27,11 @@ setPosition(position: GeoPosition): void; | ||
| setValue(value: string): void; | ||
| addFilterByCountry(codes: ByCountryCodeOptions): void; | ||
| addFilterByCircle(filterByCircle: ByCircleOptions): void; | ||
| addFilterByRect(filterByRect: ByRectOptions): void; | ||
| clearFilters(): void; | ||
| addBiasByCountry(codes: ByCountryCodeOptions): void; | ||
| addBiasByCircle(biasByCircle: ByCircleOptions): void; | ||
| addBiasByRect(biasByRect: ByRectOptions): void; | ||
| addBiasByProximity(biasByProximity: ByProximityOptions): void; | ||
| clearBias(): void; | ||
| on(operation: 'select' | 'suggestions', callback: (param: any) => any): void; | ||
@@ -37,2 +50,5 @@ off(operation: 'select' | 'suggestions', callback: (param: any) => any): void; | ||
| private openDropdownAgain; | ||
| private generateUrl; | ||
| private isLatitude; | ||
| private isLongitude; | ||
| } | ||
@@ -42,6 +58,12 @@ export interface GeocoderAutocompleteOptions { | ||
| lang?: SupportedLanguage; | ||
| limit?: number; | ||
| placeholder?: string; | ||
| filter?: { | ||
| [key: string]: ByCircleOptions | ByCountryCodeOptions | ByRectOptions; | ||
| }; | ||
| bias?: { | ||
| [key: string]: ByCircleOptions | ByCountryCodeOptions | ByRectOptions | ByProximityOptions; | ||
| }; | ||
| position?: GeoPosition; | ||
| countryCodes?: CountyCode[]; | ||
| limit?: number; | ||
| placeholder?: string; | ||
| } | ||
@@ -52,4 +74,20 @@ export interface GeoPosition { | ||
| } | ||
| export declare type ByCountryCodeOptions = CountyCode[]; | ||
| export interface ByProximityOptions { | ||
| lon: number; | ||
| lat: number; | ||
| } | ||
| export interface ByCircleOptions { | ||
| lon: number; | ||
| lat: number; | ||
| radiusMeters: number; | ||
| } | ||
| export interface ByRectOptions { | ||
| lon1: number; | ||
| lat1: number; | ||
| lon2: number; | ||
| lat2: number; | ||
| } | ||
| export declare type LocationType = 'country' | 'state' | 'city' | 'postcode' | 'street' | 'amenity'; | ||
| export declare type SupportedLanguage = 'en' | 'de' | 'it' | 'fr'; | ||
| export declare type CountyCode = "ad" | "ae" | "af" | "ag" | "ai" | "al" | "am" | "an" | "ao" | "ap" | "aq" | "ar" | "as" | "at" | "au" | "aw" | "az" | "ba" | "bb" | "bd" | "be" | "bf" | "bg" | "bh" | "bi" | "bj" | "bm" | "bn" | "bo" | "br" | "bs" | "bt" | "bv" | "bw" | "by" | "bz" | "ca" | "cc" | "cd" | "cf" | "cg" | "ch" | "ci" | "ck" | "cl" | "cm" | "cn" | "co" | "cr" | "cu" | "cv" | "cx" | "cy" | "cz" | "de" | "dj" | "dk" | "dm" | "do" | "dz" | "ec" | "ee" | "eg" | "eh" | "er" | "es" | "et" | "eu" | "fi" | "fj" | "fk" | "fm" | "fo" | "fr" | "ga" | "gb" | "gd" | "ge" | "gf" | "gh" | "gi" | "gl" | "gm" | "gn" | "gp" | "gq" | "gr" | "gs" | "gt" | "gu" | "gw" | "gy" | "hk" | "hm" | "hn" | "hr" | "ht" | "hu" | "id" | "ie" | "il" | "in" | "io" | "iq" | "ir" | "is" | "it" | "jm" | "jo" | "jp" | "ke" | "kg" | "kh" | "ki" | "km" | "kn" | "kp" | "kr" | "kw" | "ky" | "kz" | "la" | "lb" | "lc" | "li" | "lk" | "lr" | "ls" | "lt" | "lu" | "lv" | "ly" | "ma" | "mc" | "md" | "me" | "mg" | "mh" | "mk" | "ml" | "mm" | "mn" | "mo" | "mp" | "mq" | "mr" | "ms" | "mt" | "mu" | "mv" | "mw" | "mx" | "my" | "mz" | "na" | "nc" | "ne" | "nf" | "ng" | "ni" | "nl" | "no" | "np" | "nr" | "nu" | "nz" | "om" | "pa" | "pe" | "pf" | "pg" | "ph" | "pk" | "pl" | "pm" | "pr" | "ps" | "pt" | "pw" | "py" | "qa" | "re" | "ro" | "rs" | "ru" | "rw" | "sa" | "sb" | "sc" | "sd" | "se" | "sg" | "sh" | "si" | "sj" | "sk" | "sl" | "sm" | "sn" | "so" | "sr" | "st" | "sv" | "sy" | "sz" | "tc" | "td" | "tf" | "tg" | "th" | "tj" | "tk" | "tm" | "tn" | "to" | "tr" | "tt" | "tv" | "tw" | "tz" | "ua" | "ug" | "um" | "us" | "uy" | "uz" | "va" | "vc" | "ve" | "vg" | "vi" | "vn" | "vu" | "wf" | "ws" | "ye" | "yt" | "za" | "zm" | "zw"; | ||
| export declare type SupportedLanguage = "ab" | "aa" | "af" | "ak" | "sq" | "am" | "ar" | "an" | "hy" | "as" | "av" | "ae" | "ay" | "az" | "bm" | "ba" | "eu" | "be" | "bn" | "bh" | "bi" | "bs" | "br" | "bg" | "my" | "ca" | "ch" | "ce" | "ny" | "zh" | "cv" | "kw" | "co" | "cr" | "hr" | "cs" | "da" | "dv" | "nl" | "en" | "eo" | "et" | "ee" | "fo" | "fj" | "fi" | "fr" | "ff" | "gl" | "ka" | "de" | "el" | "gn" | "gu" | "ht" | "ha" | "he" | "hz" | "hi" | "ho" | "hu" | "ia" | "id" | "ie" | "ga" | "ig" | "ik" | "io" | "is" | "it" | "iu" | "ja" | "jv" | "kl" | "kn" | "kr" | "ks" | "kk" | "km" | "ki" | "rw" | "ky" | "kv" | "kg" | "ko" | "ku" | "kj" | "la" | "lb" | "lg" | "li" | "ln" | "lo" | "lt" | "lu" | "lv" | "gv" | "mk" | "mg" | "ms" | "ml" | "mt" | "mi" | "mr" | "mh" | "mn" | "na" | "nv" | "nb" | "nd" | "ne" | "ng" | "nn" | "no" | "ii" | "nr" | "oc" | "oj" | "cu" | "om" | "or" | "os" | "pa" | "pi" | "fa" | "pl" | "ps" | "pt" | "qu" | "rm" | "rn" | "ro" | "ru" | "sa" | "sc" | "sd" | "se" | "sm" | "sg" | "sr" | "gd" | "sn" | "si" | "sk" | "sl" | "so" | "st" | "es" | "su" | "sw" | "ss" | "sv" | "ta" | "te" | "tg" | "th" | "ti" | "bo" | "tk" | "tl" | "tn" | "to" | "tr" | "ts" | "tt" | "tw" | "ty" | "ug" | "uk" | "ur" | "uz" | "ve" | "vi" | "vo" | "wa" | "cy" | "wo" | "fy" | "xh" | "yi" | "yo" | "za"; | ||
| export declare type CountyCode = "none" | "auto" | "ad" | "ae" | "af" | "ag" | "ai" | "al" | "am" | "an" | "ao" | "ap" | "aq" | "ar" | "as" | "at" | "au" | "aw" | "az" | "ba" | "bb" | "bd" | "be" | "bf" | "bg" | "bh" | "bi" | "bj" | "bm" | "bn" | "bo" | "br" | "bs" | "bt" | "bv" | "bw" | "by" | "bz" | "ca" | "cc" | "cd" | "cf" | "cg" | "ch" | "ci" | "ck" | "cl" | "cm" | "cn" | "co" | "cr" | "cu" | "cv" | "cx" | "cy" | "cz" | "de" | "dj" | "dk" | "dm" | "do" | "dz" | "ec" | "ee" | "eg" | "eh" | "er" | "es" | "et" | "eu" | "fi" | "fj" | "fk" | "fm" | "fo" | "fr" | "ga" | "gb" | "gd" | "ge" | "gf" | "gh" | "gi" | "gl" | "gm" | "gn" | "gp" | "gq" | "gr" | "gs" | "gt" | "gu" | "gw" | "gy" | "hk" | "hm" | "hn" | "hr" | "ht" | "hu" | "id" | "ie" | "il" | "in" | "io" | "iq" | "ir" | "is" | "it" | "jm" | "jo" | "jp" | "ke" | "kg" | "kh" | "ki" | "km" | "kn" | "kp" | "kr" | "kw" | "ky" | "kz" | "la" | "lb" | "lc" | "li" | "lk" | "lr" | "ls" | "lt" | "lu" | "lv" | "ly" | "ma" | "mc" | "md" | "me" | "mg" | "mh" | "mk" | "ml" | "mm" | "mn" | "mo" | "mp" | "mq" | "mr" | "ms" | "mt" | "mu" | "mv" | "mw" | "mx" | "my" | "mz" | "na" | "nc" | "ne" | "nf" | "ng" | "ni" | "nl" | "no" | "np" | "nr" | "nu" | "nz" | "om" | "pa" | "pe" | "pf" | "pg" | "ph" | "pk" | "pl" | "pm" | "pr" | "ps" | "pt" | "pw" | "py" | "qa" | "re" | "ro" | "rs" | "ru" | "rw" | "sa" | "sb" | "sc" | "sd" | "se" | "sg" | "sh" | "si" | "sj" | "sk" | "sl" | "sm" | "sn" | "so" | "sr" | "st" | "sv" | "sy" | "sz" | "tc" | "td" | "tf" | "tg" | "th" | "tj" | "tk" | "tm" | "tn" | "to" | "tr" | "tt" | "tv" | "tw" | "tz" | "ua" | "ug" | "um" | "us" | "uy" | "uz" | "va" | "vc" | "ve" | "vg" | "vi" | "vn" | "vu" | "wf" | "ws" | "ye" | "yt" | "za" | "zm" | "zw"; |
@@ -14,3 +14,15 @@ "use strict"; | ||
| }; | ||
| this.BY_COUNTRYCODE = 'countrycode'; | ||
| this.BY_RECT = 'rect'; | ||
| this.BY_CIRCLE = 'circle'; | ||
| this.BY_PROXIMITY = 'proximity'; | ||
| this.options = options ? Object.assign(Object.assign({}, this.options), options) : this.options; | ||
| this.options.filter = this.options.filter || {}; | ||
| this.options.bias = this.options.bias || {}; | ||
| if (this.options.countryCodes) { | ||
| this.addFilterByCountry(this.options.countryCodes); | ||
| } | ||
| if (this.options.position) { | ||
| this.addBiasByProximity(this.options.position); | ||
| } | ||
| // create input element | ||
@@ -47,5 +59,7 @@ this.inputElement = document.createElement("input"); | ||
| setCountryCodes(codes) { | ||
| console.warn("WARNING! Obsolete function called. Function setCountryCodes() has been deprecated, please use the new addFilterByCountry() function instead!"); | ||
| this.options.countryCodes = codes; | ||
| } | ||
| setPosition(position) { | ||
| console.warn("WARNING! Obsolete function called. Function setPosition() has been deprecated, please use the new addBiasByProximity() function instead!"); | ||
| this.options.position = position; | ||
@@ -65,2 +79,29 @@ } | ||
| } | ||
| addFilterByCountry(codes) { | ||
| this.options.filter[this.BY_COUNTRYCODE] = codes; | ||
| } | ||
| addFilterByCircle(filterByCircle) { | ||
| this.options.filter[this.BY_CIRCLE] = filterByCircle; | ||
| } | ||
| addFilterByRect(filterByRect) { | ||
| this.options.filter[this.BY_RECT] = filterByRect; | ||
| } | ||
| clearFilters() { | ||
| this.options.filter = {}; | ||
| } | ||
| addBiasByCountry(codes) { | ||
| this.options.bias[this.BY_COUNTRYCODE] = codes; | ||
| } | ||
| addBiasByCircle(biasByCircle) { | ||
| this.options.bias[this.BY_CIRCLE] = biasByCircle; | ||
| } | ||
| addBiasByRect(biasByRect) { | ||
| this.options.bias[this.BY_RECT] = biasByRect; | ||
| } | ||
| addBiasByProximity(biasByProximity) { | ||
| this.options.bias[this.BY_PROXIMITY] = biasByProximity; | ||
| } | ||
| clearBias() { | ||
| this.options.bias = {}; | ||
| } | ||
| on(operation, callback) { | ||
@@ -110,19 +151,3 @@ if (operation === 'select' && this.changeCallbacks.indexOf(callback) < 0) { | ||
| this.currentPromiseReject = reject; | ||
| let url = `${this.geocoderUrl}?text=${encodeURIComponent(currentValue)}&apiKey=${this.apiKey}`; | ||
| // Add type of the location if set. Learn more about possible parameters on https://apidocs.geoapify.com/docs/geocoding/api/api | ||
| if (this.options.type) { | ||
| url += `&type=${this.options.type}`; | ||
| } | ||
| if (this.options.limit) { | ||
| url += `&limit=${this.options.limit}`; | ||
| } | ||
| if (this.options.lang) { | ||
| url += `&lang=${this.options.lang}`; | ||
| } | ||
| if (this.options.countryCodes) { | ||
| url += `&countryCodes=${this.options.countryCodes.join(',')}`; | ||
| } | ||
| if (this.options.position) { | ||
| url += `&lat=${this.options.position.lat}&lon=${this.options.position.lon}`; | ||
| } | ||
| let url = this.generateUrl(currentValue); | ||
| fetch(url) | ||
@@ -292,3 +317,55 @@ .then((response) => { | ||
| } | ||
| generateUrl(value) { | ||
| let url = `${this.geocoderUrl}?text=${encodeURIComponent(value)}&apiKey=${this.apiKey}`; | ||
| // Add type of the location if set. Learn more about possible parameters on https://apidocs.geoapify.com/docs/geocoding/api/api | ||
| if (this.options.type) { | ||
| url += `&type=${this.options.type}`; | ||
| } | ||
| if (this.options.limit) { | ||
| url += `&limit=${this.options.limit}`; | ||
| } | ||
| if (this.options.lang) { | ||
| url += `&lang=${this.options.lang}`; | ||
| } | ||
| const filters = []; | ||
| const filterByCountryCodes = this.options.filter[this.BY_COUNTRYCODE]; | ||
| const filterByCircle = this.options.filter[this.BY_CIRCLE]; | ||
| const filterByRect = this.options.filter[this.BY_RECT]; | ||
| if (filterByCountryCodes && filterByCountryCodes.length) { | ||
| filters.push(`countrycode:${filterByCountryCodes.join(',').toLowerCase()}`); | ||
| } | ||
| if (filterByCircle && this.isLatitude(filterByCircle.lat) && this.isLongitude(filterByCircle.lon) && filterByCircle.radiusMeters > 0) { | ||
| filters.push(`circle:${filterByCircle.lon},${filterByCircle.lat},${filterByCircle.radiusMeters}`); | ||
| } | ||
| if (filterByRect && this.isLatitude(filterByRect.lat1) && this.isLongitude(filterByRect.lon1) && this.isLatitude(filterByRect.lat2) && this.isLongitude(filterByRect.lon2)) { | ||
| filters.push(`rect:${filterByRect.lon1},${filterByRect.lat1},${filterByRect.lon2},${filterByRect.lat2}`); | ||
| } | ||
| url += filters.length ? `&filter=${filters.join('|')}` : ''; | ||
| const bias = []; | ||
| const biasByCountryCodes = this.options.bias[this.BY_COUNTRYCODE]; | ||
| const biasByCircle = this.options.bias[this.BY_CIRCLE]; | ||
| const biasByRect = this.options.bias[this.BY_RECT]; | ||
| const biasByProximity = this.options.bias[this.BY_PROXIMITY]; | ||
| if (biasByCountryCodes && biasByCountryCodes.length) { | ||
| bias.push(`countrycode:${biasByCountryCodes.join(',').toLowerCase()}`); | ||
| } | ||
| if (biasByCircle && this.isLatitude(biasByCircle.lat) && this.isLongitude(biasByCircle.lon) && biasByCircle.radiusMeters > 0) { | ||
| bias.push(`circle:${biasByCircle.lon},${biasByCircle.lat},${biasByCircle.radiusMeters}`); | ||
| } | ||
| if (biasByRect && this.isLatitude(biasByRect.lat1) && this.isLongitude(biasByRect.lon1) && this.isLatitude(biasByRect.lat2) && this.isLongitude(biasByRect.lon2)) { | ||
| bias.push(`rect:${biasByRect.lon1},${biasByRect.lat1},${biasByRect.lon2},${biasByRect.lat2}`); | ||
| } | ||
| if (biasByProximity && this.isLatitude(biasByProximity.lat) && this.isLongitude(biasByProximity.lon)) { | ||
| bias.push(`proximity:${biasByProximity.lon},${biasByProximity.lat}`); | ||
| } | ||
| url += bias.length ? `&bias=${bias.join('|')}` : ''; | ||
| return url; | ||
| } | ||
| isLatitude(num) { | ||
| return num !== '' && num !== null && isFinite(num) && Math.abs(num) <= 90; | ||
| } | ||
| isLongitude(num) { | ||
| return num !== '' && num !== null && isFinite(num) && Math.abs(num) <= 180; | ||
| } | ||
| } | ||
| exports.GeocoderAutocomplete = GeocoderAutocomplete; |
| { | ||
| "name": "@geoapify/geocoder-autocomplete", | ||
| "version": "1.0.7", | ||
| "version": "1.1.0", | ||
| "description": "Geocoder autocomplete field", | ||
@@ -5,0 +5,0 @@ "main": "dist/index.js", |
121
README.md
| # Geoapify Geocoder Autocomplete | ||
| Geoapify Geocoder Autocomplete is a JavaScript(TypeScript) library that provides autocomplete functionality for the [Geoapify Geocoding API](https://www.geoapify.com/api/geocoding-api/): | ||
| * adds and input field to a given container; | ||
| * adds an input field to a given container; | ||
| * makes calls to Geocoding API on user input; | ||
| * show place suggestions in dropdown list; | ||
| * shows place suggestions in a dropdown list; | ||
| * notify about suggestions change and selection. | ||
@@ -10,6 +10,6 @@ | ||
| * specify a location type - **country**, **state**, **city**, **postcode**, **street**, **amenity**; | ||
| * limit the search to one or multiple countries; | ||
| * set a prefered position, to show results near the position first; | ||
| * filter results by country, circle or boundary box | ||
| * prioritize search by a location, boundary box, circle, and countries | ||
| * select a language for search results; | ||
| * change results number shown in the dropdown list. | ||
| * change result number shown in the dropdown list. | ||
@@ -23,5 +23,13 @@ # [Live demo](https://apidocs.geoapify.com/playground/geocoding) | ||
| Register and get an API key for Free on [myprojects.geoapify.com](https://myprojects.geoapify.com/). | ||
| Geoapify has [Freemium pricing model](https://www.geoapify.com/api-pricing/). You can start for Free and extend when you need. | ||
| Geoapify has a [Freemium pricing model](https://www.geoapify.com/api-pricing/). You can start for Free and extend when you need it. | ||
| ##### STEP 1. Add a container element to webpage | ||
| ##### STEP 1. Install the Geocoder Autocomplete package | ||
| ``` | ||
| npm install @geoapify/geocoder-autocomplete | ||
| # or | ||
| yarn add @geoapify/geocoder-autocomplete | ||
| ``` | ||
| ##### STEP 2. Add a container element to webpage | ||
| The autocomplete input will be added into the container element and will take the element full width: | ||
@@ -37,3 +45,3 @@ ```html | ||
| ``` | ||
| ##### STEP 2. Initialize the autocomplete field | ||
| ##### STEP 3. Initialize the autocomplete field | ||
@@ -56,3 +64,3 @@ ```javascript | ||
| ``` | ||
| ##### STEP 3. Import Geoapify autocomplete styles: | ||
| ##### STEP 4. Import Geoapify autocomplete styles: | ||
| We provide several Themes within the library: | ||
@@ -71,19 +79,71 @@ * `minimal` and `round-borders` - for webpages with light background color | ||
| | type | `country`, `state`, `city`, `postcode`, `street`, `amenity` | Type of the location | | ||
| | lang | `en`, `de`, `it`, `fr` | Results language | | ||
| | position | GeoPosition | Prefered search position | | ||
| | countryCodes | CountyCode[] | Limit the search by countries | | ||
| | lang | LanguageCode | Results language | | ||
| | limit | number | The maximal number of returned suggestions | | ||
| | placeholder | string | An input field placeholder | | ||
| | filter | FilterOptions | Filter places by country, boundary, circle | | ||
| | bias | BiasOptions | Prefer places by country, boundary, circle, location | | ||
| | ~~position~~ | GeoPosition | Prefered search position | | ||
| | ~~countryCodes~~ | CountyCode[] | Limit the search by countries | | ||
| #### GeoPosition | ||
| | Option | Type | Description | | ||
| | ------ | ------ | ------ | | ||
| | lat | number | Latitude | | ||
| | lon | number | Longitude | | ||
| #### LanguageCode | ||
| 2-character [ISO 639-1](https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes) language code: `ab`, `aa`, `af`, `ak`, `sq`, `am`, `ar`, `an`, `hy`, `as`, `av`, `ae`, `ay`, `az`, `bm`, `ba`, `eu`, `be`, `bn`, `bh`, `bi`, `bs`, `br`, `bg`, `my`, `ca`, `ch`, `ce`, `ny`, `zh`, `cv`, `kw`, `co`, `cr`, `hr`, `cs`, `da`, `dv`, `nl`, `en`, `eo`, `et`, `ee`, `fo`, `fj`, `fi`, `fr`, `ff`, `gl`, `ka`, `de`, `el`, `gn`, `gu`, `ht`, `ha`, `he`, `hz`, `hi`, `ho`, `hu`, `ia`, `id`, `ie`, `ga`, `ig`, `ik`, `io`, `is`, `it`, `iu`, `ja`, `jv`, `kl`, `kn`, `kr`, `ks`, `kk`, `km`, `ki`, `rw`, `ky`, `kv`, `kg`, `ko`, `ku`, `kj`, `la`, `lb`, `lg`, `li`, `ln`, `lo`, `lt`, `lu`, `lv`, `gv`, `mk`, `mg`, `ms`, `ml`, `mt`, `mi`, `mr`, `mh`, `mn`, `na`, `nv`, `nb`, `nd`, `ne`, `ng`, `nn`, `no`, `ii`, `nr`, `oc`, `oj`, `cu`, `om`, `or`, `os`, `pa`, `pi`, `fa`, `pl`, `ps`, `pt`, `qu`, `rm`, `rn`, `ro`, `ru`, `sa`, `sc`, `sd`, `se`, `sm`, `sg`, `sr`, `gd`, `sn`, `si`, `sk`, `sl`, `so`, `st`, `es`, `su`, `sw`, `ss`, `sv`, `ta`, `te`, `tg`, `th`, `ti`, `bo`, `tk`, `tl`, `tn`, `to`, `tr`, `ts`, `tt`, `tw`, `ty`, `ug`, `uk`, `ur`, `uz`, `ve`, `vi`, `vo`, `wa`, `cy`, `wo`, `fy`, `xh`, `yi`, `yo`, `za`. | ||
| #### FilterOptions | ||
| The Geocoder Autocomplete allows specify the following types of filters: | ||
| Name | Filter | Filter Value | Description | Examples | ||
| --- | --- | --- | --- | --- | ||
| By circle | *circle* | `{ lon: number ,lat: number, radiusMeters: number }` | Search places inside the circle | `filter['circle'] = {lon: -87.770231, lat: 41.878968, radiusMeters: 5000}` | ||
| By rectangle | *rect* | `{ lon1: number ,lat1: number, lon2: number ,lat2: number}` | Search places inside the rectangle | `filter['rect'] = {lon1: 89.097540, lat1: 39.668983, lon2: -88.399274, lat2: 40.383412}` | ||
| By country | *countrycode* | `CountyCode[]` | Search places in the countries | `filter['countrycode'] = ['de', 'fr', 'es']` | ||
| You can provide filters as initial options or add by calling a function: | ||
| ``` | ||
| options.filter = { | ||
| 'circle': {lon: -87.770231, lat: 41.878968, radiusMeters: 5000} | ||
| }; | ||
| // or | ||
| autocomplete.addFilterByCircle({lon: -87.770231, lat: 41.878968, radiusMeters: 5000}); | ||
| ``` | ||
| You can combine several filters (but only one of each type) in one request. The **AND** logic is applied to the multiple filters. | ||
| #### BiasOptions | ||
| You can chage priority of the search by setting bias. The Geocoder Autocomplete allows specify the following types of bias: | ||
| Name | Bias | Bias Value | Description | Examples | ||
| --- | --- | --- | --- | --- | ||
| By circle | *circle* | `{ lon: number ,lat: number, radiusMeters: number }` | First, search places inside the circle, then worldwide | `bias['circle'] = {lon: -87.770231, lat: 41.878968, radiusMeters: 5000}` | ||
| By rectangle | *rect* | `{ lon1: number ,lat1: number, lon2: number ,lat2: number}` | First, search places inside the rectangle, then worldwide | `bias['rect'] = {lon1: 89.097540, lat1: 39.668983, lon2: -88.399274, lat2: 40.383412}` | ||
| By country | *countrycode* | `CountyCode[]` | First, search places in the countries, then worldwide | `bias['countrycode'] = ['de', 'fr', 'es']` | ||
| By location | *proximity* | `{lon: number ,lat: number}` | Prioritize results by farness from the location | `bias['proximity'] = {lon: -87.770231, lat: 41.878968}` | ||
| You can combine several bias parameters (but only one of each type) in one request. The OR logic is applied to the multiple bias. | ||
| NOTE! The default bias for the geocoding requests is "countrycode:auto", the API detects a country by IP address and provides the search there first. Set `bias['countrycode'] = ['none']` to avoid prioritization by country. | ||
| You can provide filters as initial options or add by calling a function: | ||
| ``` | ||
| options.bias = { | ||
| 'circle': {lon: -87.770231, lat: 41.878968, radiusMeters: 5000}, | ||
| 'countrycode': ['none'] | ||
| }; | ||
| // or | ||
| autocomplete.addBiasByCircle({lon: -87.770231, lat: 41.878968, radiusMeters: 5000}); | ||
| ``` | ||
| #### CountyCode | ||
| 2-digits [ISO 3166-1 Alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#Officially_assigned_code_elements) country code: `ad`, `ae`, `af`, `ag`, `ai`, `al`, `am`, `an`, `ao`, `ap`, `aq`, `ar`, `as`, `at`, `au`, `aw`, `az`, `ba`, `bb`, `bd`, `be`, `bf`, `bg`, `bh`, `bi`, `bj`, `bm`, `bn`, `bo`, `br`, `bs`, `bt`, `bv`, `bw`, `by`, `bz`, `ca`, `cc`, `cd`, `cf`, `cg`, `ch`, `ci`, `ck`, `cl`, `cm`, `cn`, `co`, `cr`, `cu`, `cv`, `cx`, `cy`, `cz`, `de`, `dj`, `dk`, `dm`, `do`, `dz`, `ec`, `ee`, `eg`, `eh`, `er`, `es`, `et`, `eu`, `fi`, `fj`, `fk`, `fm`, `fo`, `fr`, `ga`, `gb`, `gd`, `ge`, `gf`, `gh`, `gi`, `gl`, `gm`, `gn`, `gp`, `gq`, `gr`, `gs`, `gt`, `gu`, `gw`, `gy`, `hk`, `hm`, `hn`, `hr`, `ht`, `hu`, `id`, `ie`, `il`, `in`, `io`, `iq`, `ir`, `is`, `it`, `jm`, `jo`, `jp`, `ke`, `kg`, `kh`, `ki`, `km`, `kn`, `kp`, `kr`, `kw`, `ky`, `kz`, `la`, `lb`, `lc`, `li`, `lk`, `lr`, `ls`, `lt`, `lu`, `lv`, `ly`, `ma`, `mc`, `md`, `me`, `mg`, `mh`, `mk`, `ml`, `mm`, `mn`, `mo`, `mp`, `mq`, `mr`, `ms`, `mt`, `mu`, `mv`, `mw`, `mx`, `my`, `mz`, `na`, `nc`, `ne`, `nf`, `ng`, `ni`, `nl`, `no`, `np`, `nr`, `nu`, `nz`, `om`, `pa`, `pe`, `pf`, `pg`, `ph`, `pk`, `pl`, `pm`, `pr`, `ps`, `pt`, `pw`, `py`, `qa`, `re`, `ro`, `rs`, `ru`, `rw`, `sa`, `sb`, `sc`, `sd`, `se`, `sg`, `sh`, `si`, `sj`, `sk`, `sl`, `sm`, `sn`, `so`, `sr`, `st`, `sv`, `sy`, `sz`, `tc`, `td`, `tf`, `tg`, `th`, `tj`, `tk`, `tm`, `tn`, `to`, `tr`, `tt`, `tv`, `tw`, `tz`, `ua`, `ug`, `um`, `us`, `uy`, `uz`, `va`, `vc`, `ve`, `vg`, `vi`, `vn`, `vu`, `wf`, `ws`, `ye`, `yt`, `za`, `zm`, `zw`. | ||
| Learn more about Geoapify Geocoder option on [Geoapify Documentation page](https://apidocs.geoapify.com/docs/geocoding). | ||
| * Use 'auto' to detect the country by IP address; | ||
| * Use 'none' to skip; | ||
| * 2-digits [ISO 3166-1 Alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#Officially_assigned_code_elements) country code: `ad`, `ae`, `af`, `ag`, `ai`, `al`, `am`, `an`, `ao`, `ap`, `aq`, `ar`, `as`, `at`, `au`, `aw`, `az`, `ba`, `bb`, `bd`, `be`, `bf`, `bg`, `bh`, `bi`, `bj`, `bm`, `bn`, `bo`, `br`, `bs`, `bt`, `bv`, `bw`, `by`, `bz`, `ca`, `cc`, `cd`, `cf`, `cg`, `ch`, `ci`, `ck`, `cl`, `cm`, `cn`, `co`, `cr`, `cu`, `cv`, `cx`, `cy`, `cz`, `de`, `dj`, `dk`, `dm`, `do`, `dz`, `ec`, `ee`, `eg`, `eh`, `er`, `es`, `et`, `eu`, `fi`, `fj`, `fk`, `fm`, `fo`, `fr`, `ga`, `gb`, `gd`, `ge`, `gf`, `gh`, `gi`, `gl`, `gm`, `gn`, `gp`, `gq`, `gr`, `gs`, `gt`, `gu`, `gw`, `gy`, `hk`, `hm`, `hn`, `hr`, `ht`, `hu`, `id`, `ie`, `il`, `in`, `io`, `iq`, `ir`, `is`, `it`, `jm`, `jo`, `jp`, `ke`, `kg`, `kh`, `ki`, `km`, `kn`, `kp`, `kr`, `kw`, `ky`, `kz`, `la`, `lb`, `lc`, `li`, `lk`, `lr`, `ls`, `lt`, `lu`, `lv`, `ly`, `ma`, `mc`, `md`, `me`, `mg`, `mh`, `mk`, `ml`, `mm`, `mn`, `mo`, `mp`, `mq`, `mr`, `ms`, `mt`, `mu`, `mv`, `mw`, `mx`, `my`, `mz`, `na`, `nc`, `ne`, `nf`, `ng`, `ni`, `nl`, `no`, `np`, `nr`, `nu`, `nz`, `om`, `pa`, `pe`, `pf`, `pg`, `ph`, `pk`, `pl`, `pm`, `pr`, `ps`, `pt`, `pw`, `py`, `qa`, `re`, `ro`, `rs`, `ru`, `rw`, `sa`, `sb`, `sc`, `sd`, `se`, `sg`, `sh`, `si`, `sj`, `sk`, `sl`, `sm`, `sn`, `so`, `sr`, `st`, `sv`, `sy`, `sz`, `tc`, `td`, `tf`, `tg`, `th`, `tj`, `tk`, `tm`, `tn`, `to`, `tr`, `tt`, `tv`, `tw`, `tz`, `ua`, `ug`, `um`, `us`, `uy`, `uz`, `va`, `vc`, `ve`, `vg`, `vi`, `vn`, `vu`, `wf`, `ws`, `ye`, `yt`, `za`, `zm`, `zw`. | ||
| Learn more about Geoapify Geocoder options on [Geoapify Documentation page](https://apidocs.geoapify.com/docs/geocoding). | ||
| #### Set option with API | ||
@@ -98,10 +158,19 @@ The library provides an API that allows to set **Geoapify Geocoder options** during runtime: | ||
| autocomplete.setLang(options.lang); | ||
| // set results language | ||
| autocomplete.setLang(options.lang); | ||
| // limit by countries | ||
| autocomplete.setCountryCodes(options.countries); | ||
| // set dropdown elements limit | ||
| autocomplete.setLimit(options.limit); | ||
| // set prefered position | ||
| autocomplete.setPosition(options.position); | ||
| // set filter | ||
| autocomplete.addFilterByCountry(codes); | ||
| autocomplete.addFilterByCircle(filterByCircle); | ||
| autocomplete.addFilterByRect(filterByRect); | ||
| autocomplete.clearFilters() | ||
| // set bias | ||
| autocomplete.addBiasByCountry(codes); | ||
| autocomplete.addBiasByCircle(biasByCircle); | ||
| autocomplete.addBiasByRect(biasByRect); | ||
| autocomplete.addBiasByProximity(biasByProximity); | ||
| autocomplete.clearBias(); | ||
| ``` | ||
@@ -134,3 +203,3 @@ | ||
| However, you have aloso opportunity to style the component by youself. Here are classes used: | ||
| However, you have also opportunity to style the component by yourself. Here are the classes used: | ||
| | Name | Description | | ||
@@ -137,0 +206,0 @@ | ------ | ------ | |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by36.25%
40326
- Lines of code
- increased by20.52%
693
- Number of lines in readme file
- increased by50.36%
206
No dependency changes