The steps below show how to set up This is a form.io address component to work with BC Geodata (Location service) URL using custom provider. For fast demo, Form designers can import the form schema below. Form designers can also use this link https://bcgov.github.io/ols-devkit/examples/address_autocomplete.html, to read more on the configuration options for the BC Geodata URL.
| View file | ||
|---|---|---|
|
Step 1:
...
custom component for BC Addresses. An autocomplete address component suggests a list of BC addresses as users types into the field.
How it works
...
Drag and drop the “address” component into the builder as indicated in the image above.
Step 2:
...
Click on the “Provider“ tab as indicated in the image above.
Step 3:
...
Select the “Custom“ option from the dropdown options
...
This component has been preconfigured. Please note that users can only change the params details as indicated in the image above.
Step 4:
...
Copy and paste this URL https://geocoder.api.gov.bc.ca/addresses.json to the “Url“ field, as indicated in the image above
Step 5:
...
Copy and paste “AddressString“ to the “Query Property“ field, as indicated in the image above.
Step 6:
...
Copy and paste “features“ to the “Response Property“ field, as indicated in the image above.
Step 7:
...
Copy and paste “properties.fullAddress“ to the “Display value Property“ field, as indicated in the image above.
Step 8:
...
Copy and paste the configurations below to the “Params” field, as indicated in the image above. To read more about each configuration, click on this link. . Please visit this link for more information https://bcgov.github.io/ols-devkit/examples/address_autocomplete.html
| Code Block | ||
|---|---|---|
| ||
{
"echo": false,
"brief": true,
"apikey": "5KDUkwwvKMhIZ7Gq0qcdN2KIuyVTbInK",
"minScore": 55,
"onlyCivic": true,
"maxResults": 15,
"autocomplete": true,
"match accuracy": 100,
"matchPrecision": "occupant, unit, site, civic_number, intersection, block, street, locality, province",
"precisionPoints": 100
} |
Step 9:
...
Click on the “Save” button
Step 10:
...
BC Address component in preview mode.