Git Product home page Git Product logo

statamic-mapbox-address's Introduction

Mattrothenberg\StatamicMapboxAddress

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.

statamic-mapbox-address's People

Contributors

mattrothenberg avatar elcontraption avatar duncanmcclean avatar lenitr avatar martyf avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.