Search code examples
mapsmapboxgeocodingmapbox-glgeocode

Geocoding with Mapbox


Background: I have just finished a course on Udemy called The Web Development Bootcamp. The main project for this course was to create a web app called Yelpcamp, which is essentially a campsite rating and discussion site. You can see the current working version of my app here: https://radiant-eyrie-76078.herokuapp.com/. It is built using node and express.

Problem: I would like to add a map to each campground showing where it is in the world. When a user adds a campground they will put in a location in a form and I need to take that location and convert it to latitude and longitude. I am using mapbox to add the map and I was able to get a simple map added to each campground. I now need to figure out how to take the input from the user and geocode it (convert it from a name to an exact location). Mapbox has a geocoding api, but I cannot figure out how to use it in this way. It seems that it can only be attached to the map directly.

Question: How can I take this location user input and geocode it so that it can be used by my mapbox map?


Solution

  • The Geocoding functionality of Mapbox does not require the presence of a map, and be called from the SDKs directly. That is, the input text of the geolocation can be user-provided or come from anywhere else (say, a DB, or a preexisting list of places).

    Since your app is Node-based, you probably want the forwardGeocode function of the Geocode API in the JavaScript SDK.