Autofill events
This example uses MapboxAddressAutofill.event:retrieve
to populate a MapboxAddressMinimap. The minimap will expand to fill its container.
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Autofill events</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.17/web.js"></script></head><body><form class="prose"><mapbox-address-autofill><input name="address" autocomplete="shipping address-line1" placeholder="Address"></mapbox-address-autofill></form><div style="width: 300px; height: 200px;"><mapbox-address-minimap></mapbox-address-minimap></div><script>// TO MAKE THE EXAMPLE WORK YOU MUST// ADD YOUR ACCESS TOKEN FROM// https://account.mapbox.comconst ACCESS_TOKEN = 'YOUR_MAPBOX_ACCESS_TOKEN'; const script = document.getElementById('search-js');script.onload = () => {const autofill = document.querySelector('mapbox-address-autofill');const minimap = document.querySelector('mapbox-address-minimap'); autofill.accessToken = ACCESS_TOKEN;minimap.accessToken = ACCESS_TOKEN; autofill.addEventListener('retrieve', (event) => {const featureCollection = event.detail;if (!featureCollection || !featureCollection.features.length) {minimap.feature = null;return;} const feature = featureCollection.features[0];minimap.feature = feature;});};</script></body></html>