MapAddressCandidateList

Back to phila-vue-mapping wiki Home

Back to Mapboard Map Panel wiki

MapAddressCandidateList

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

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

• position

In a Vue template

The <map-address-candidate-list> tag is put inside a <map_> tag, after an <map-address-input> tag:

<map_>
  ...
  <div v-once>
    <map-address-input :position="this.addressInputPosition"
                   :placeholder="this.addressInputPlaceholder"
    />
  </div>
  <map-address-candidate-list v-if="this.addressAutocompleteEnabled"
                          :position="this.addressInputPosition"
  />
  ...
</map_>

In a Mapboard config file

If using Mapboard, the phila-vue-mapping MapAddressCandidateList is not automatically included on the map. If you want to change that, you can include the following object in your config:

addressInput: {
  width: 415,
  position: 'right',
  autocompleteEnabled: true,
  autocompleteMax: 15,
  placeholder: 'Search for an address',
},

Note - width and position actually do not affect the phila-vue-mapping addressInput or addressCandidateList, as the only position where the input works is the topleft, and the input should not be made too wide. Those options are for the phila-vue-comps AddressInput which is controlled by the same object of the config.