> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-search-js/llms.txt)

# Minimap

This example shows how to use the [Minimap](https://docs.mapbox.com/mapbox-search-js/api/web/minimap/) class to render a location on a map and customize its appearance.

**JavaScript**

```html
<!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.6.0/web.js"></script>
</head>
<body>
<form>
  <input class="input bg-white mb12" name="address" autocomplete="address-line1" placeholder="Enter an address...">
</form>
<br>

<div id="minimapContainer" style="height: 360px; width: 100%;"></div>

<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', () => {
    // Add search box to input
    const collection = mapboxsearch.autofill({ accessToken: ACCESS_TOKEN });

    // Instantiate a new Minimap & append it to the DOM
    const minimap = new MapboxAddressMinimap();
    const container = document.getElementById('minimapContainer');
    container.appendChild(minimap);
    
    // Configure the Minimap
    minimap.accessToken = ACCESS_TOKEN;
    minimap.defaultMapStyle = ['mapbox', 'outdoors-v11'];
    minimap.satelliteToggle = true;
    minimap.canAdjustMarker = true;
    minimap.theme = {
      variables: { border: '13px solid #bbb', borderRadius: '18px', boxShadow: '0 2px 8px #000' },
      cssText: ".MinimapInnerFrame:hover { border: 13px solid lightskyblue; }"
    }
    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>
```