Comments (24)
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.
from react-geosuggest.
@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;
from react-geosuggest.
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?
from react-geosuggest.
I definitely need "Init with lat/lng and reverese geocode"
from react-geosuggest.
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.
from react-geosuggest.
Related to #97.
from react-geosuggest.
👍 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.
from react-geosuggest.
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?
from react-geosuggest.
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
from react-geosuggest.
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.
from react-geosuggest.
@fzaninotto Would you mind to open a PR with this?
from react-geosuggest.
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()
from react-geosuggest.
@bradennapier Try substituting componentDidMount
for componentWillMount
.
Things changed since @fzaninotto commented on this issue.
from react-geosuggest.
ok thanks
from react-geosuggest.
@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?
from react-geosuggest.
You’re free to open a PR that allows adding an initial selected suggest.
How would the option with navigator.geolocation
look like?
from react-geosuggest.
How would the option with navigator.geolocation look like?
👍 for that! :)
from react-geosuggest.
For generic use, don't you need to check if this.props.initialLocation.[ id | label ]
are set?
from react-geosuggest.
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.
from react-geosuggest.
@oyeanuj @ro-ka
Or we could use the navigator.geolocation
and "current position" to populate a fixture.
from react-geosuggest.
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 -
-
If
useNavigatorGeolocation
prop is enabled, then the library prompts the user for their location via the browser. -
If denied, the library calls a callback provided by the developer (lets say,
resultFromNavigatorGeolocation
) with a false. -
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 fromonChange
. -
And maybe an additional prop, which determines if the input box is going to be pre-filled with the location from the browser.
-
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?
from react-geosuggest.
@yfr (or anyone else on this thread) did you ever end up with a solution for setting the initial selected suggest?
from react-geosuggest.
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.
from react-geosuggest.
As discussed, this shouldn’t be part of the library.
from react-geosuggest.
Related Issues (20)
- Billing issues HOT 3
- Expose TypeScript type definitions
- Warning: Prop `aria-owns` did not match. HOT 1
- selectSuggest doesn't trigger onSelectSuggests HOT 3
- Inconsitent suggest.gmaps property received in onSuggestSelect HOT 2
- Test `react-geosuggest` with puppeteer HOT 1
- utc_offset is deprecated as of November 2019 and will beturned off in November 2020. Use utc_offset_minutes instead. HOT 3
- How to allow current location ? and get address based on current location coordinates ? HOT 1
- ul role=listbox should define an aria-label or aria-labelledby HOT 2
- Support React 17 HOT 2
- Selected suggestion didn't apply properly, when searching in Argentina region HOT 1
- Type is invalid - expected a string or a class/function (for composite components) but got: undefined. Check the render method of `Input`. HOT 7
- Google maps API was not found in the page. HOT 2
- Handle the errors returned by the geocoder API
- Label "for" and input "id" do not match
- 'Avnei Hefetz' is an israli settlement city which is not coming in country 'IL' suggestions whereas 'Einav' is also an israli settlement city which is coming in country 'IL' suggestions. HOT 1
- How to detach geocomplete event?
- Using bounds not filtering suggests HOT 1
- Bounds, location, and radius are deprecated
- Support and document loading Maps API via Bootstrap Loader
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-geosuggest.