AddressInput

Back To Home

Back to Mapboard Topic Panel wiki

Address Input

A phila-vue-comps AddressInput is a component that can be added to an app, adjacent to a 'topics panel'.

In a Vue template

This is how the AddressInput Vue component is placed in an application or framework like Mapboard:

<div class="medium-12 input-container">
  <address-input :position="this.addressInputPosition"
                 :widthFromConfig="this.addressInputWidth"
                 :placeholder="this.addressInputPlaceholder"
                 @handle-search-form-submit="handleSearchFormSubmit"
  >
    <address-candidate-list v-if="this.addressAutocompleteEnabled"
                            slot="address-candidates-slot"
                            :widthFromConfig="this.addressInputWidth"
    />
  />
</div>

The "handle-search-form-submit" Event

There is a function in @philly/vue-datafetch which can be called by any component which uses the AddressInput component:

handleSearchFormSubmit(value) {
  this.$controller.handleSearchFormSubmit(value);
}

In a Mapboard config file

If a developer uses Mapboard to create an app with only a topics panel, or if a users clicks the FullScreenTopicsToggleTab, the addressInput is placed in the topics panel.

Note that some of these options are only used if the map is not included or hidden:

option	definition	only for topic panel?	required?
width	sets the width	true	no, default is 350px
position	sets the position, options are left, right, center	true	no, default is right
autocompleteEnabled	turns on autocomplete	false	no, default is false
autocompleteMax	if autocomplete is turned on, sets max number of suggestions	false	no
placeholder	sets the placeholder text	false	no, default is "Search the map"

Example:

addressInput: {
  width: 415,
  position: 'right',
  autocompleteEnabled: false,
  autocompleteMax: 15,
  placeholder: 'Search the map',
},