Address Finder Widget

The Address finder widget allows web application developers to incorporate the power of the BC Physical Address Geocoder service into their application easily, including advanced auto-complete functionality. Below is an example of the 'basic' usage of the address finder widget:

Basic Result:

And below is an example of the 'advanced' usage of the address finder widget:

Advanced Result:

Documentation

To include the Address Finder Widget on your page, you must first include the following javascript files:

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/bcgov/ols-devkit/gh-pages/widget/js/geocoder-widget-1.0.0.js"></script>

You may also use your own version of jquery. Note that jQuery must be included first as the Geocoder-Widget extends jQuery.

Next you must include a text input field on your page, which must have the CSS classes bc-geocoder and typeahead, and may have various other options as shown and documented below:

<input
  type="text"
  class="bc-geocoder typeahead"
  data-template="simple"
  data-output-S-R-S="4326"
  data-max-Results="8"
  data-min-Score="0"
  data-set-Back="0"
  data-echo="false"
  data-interpolation="adaptive"
  data-location-Descriptor="any"
  data-callback="showCoords"
  autocomplete="off"
  placeholder="Find a place"/>

Here is a description of the attributes which can be used to configure the Address Finder Widget:

class

The input field must have the classes "bc-geocoder" and "typeahead". Other additional styles can be applied.

data-output-S-R-S

This specifies the Spatial Reference System to use for the output coordinates, using standard EPSG codes. The list of acceptable code is specified here.

data-template

The template determines how to display the individual results in the drop-down list. This can be set to either "simple" or "accuracy", which correspond to the lists shown above in the simple and advanced examples.

data-max-Results

This specifies the maximum number of results to show in the drop-down list while the user is typing.

data-min-Score

This specifies the minimum score of results to return. Any results with a score less than the specified minimum will not be returned.

data-set-Back

This specifies the distance from the street curb to set back the returned point, in meters. By default the returned point is intended to be located on the curb.

data-echo

If echo is set to true, site name and unit number details will be echoed back as part of the results even if they are not actually matched.

data-interpolation

This specifies the allowable method of interpolation. By default, "adaptive" interpolation is used. Alternatively, "linear" or "none" can be specified.

data-location-Descriptor

This specifies the type of location point to return, one of "any", "accessPoint", "frontDoorPoint", "parcelPoint", "rooftopPoint", or "routingPoint".

data-bbox

This specifies a bounding box to filter the results, specified as "minx,miny,maxx,maxy" in the output-SRS coordinate system.

data-centre

This specifies the centre point of a distance filter, specified as "x,y" in the output-SRS coordinate system. Must also use data-distance.

data-max-Distance

This specifies the maximum distance from the centre point which results may be, in meters, relative to the point specified in data-centre.

data-callback

This specifies the name of the javascript function to call with the results of the geocoding after "enter" is pressed. This is generally a custom javascript function which you have written to perform the desired action after the query is input. In the examples above, this function is used to display the result information below the query input box.

data-localities

This specifies a list of locality names which results must be in one of. The list must be comma-delimited and must contain exact spellings of locality names and so is not generally suitable for user input.

data-localities-Not

This specifies a list of locality names which results must not be in. The list must be comma-delimited and must contain exact spellings of locality names and so is not generally suitable for user input.

data-match-Precision

This specifies a list of MatchPrecision values which results must have one of. The list must be comma-delimited and may contain any of the MatchPrecision values: "occupant", "unit", "site", "civic_number", "intersection", "block", "street", "locality", "province"

data-match-Precision-Not

This specifies a list of MatchPrecision values which results must have none of. The list must be comma-delimited and may contain any of the MatchPrecision values: "occupant", "unit", "site", "civic_number", "intersection", "block", "street", "locality", "province"

autocomplete

The browser's autocomplete should set "off" in order to allow the widget's internal autocomplete to function correctly

placeholder

This specifies the "placeholder" text to display in the field before a user has edited it.

For more information on these geocoder parameters, see the REST API Console