Skip to main content

Address Confirmation

Additional Developer Resources

This example shows how to use the confirmAddress component to prompt a user to confirm that the address they've provided in a form is correct.

Fill out the address form and click "Confirm" to show the confirmation dialog. Check the browser console to see the returned result of the confirmation action.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Address Confirmation</title>
<!-- Default styling. Feel free to remove! -->
<link href="https://api.mapbox.com/mapbox-assembly/v1.3.0/assembly.min.css" rel="stylesheet">
<script id="search-js" defer="" src="https://api.mapbox.com/search-js/v1.0.0-beta.24/web.js"></script>
</head>
<body>
<form class="flex flex--column">
  <!-- Input form -->
  <label class="txt-s txt-bold color-gray mb3">Address</label>
  <input class="input mb12" placeholder="House number and street" autocomplete="address-line1">
  <label class="txt-s txt-bold color-gray mb3">Address Line 2</label>
  <input class="input mb12" placeholder="Apartment, suite, unit, building, floor, etc." autocomplete="address-line2">
  <label class="txt-s txt-bold color-gray mb3">City</label>
  <input class="input mb12" placeholder="City" autocomplete="address-level2">
  <label class="txt-s txt-bold color-gray mb3">State / Region</label>
  <input class="input mb12" placeholder="State / Region" autocomplete="address-level1">
  <label class="txt-s txt-bold color-gray mb3">ZIP / Postcode</label>
  <input class="input" placeholder="ZIP / Postcode" autocomplete="postal-code">

  <!-- Form buttons -->
  <div class="mb30 mt30">
    <button type="submit" class="btn round">
      Confirm
    </button>
  </div>
</form>

<script>
	// TO MAKE THE MAP APPEAR YOU MUST
	// ADD YOUR ACCESS TOKEN FROM
	// https://account.mapbox.com
	mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
  document.getElementById("search-js").onload = () => {
    mapboxsearch.config.accessToken = ACCESS_TOKEN;

    // Add confirmation prompt to shipping address
    const form = document.querySelector("form");
    form.addEventListener("submit", async (e) => {
      e.preventDefault();
      const result = await mapboxsearch.confirmAddress(form, {
        theme: { variables: {border: '3px solid rgba(0,0,0,0.35)', borderRadius: '18px'} },
        minimap: {
          defaultMapStyle: ['mapbox', 'outdoors-v11'],
          satelliteToggle: true
        },
        skipConfirmModal: (feature) => false // overrides default behavior, show dialog every time
      });
      console.log(result);
    });
  }
</script>

</body>
</html>
Additional Developer Resources
Was this example helpful?