How to get climbs near you
Coding example | Geocoding API | Javascript
I have completed another CodeSandbox example demonstrating reverse geocoding feature of the new REST API, getting all climbs near latitude/longitude coordinates.
As you pan and zoom the map with the mouse, the map is populated with fresh route data from the backend within 100km radius from the center of the map.
# Sample API call
curl https://climb-api.openbeta.io/geocode/v1/climbs?latlng=44.79728,-121.11122&radius=100How does it work?
Every time we move the map, Deck.gl, our map framework, calls
onViewStateChange(…)giving us a set of parameters for the current view such as latitude/longitude and zoom level.In the view change handler, make a call to the backend requesting climbs near latitude/longitude.
Debouncing
Since the map in response to panning and zooming action can easily generate hundred of view change events in a split second, sending every small changes of coordinates to the Geocoding API server would not only make your app sluggish but also put a heavy strain on the server. Debouncing and Throttling are commons practices in frontend applications in which we only send one request after a small delay (usually in a few hundred milliseconds) and discard the rest.
Lodash or Underscore?
The answer is neither. Lodash and Underscore, the two essential Javascript utility libraries, both offer debounce() and throttle() functions However, it took me over an hour to figure how to use debounce() correctly together with an async call to the backend, aka the Promise hell. Thankfully, someone created an awesome debounce mini-library to solve this very problem. Yes, it’s called Awesome Debounce Promise. Thanks Sébastien!
Online documentation
https://climb-api.openbeta.io/docs