City location

How you guys would implement a geolocation property from a user profile? The user has to pick a town where he or she is from. Super cool would be to have some city name validation as well. Super cool as well would be if I could combine it with the convenience of Prisma.
7 Replies
JulieCezar
JulieCezar•2y ago
You would need at least these properties
address: "",
city: "",
country: "",
zipcode: "",
county: "",
location: {
long: "",
lat: ""
}
address: "",
city: "",
country: "",
zipcode: "",
county: "",
location: {
long: "",
lat: ""
}
Then you could use something like the Google Places or Autocomplete API to get the location from the user's input and save it to your db
JulieCezar
JulieCezar•2y ago
Example response:
{
"candidates":
[
{
"formatted_address": "140 George St, The Rocks NSW 2000, Australia",
"geometry":
{
"location": { "lat": -33.8599358, "lng": 151.2090295 },
"viewport":
{
"northeast":
{ "lat": -33.85824377010728, "lng": 151.2104386798927 },
"southwest":
{ "lat": -33.86094342989272, "lng": 151.2077390201073 },
},
},
"name": "Museum of Contemporary Art Australia",
"opening_hours": { "open_now": false },
"rating": 4.4,
},
],
"status": "OK",
}
{
"candidates":
[
{
"formatted_address": "140 George St, The Rocks NSW 2000, Australia",
"geometry":
{
"location": { "lat": -33.8599358, "lng": 151.2090295 },
"viewport":
{
"northeast":
{ "lat": -33.85824377010728, "lng": 151.2104386798927 },
"southwest":
{ "lat": -33.86094342989272, "lng": 151.2077390201073 },
},
},
"name": "Museum of Contemporary Art Australia",
"opening_hours": { "open_now": false },
"rating": 4.4,
},
],
"status": "OK",
}
MartinMueller.dev
MartinMueller.dev•2y ago
@JulieCezar thanks a lot. That looks super promising 🙂
JulieCezar
JulieCezar•2y ago
Np np, just be careful the pricing for it can be expensive 😂
JJC
JJC•2y ago
MUI has some autocomplete for locations, if you wanna use that. https://mui.com/material-ui/react-autocomplete/#google-maps-place
React Autocomplete component - Material UI
The autocomplete is a normal text input enhanced by a panel of suggested options.
JulieCezar
JulieCezar•2y ago
And also, although I didn't test it myself I've found this free option https://wiki.openstreetmap.org/wiki/API_v0.6
Want results from more Discord servers?
Add your server