First Part
Request for API Key through this link https://api.gov.bc.ca/ following the steps below
Step 1:
...
Click on the “Login“ button
Step 2:
...
On the “For Developers” box, click on your preferred login button
Step 3:
...
Once logged in, move your mouse toward “BC Address Geocoder Web Service“ and click on it
Step 4:
...
Click on the “Request Access“ link.
Step 5:
...
Click on the “Create Application“
Step 6:
...
Enter your application name in the “Application Name“ field and description in the “Description” field, and click on create when you are ready
Step 7:
...
Choose an API environment.
Step 8:
...
Click on the “Request Access“ button.
Second Part:
The steps below show how to set up the This is a form.io address component to work with BC Geodata (Location service) URL using the 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": "*********",
"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.