How to set up form.io address component to work with BC Geodata (Location service) URL

First Step

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 a development environment.

Step 8:

Click on the “Request Access“ button.

Second Step:

The steps below show how to set up the 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.

Step 1:

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 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. https://bcgov.github.io/ols-devkit/examples/address_autocomplete.html

{
  "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: