-
Notifications
You must be signed in to change notification settings - Fork 8
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
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_>
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);
}
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',
},