Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
update uploader to use place autocomplete and geocoding services inst…
…ead of searchbox
- Loading branch information
Showing
4 changed files
with
106 additions
and
90 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
92 changes: 92 additions & 0 deletions
92
app/webpack/observations/uploader/components/google_places_autocomplete.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| import React from "react"; | ||
| import PropTypes from "prop-types"; | ||
| import { objectToComparable } from "../../../shared/util"; | ||
|
|
||
| class GooglePlacesAutocomplete extends React.Component { | ||
| constructor( props ) { | ||
| super( props ); | ||
| this.input = React.createRef( ); | ||
| } | ||
|
|
||
| componentDidMount( ) { | ||
| this.placesAutocomplete = new google.maps.places.Autocomplete( | ||
| this.input.current, | ||
| { | ||
| types: ["geocode"], | ||
| fields: ["place_id"] | ||
| } | ||
| ); | ||
| this.placesAutocompleteService = new google.maps.places.AutocompleteService( ); | ||
| this.googleGeocoder = new google.maps.Geocoder( ); | ||
| } | ||
|
|
||
| componentDidUpdate( prevProps ) { | ||
| if ( !this.placesAutocomplete ) return; | ||
| // Change the bias bounds of the placesAutocomplete | ||
| const { bounds } = this.props; | ||
| if ( bounds && objectToComparable( bounds ) !== objectToComparable( prevProps.bounds ) ) { | ||
| this.placesAutocomplete.setBounds( bounds ); | ||
| } | ||
| // Remove any existing event listener for places_changes | ||
| if ( this.placesChangedListener ) { | ||
| google.maps.event.removeListener( this.placesChangedListener ); | ||
| } | ||
| // Add a listener for places_changed | ||
| this.placesChangedListener = this.placesAutocomplete.addListener( "place_changed", ( ) => { | ||
| const place = this.placesAutocomplete.getPlace( ); | ||
| if ( place && place.place_id ) { | ||
| this.geocodePlaceID( place.place_id ); | ||
| return; | ||
| } | ||
| this.processAutocompletePrediction( ); | ||
| } ); | ||
| } | ||
|
|
||
| processAutocompletePrediction( ) { | ||
| // the user hit enter in the place autocomplete input field without picking a result. Run | ||
| // the text in the input field through the placesAutocompleteService and process the top | ||
| // result as if it were selected by the user | ||
| const q = $( this.input.current ).val( ); | ||
| this.placesAutocompleteService.getQueryPredictions( | ||
| { input: q }, | ||
| ( predictions, status ) => { | ||
| if ( status !== google.maps.places.PlacesServiceStatus.OK | ||
| || predictions.length === 0 || !predictions[0].place_id ) { | ||
| return; | ||
| } | ||
| this.geocodePlaceID( predictions[0].place_id ); | ||
| } | ||
| ); | ||
| } | ||
|
|
||
| geocodePlaceID( placeID ) { | ||
| const { onPlacesChanged } = this.props; | ||
| // fetch additional information for the placeID from the geocoder service to get details | ||
| // such as address_components, viewport, center lat/lng, etc. | ||
| this.googleGeocoder.geocode( { placeId: placeID }, ( results, status ) => { | ||
| if ( status !== google.maps.GeocoderStatus.OK ) { | ||
| return; | ||
| } | ||
| onPlacesChanged( this.input.curent, results[0] ); | ||
| } ); | ||
| } | ||
|
|
||
| render( ) { | ||
| return ( | ||
| <div className="GooglePlacesAutocomplete"> | ||
| <input | ||
| ref={this.input} | ||
| type="text" | ||
| placeholder={I18n.t( "search_for_a_location" )} | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| GooglePlacesAutocomplete.propTypes = { | ||
| bounds: PropTypes.object, | ||
| onPlacesChanged: PropTypes.func.isRequired | ||
| }; | ||
|
|
||
| export default GooglePlacesAutocomplete; |
53 changes: 0 additions & 53 deletions
53
app/webpack/observations/uploader/components/google_places_search_box.jsx
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters