Mapbox-gl-js-template

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v3.0.0-beta.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v3.0.0-beta.1/mapbox-gl.css">
<div id='map' class="myMap"></div>

CSS

html,
body {
  height: 100%;
}

#map {
  height: 100%;
  width: 100%;
}

JavaScript

mapboxgl.accessToken =
  "pk.eyJ1Ijoic29uYmVvMTk5OWhkIiwiYSI6ImNsankwNzBpYzAwNmgzb21tMGlzN2tmczcifQ.zAWLTqXNwlpRlvomWDaNhA";

      const map = new mapboxgl.Map({
        container: "map",
        style: "mapbox://styles/mapbox/outdoors-v12",
        center: [-121.403732, 40.492392],
        zoom: 10,
      });

      const overlappedByFeature = {
        type: "Feature",
        properties: {},
        geometry: {
          coordinates: [
            [
              [-121.80702903686473, 40.93051619352201],
              [-121.80702903686473, 40.16057102105876],
              [-120.76519012316166, 40.16057102105876],
              [-120.76519012316166, 40.93051619352201],
              [-121.80702903686473, 40.93051619352201],
            ],
          ],
          type: "Polygon",
        },
      };

      map.on("load", () => {
        map.addSource("mainFill", {
          type: "geojson",
          data: {
            type: "FeatureCollection",
            features: [
              {
                type: "Feature",
                properties: {},
                geometry: {
                  coordinates: [
                    [
                      [-121.05656855786127, 41.42091356623712],
                      [-121.05656855786127, 40.78425669594773],
                      [-120.09096175979518, 40.78425669594773],
                      [-120.09096175979518, 41.42091356623712],
                      [-121.05656855786127, 41.42091356623712],
                    ],
                  ],
                  type: "Polygon",
                },
              },
            ],
          },
        });

        map.addSource("overlaped_by", {
          type: "geojson",
          data: {
            type: "FeatureCollection",
            features: [overlappedByFeature],
          },
        });

        map.addLayer({
          id: "overlaped_by",
          type: "fill",
          source: "overlaped_by",
        });

        map.addLayer({
          id: "mainFill",
  ...