addressInput

Back to Home

Back to main.js page

addressInput Configuration

Used to set options for the addressInput.

By default, if the developer sets up the app to use both the topics and map panels, and both are open, the addressInput is placed on the map:

If the 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 (if the map is only toggled-off, the addressInput will move back to the map when the user toggles it back on):

Behind the scenes

The config item "addressInput" actually controls two different components (both called AddressInput.vue) in the two libraries phila-vue-mapping and phila-vue-comps. The options that you put in are used by one or both of those components, as described below.

Options

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 when the input is in the topic panel	true	no, default is 350px
mapWidth	sets the width when the input is in the topic panel	false	no, there is a default
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,
  mapWidth: 300,
  position: 'right',
  autocompleteEnabled: false,
  autocompleteMax: 15,
  placeholder: 'Search the map',
},