examples/custom.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>maplibre-gl-overview-map</title>
    <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
    <script src="https://unpkg.com/maplibre-gl-overview-map@1.0.4/dist/maplibre-gl-overview-map.umd.js"></script>
    <link
      href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css"
      rel="stylesheet"
    />
    <link
      href="https://unpkg.com/maplibre-gl-overview-map@1.0.4/dist/maplibre-gl-overview-map.css"
      rel="stylesheet"
    />
    <style>
      #map {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        position: absolute;
        width: 100%;
      }

      .custom-overview-map-style {
        border: 5px double !important;
        border-color: #737373 !important;
        box-shadow: unset !important;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      let map = new maplibregl.Map({
        container: 'map',
        style: 'https://yuchuntsao.github.io/simple-vector-tiles/style.json',
        center: [0, 0],
        zoom: 4
      })

      map.addControl(new maplibregl.NavigationControl(), 'bottom-right')

      // Custom style
      const customOverviewMapControl = new OverviewMapControl({
        mapContainerId: 'custom-overview-map-id',
        customClassName: 'custom-overview-map-style',
        mapStyle: {
          version: 8,
          name: 'Natural Earth Vector Tile',
          metadata: {},
          center: [0, 0],
          zoom: 0,
          bearing: 0,
          pitch: 0,
          sources: {
            tiles: {
              type: 'vector',
              tiles: [
                'https://yuchuntsao.github.io/simple-vector-tiles/tiles/{z}/{x}/{y}.pbf'
              ],
              maxzoom: 2,
              minzoom: 0
            }
          },
          layers: [
            {
              id: 'countries',
              type: 'fill',
              source: 'tiles',
              'source-layer': 'countries',
              paint: {
                'fill-color': 'rgba(243, 243, 243, 1)',
                'fill-outline-color': 'rgba(195, 195, 195, 0.5)'
              }
            }
          ]
        },
        zoomOffset: 4,
        allowRotate: true,
        box: {
          sourceName: 'Custom Box Source Name',
          outlineLayerId: 'Custom Box Outline Layer Id',
          fillLayerId: 'Custom Box Fill Layer Id',
          fillStyle: {
            'fill-color': '#6995FA',
            'fill-opacity': 0.2
          },
          outlineStyle: {
            'line-color': '#3E55C5',
            'line-width': ['interpolate', ['linear'], ['zoom'], 0, 2, 10, 4],
            'line-dasharray': [2, 2],
            'line-opacity': 0.7
          }
        }
      })

      map.addControl(customOverviewMapControl, 'top-left')
    </script>
  </body>
</html>