InitialValue based on existing LatLng

[ubilabs]

InitialValue based on existing LatLng

[ro-ka]

We want to keep the geolocation and reverse geocoding out of this component. The purpose of this component is to get geo autocompletion, not to do geocodings.

Initialization with a suggest is helpful for that, the rest should be handled not in the component.

[boriswexler]

@fzaninotto 's method worked just fine for me. As a slight enhancement, if you have the label and the google place id, you can initialize with the proper google place id as follows:

import BaseGeosuggest from 'react-geosuggest';

class Geosuggest extends BaseGeosuggest {
    componentDidMount() {
        super.componentDidMount();
        var suggest = [];
        suggest.placeId = this.props.initialLocation.id;
        suggest.label = this.props.initialLocation.label;
        this.selectSuggest(suggest);

    }
}

export default Geosuggest;

[ro-ka]

Good idea! But what to do about cases where a reverse geocoding is not successful? Also when there is more than one result for the coordinates, which one to pick? Would use the first one, but that doesn’t have to be the selected one. Any ideas?

[onemanstartup]

I definitely need "Init with lat/lng and reverese geocode"

[fzaninotto]

To enable geocoding based on initial string, I found a workaround by extending the component:

import BaseGeosuggest from 'react-geosuggest';

class Geosuggest extends BaseGeosuggest {
    componentDidMount() {
        super.componentDidMount();
        if (this.state.userInput) {
            this.selectSuggest();
        }
    }
}

export default Geosuggest;

Then I use this component instead of react-geosuggest in my code.

This looks like a fairly simple addition that should make it to the core IMO.

[ro-ka]

Related to #97.

[vysakh0]

👍 This would be a nice feature to have. Sometimes, we have to set the initialValue (an object with place_id, long_name) for a partial string.

[ro-ka]

I’m not sure what to add for this feature. We have different uses:

• Init with an object as received before
• Init with a placeId and reverse geocode
• Init with lat/lng and reverese geocode
• Init with a string but not geocode anything (already implemented)

Are there any other possibilities I missed?

[fzaninotto]

I have another use case : init with a string and geocode directly.

I grab the user's city with Google Loader, so that I can prefill my geosuggest client-side. The problem is that the user sees the correct location and doesn't click on the field, so I don't query Google and don't get the geolocation object...

Of course, I could use the location string to call the google maps API outside of the component, and forge a suggestion-like value to use as the initial value for <Geosuggest>... if <GeoSuggest> accepted an initialLocation, which is not the case.

So the most urgent task IMO is to

Init with an object as received before

[ryanlward]

I'm trying something similar the fzaninotto. When the user saves the location of an item in my app, I flatten the object and store it in an SQL database. When a user edit's that object, I set the label, then call selectSuggest, which seems to then set the value to the Google Maps object, but it the placeId is not there.

Not sure why it works that way. It mentions something about this in the docs, but I'd not sure why that choice was made. Regardless, if I could just init with a placeId, then trigger an initial suggestSelect event that returned a full map object, it would work well for me.

[ro-ka]

@fzaninotto Would you mind to open a PR with this?

[bradennapier]

I would also like to do this. I have user location so want that to be first suggestion then allow them to choose around that.

The idea from @fzaninotto does not work - it says something about cant call udnefined for super.componentDidMount()

[Caerostris]

@bradennapier Try substituting componentDidMount for componentWillMount.
Things changed since @fzaninotto commented on this issue.

[bradennapier]

ok thanks

[oyeanuj]

@fzaninotto @ro-ka @yfr Any plans on incorporating it within the component? And do you think a configuration option that takes in navigator.geolocation would be a useful default/option?

[ro-ka]

You’re free to open a PR that allows adding an initial selected suggest.

How would the option with navigator.geolocation look like?

[sandervanhooft]

How would the option with navigator.geolocation look like?

👍 for that! :)

[sandervanhooft]

@boriswexler

For generic use, don't you need to check if this.props.initialLocation.[ id | label ] are set?

[sandervanhooft]

@oyeanuj @ro-ka

When using navigator.geolocation, we'd have to do a reverse geocoding lookup first in order to get a google place id and label.

Edit: probably best to use the whole google place object instead of id and label only.

[sandervanhooft]

@oyeanuj @ro-ka
Or we could use the navigator.geolocation and "current position" to populate a fixture.

[oyeanuj]

You’re free to open a PR that allows adding an initial selected suggest.

I think @boriswexler @fzaninotto @Caerostris might be able to do this sooner and better since I haven't yet had to implement this functionality.

How would the option with navigator.geolocation look like?

I think @sandervanhooft has mentioned the idea above. In my mind, here is how it would work -

1. If useNavigatorGeolocation prop is enabled, then the library prompts the user for their location via the browser.

2. If denied, the library calls a callback provided by the developer (lets say, resultFromNavigatorGeolocation) with a false.

3. If approved, the library uses the lat, long, and the name to reverse geo-code and provide the user (again using resultFromNavigatorGeolocation) with the same place object that they would get from onChange.

4. And maybe an additional prop, which determines if the input box is going to be pre-filled with the location from the browser.

5. Finally, we might want to consider the behavior when this data is being fetched. Does the input box need a loading placeholder method or not? Or maybe this can be in the user-land? Or exposed via a prop?

Thoughts @ro-ka @sandervanhooft?

[oyeanuj]

@yfr (or anyone else on this thread) did you ever end up with a solution for setting the initial selected suggest?

[ro-ka]

We didn’t yet. If you have any proposals for this, feel free to share them. The component should care for it’s use case and not other domains.

[ro-ka]

As discussed, this shouldn’t be part of the library.