Zip into address via Mapbox

Translate Zip Code into a valid address via Mapbox APIs

by Jesse Johnson

HTML

<p id="address"></p>

CSS

body {
  margin: 2rem;
  color: #2c2c2c;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

#address {
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.6rem;
}

JavaScript

const zip = 92618;
const token = "pk.eyJ1IjoicHJpY2VzcGlkZXIiLCJhIjoiY2tid3BscGx0MDA4YjJycGp1eW0waGFsOCJ9.nWHeR-cV--p9GqvKj-KyXA";
fetch(`https://api.mapbox.com/geocoding/v5/mapbox.places/${zip}.json?country=us&access_token=${token}`)
  .then(response => response.json())
  .then(results => results.features[0].center.join(","))
  .then(coordinates => fetch(`https://api.mapbox.com/geocoding/v5/mapbox.places/${coordinates}.json?types=address&limit=1&access_token=${token}`)
    .then(response => response.json())
    .then(results => results.features[0].place_name)
    .then(address => document.querySelector("#address").innerHTML = address));