Theo's Typesafe Cult•2y ago

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•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•2y ago

https://developers.google.com/maps/documentation/places/web-service/search-find-place

Google for Developers

Find Place | Places API | Google for Developers

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.devOP•2y ago

@JulieCezar thanks a lot. That looks super promising 🙂

JulieCezar•2y ago

Np np, just be careful the pricing for it can be expensive 😂

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•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

API v0.6

Gaming

Programming

City location