Minimap | Mapbox Search JS

This example shows how to use the Minimap component to render a location on a map and customize its appearance.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Minimap</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>
<input name="address" autocomplete="address-line1" placeholder="Enter an address...">
</form>
<br>
<div style="height: 360px; width: 100%;">
<mapbox-address-minimap satellite-toggle="true" can-adjust-marker="true"></mapbox-address-minimap>
</div>
<script>
// TO MAKE THE EXAMPLE WORK YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
const ACCESS_TOKEN = 'YOUR_MAPBOX_ACCESS_TOKEN';
 
const script = document.getElementById('search-js');
script.onload = () => {
// Add search box to input
const collection = mapboxsearch.autofill({ accessToken: ACCESS_TOKEN });
 
// Configure minimap
const minimap = document.querySelector('mapbox-address-minimap');
minimap.accessToken = ACCESS_TOKEN;
minimap.defaultMapStyle = ['mapbox', 'outdoors-v11'];
minimap.theme = {
variables: { border: '13px solid #bbb', borderRadius: '18px', boxShadow: '0 2px 8px #000' }
}
minimap.onSaveMarkerLocation = (coordinate) => { console.log(coordinate); }
minimap.feature = {
type: 'Feature',
geometry: { type: 'Point', coordinates: [-73.981872, 40.768037] },
properties: {}
};
 
// Set minimap feature on search box selection
collection.addEventListener('retrieve', (e) => {
minimap.feature = e.detail.features[0];
})
};
</script>
 
</body>
</html>