FindMyAddress
Find all address anywhere around the world. Many options for all possible cases & customize the style.
Getting Started
How start to use FindMyAddress.
You can play with demonstration located here.
Quick start (CDN)
html
<head>
<link href="https://libs.iraiser.eu/libs/find-my-address/v{version}/find-my-address.min.css" rel="stylesheet">
<script src="https://libs.iraiser.eu/libs/find-my-address/v{version}/find-my-address.min.js"></script>
</head>
You can choose one specific version by replacing tag {version}.
Installing locally (Package Manager)
NPM
terminal
npm install git+ssh://git@gitlab.iraiser.eu:suite/front/find-my-address.git
Usage
Styles
sass
@use "~@iraiser/find-my-address/resources/sass/find-my-address";
JavaScript
javascript
import { FindMyAddress } from '@iraiser/find-my-address';
let search = new FindMyAddress(document.querySelector('.search'));
Theming
You can easily add you own theme on each component.
Theming with CSS custom properties
Set custom styles on specific element in component:
sass
@use "~@iraiser/find-my-address/resources/sass/find-my-address";
:root {
--fma-dropdown-border-color: #0971b3;
--fma-dropdown-border-radius: 0;
}
Theming with Sass
Set custom styles on specific element in component:
sass
@use "~@iraiser/find-my-address/sass/find-my-address/components/dropdown" with (
$border-color: #0971b3,
$border-radius: 0
);
Style customization
CSS classes
| CSS Class | Description |
|---|---|
fma-search | Main element |
fma-search--open | Style element at open status. |
fma-search--close | Style element at close status. |
fma-dropdown | Indicates the dropdown container. |
fma-dropdown--active | Style element at active status. |
fma-dropdown__item--empty | Style element at empty status. |
fma-dropdown__item | Indicates the dropdown item container. |
fma-loader | Indicates the loader container. |
CSS custom properties
| CSS Custom property | Description |
|---|---|
--fma-dropdown-background-color | Change the dropdown background color. |
--fma-dropdown-border-color | Change the dropdown border color. |
--fma-dropdown-border-radius | Change the dropdown border radius. |
--fma-loader-color | Change the loader color. |
--fma-loader-secondary-color | Change the loader secondary color. |
JavaScript API
Options
| Name | Default | Description | Mandatory |
|---|---|---|---|
api | '' | Select your API engine. | Yes |
key | '' | Insert your API key. | Yes |
countries | [] | Restrict API results on selected countries (ISO code 2). An empty array display all available countries on selected API. | No |
origin | [] | Order API results on selected countries (ISO code 2). | No |
limit | 5 | Maximum of items display on dropdown. | No |
language | en | Display result on selected language from ISO code 2. | No |
loader | true | Display the loader. | No |
context | true | Display address context, if exist, on results list. | No |
reference | '' | Reference element for dropdown position. Can only be a parent of input. | No |
width | '' | Reference element for dropdown width. The value can be a px or %. | No |
placeholder | true | Allow or disallow the default placeholder displayed in input. By default, the text is displayed according to the language option declared. | No |
placeholderText | '' | Custom text to display in input. | No |
noResultText | '' | Custom text to display in dropdown when API return no results. By default, the text is displayed according to the language option declared. | No |
dropdownClass | '' | Add class on dropdown main element. | No |
dropdownItemClass | '' | Add class on dropdown item element. | No |
Callback
| Name | Default | Description |
|---|---|---|
onAddressProposal | none | Return function when list of proposal addresses is populated. |
onSelectedAddress | data | Return function when address is selected. |
afterSelectedAddress | none | Return function of after selected address. |
Public Methods
| Name | Description |
|---|---|
destroy | Destroy the instance. |
reload | Reload the instance. You can pass, if you need, new options on reload. |
JSON object
Example of object returned:
json
{
type: "Feature",
properties: {
label: "199 Route de Clisson 44230 Saint-Sébastien-sur-Loire",
housenumber: "199",
street: "Route de Clisson",
line1: "199 Route de Clisson",
line2: "",
line3: "",
line4: "",
line5: "",
postcode: "44230",
city: "Saint-Sébastien-sur-Loire",
citycode: "44190",
adminarea: "Loire-Atlantique",
adminareacode: "44",
province: "Pays de la Loire",
country: "France",
countrycode: "FR"
}
}