Mapbox Address Autocomplete

Matt Rothenberg
Mapbox Address Autocomplete

An address Autocomplete Field for Statamic V3, powered by Mapbox.

Cover Image

Installation

Add the addon to your project via composer.

composer require mattrothenberg\statamic-mapbox-address

Make sure to add the following environment variable, since this library uses Mapbox under the hood for address autocompletion. The addon will not work without a valid key.

MAPBOX_API_KEY=""

Configuration

Currently, only a few configuration options are supported, although Mapbox's forward geocoding API exposes a variety of settings..

  • placeholder (string>): Placeholder text for the rendered picker.
  • countries (Array<string>): Limits results to the specified countries. Each item in the array should be an ISO 3166 alpha 2 country code.
  • featureTypes ("country" | "region" | "postcode" | "district" | "place" | "locality" | "neighborhood" | "address" | "poi" | "poi.landmark"):: Filter results by feature types
  • language (Array<string>): Specify the language to use for response text and, for forward geocoding, query result weighting. Options are IETF language tags comprised of a mandatory ISO 639-1 language code and optionally one or more IETF subtags for country or script.

Screen Shot 2021-03-15 at 7 45 53 AM

Please feel free to submit a pull request if you'd like to add other settings to the configuration screen.

Serialization

When selecting an address from the picker, the entire result will be serialized on your entry. The structure of a result is as follows:

address:
  id: address.8556990516457510
  type: Feature
  place_type:
    - address
  relevance: 0.90963
  properties:
    accuracy: rooftop
  text: "Pennsylvania Avenue NW"
  place_name: "1600 Pennsylvania Avenue NW, Washington, District of Columbia 20500, United States"
  matching_place_name: "1600 Pennsylvania Avenue NW, Washington, DC 20500, United States"
  center:
    - -77.036547
    - 38.897675
  geometry:
    type: Point
    coordinates:
      - -77.036547
      - 38.897675
  address: "1600"
  context:
    - id: neighborhood.291451
      text: Downtown
    - id: postcode.8556990516457510
      text: "20500"
    - id: place.12583600763246050
      wikidata: Q61
      text: Washington
    - id: region.14064402149979320
      wikidata: Q3551781
      short_code: US-DC
      text: "District of Columbia"
    - id: country.19678805456372290
      wikidata: Q30
      short_code: us
      text: "United States"

Please feel free to submit a pull request if you'd like to modify or improve this very basic serialization schema.