FleetbaseFleetbase

ModelCoordinatesInput

<ModelCoordinatesInput> wraps <CoordinatesInput> for binding directly to a Fleetbase Ember Data model — auto-updates the record's `location` property and reverse-geocodes the address into the model.

<ModelCoordinatesInput>

<ModelCoordinatesInput> is a thin wrapper around <CoordinatesInput> that binds directly to an Ember Data record. When the user moves the map marker, the record's location property is updated and Fleetbase's reverse-geocoder fills in street1, city, country, etc. on the same record.

Use this when you have a model with a GeoJSON location field — Place, StoreLocation, Driver, FuelReport, etc. — and want a single component to handle both the coordinate picker and the address auto-fill.

Basic Usage

<ModelCoordinatesInput @model={{this.place}} />

When the user picks a coordinate:

  1. place.location is updated to a GeoJSON Point
  2. The fleetbase reverse-geocoder fills in place.street1, place.city, place.province, place.country, place.postal_code, etc.

Different Property Path

By default the component reads/writes model.location. Override with @locationProperty:

<ModelCoordinatesInput @model={{this.driver}} @locationProperty="current_location" />

Address Autocomplete

<ModelCoordinatesInput @model={{this.place}} @autocomplete="all" />
@autocompleteEffect when the user picks a place from the map's address search
"location"Only update the location property
"all" (or true)Update every matching property on the model (street, city, country, etc.)
omittedNo autocomplete-driven model update

Arguments

ArgumentTypeDescription
@modelmodelThe Ember Data record to bind to
@locationPropertystringProperty path on the record (default: location)
@autocomplete'all' | 'location' | trueWhether to auto-fill model properties from the geocoder
@disabledbooleanDisable the input

Callbacks

ArgumentSignatureDescription
@onReverseGeocode({ latitude, longitude })Called after a successful reverse geocode (in addition to mutating the model)
@onAutocomplete(selected)Called when the user picks an address from the map's search
@onInputReady(coordinatesInput)Called once with the underlying <CoordinatesInput> API

Real-World Example

{{!-- Edit a Place record with the map plus auto-fill --}}
<ContentPanel @title="Location" @open={{true}}>
  <ModelCoordinatesInput
    @model={{this.place}}
    @autocomplete="all"
    @onReverseGeocode={{this.onLocationChanged}}
  />

  <InputGroup @name="Street" @value={{this.place.street1}} />
  <InputGroup @name="City" @value={{this.place.city}} />
  <InputGroup @name="Country" @value={{this.place.country}} />
</ContentPanel>

After the user moves the marker, the three <InputGroup>s will auto-fill from the reverse-geocoder result.

See Also

Source

FileDescription
addon/components/model-coordinates-input.hbsTemplate — wraps <CoordinatesInput>
addon/components/model-coordinates-input.jsClass — handles model binding and reverse-geocode
ModelCoordinatesInput | Fleetbase