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
const ACCESS_TOKEN = 'YOUR_MAPBOX_ACCESS_TOKEN';
    window.addEventListener('load', () => {
        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?