MapAddressInput

Back to phila-vue-mapping wiki Home

Back to Mapboard Map Panel wiki

MapAddressInput

A phila-vue-mapping MapAddressInput is a custom widget that can be added to a Leaflet map.

The props that can be passed to a phila-vue-mapping MapAddressInput are:

• position
• placeholder

In a Vue template

The <address-input> tag is put inside a <map_> tag:

<map_>
  ...
  <div v-once>
    <map-address-input :position="this.addressInputPosition"
                   :placeholder="this.addressInputPlaceholder"
                   :widthFromConfig="this.addressInputWidth"
                   @handle-search-form-submit="handleSearchFormSubmit"
    />
  </div>
  ...
</map_>

The "handle-search-form-submit" Event

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

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

In a Mapboard config file

If using Mapboard, the phila-vue-mapping MapAddressInput is automatically included on the map.

You can still include it in main.js, in order to override defaults.

Note that some of the options you can use are only used by the corresponding AddressInput.vue component of the library phila-vue-comps. They do not affect the MapAddressInput on the map, but only the other one that appears in the topics panel 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:

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