Head Waters - Topographic

head-waters-topographic.markdown

Head Waters - Topographic

A Pen by Spencer Thayer on CodePen.

License.

index.html

<script src='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css' rel='stylesheet' />
<div id="container">
  <div id="map"></div>
  <div id="overlay"><div class="box">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 565 265">
  <defs>
    <clipPath id="clippath">
      <path d="M455.59 62.04c-.54.91-12.8 20.64-59.94 32.96h16.47c.14-.06.28-.12.43-.19 11.13-4.84 27.93-12.17 42.13-26.37 16.84-16.84 33.63-33.44 33.8-33.61l1.83-1.81c.46-.45 1.19-.45 1.65 0l71.24 71.24V0h-247v12.03h6.65c1.92 0 3.48 1.56 3.48 3.48v76.67a6.1 6.1 0 0 1-.7 2.82H334c-.08-.18-.13-.37-.13-.58v-6.69c0-.37.15-.72.41-.98l74.03-74.03c.54-.54 1.42-.54 1.96 0l46.05 46.04c.45.45.54 1.15.21 1.7l-.94 1.58Z" class="cls-none"/>
    </clipPath>
  </defs>
  <g id="Logo">
    <g id="Law_Group" class="cls-isolate" data-name="Law Group">
      <g class="cls-isolate">
        <path d="M345.82 225.72c0-.28.19-.47.47-.47h3.24c.28 0 .47.19.47.47v27.31c0 .19.09.28.28.28h15.23c.28 0 .47.19.47.47v2.96c0 .28-.19.47-.47.47h-19.22c-.28 0-.47-.19-.47-.47v-31.02Z" class="cls-law"/>
      </g>
      <g class="cls-isolate">
        <path d="M384.64 257.21c-.28 0-.47-.19-.47-.47v-1.97h-.05c-1.03 1.69-3.24 2.96-6.67 2.96-4.28 0-7.57-2.21-7.57-6.77s3.29-6.96 8.79-6.96h5.12c.19 0 .28-.09.28-.28v-1.64c0-3.1-1.22-4.42-5.41-4.42-2.54 0-4.14.66-5.45 1.6-.24.19-.52.19-.66-.05l-1.27-2.16c-.14-.28-.09-.47.09-.66 1.69-1.32 4.32-2.21 7.66-2.21 6.39 0 8.84 2.11 8.84 7.66v14.9c0 .28-.19.47-.47.47h-2.77Zm-.57-7.29v-2.49c0-.19-.09-.28-.28-.28h-4.51c-3.9 0-5.59 1.13-5.59 3.67 0 2.3 1.69 3.52 4.7 3.52 3.52 0 5.69-1.64 5.69-4.42Z" class="cls-law"/>
      </g>
      <g class="cls-isolate">
        <path d="M414.67 257.21c-.28 0-.47-.19-.56-.47l-5.08-16.12h-.09l-5.12 16.12c-.09.28-.28.47-.56.47h-2.73c-.28 0-.47-.19-.56-.47l-7.05-21.57c-.09-.28.05-.47.33-.47h3.2c.33 0 .47.09.61.47l4.98 16.26h.09l5.08-16.26c.09-.33.28-.47.56-.47h2.44c.28 0 .52.14.61.47l5.12 16.26h.09l4.84-16.26c.09-.38.28-.47.61-.47h3.2c.28 0 .42.19.33.47l-7.1 21.57c-.09.28-.23.47-.56.47h-2.68Zm25.9-15.98c0-5.26.28-7.19.85-9.02 1.6-4.94 5.55-7.47 10.95-7.47s9.02 2.82 10.62 6.34c.14.28.09.52-.14.66l-2.82 1.36c-.28.14-.52.05-.66-.24-1.55-2.87-3.62-4.23-7-4.23-3.62 0-5.92 1.69-6.91 4.75-.42 1.17-.66 2.96-.66 7.85s.24 6.67.66 7.85c.99 3.05 3.29 4.75 6.91 4.75 3.24 0 5.88-1.6 6.86-4.61.33-1.08.61-2.63.61-5.03 0-.19-.09-.28-.28-.28h-6.2c-.28 0-.47-.19-.47-.47v-2.73c0-.28.19-.47.47-.47h10.2c.28 0 .47.19.47.47v2.4c0 2.87-.33 5.5-.8 7.05-1.55 4.84-5.55 7.57-10.86 7.57s-9.35-2.54-10.95-7.47c-.56-1.83-.85-3.76-.85-9.02Z" class="cls-law"/>
      </g>
      <g class="cls-isolate">
        <path d="M471.16 257.21c-.28 0-.47-.19-.47-.47v-21.57c0-.28.19-.47.47-.47h3.01c.28 0 .47.19.47.47v2.3h.05c.99-1.93 2.96-3.29 5.97-3.29 1.79 0 3.48.66 4.61 1.69.23.24.28.42.09.66l-1.74 2.3c-.19.24-.42.28-.66.09-1.03-.66-2.16-1.08-3.48-1.08-3.43 0-4.84 2.68-4.84 6.58v12.31c0 .28-.19.47-.47.47h-3.01Z" class="cls-law"/>
      </g>
      <g class="cls-isolate">
        <path d="M488.51 251.66c-.52-1.55-.75-3.1-.75-5.73s.23-4.14.75-5.69c1.22-3.85 4.51-6.06 8.88-6.06s7.66 2.21 8.88 6.06c.52 1.55.75 3.1.75 5.69s-.24 4.18-.75 5.73c-1.22 3.81-4.51 6.06-8.88 6.06s-7.66-2.26-8.88-6.06Zm13.95-1.13c.38-1.22.52-2.44.52-4.61s-.14-3.34-.52-4.56c-.75-2.26-2.58-3.53-5.08-3.53s-4.32 1.27-5.08 3.53c-.38 1.22-.52 2.4-.52 4.56s.14 3.38.52 4.61c.75 2.26 2.58 3.53 5.08 3.53s4.32-1.27 5.08-3.53Zm25.06 6.68c-.28 0-.47-.19-.47-.47v-2.12H527c-1.17 1.88-3.24 3.1-6.16 3.1-4.93 0-7.8-3.38-7.8-8.51v-14.05c0-.28.19-.47.47-.47h3.01c.28 0 .47.19.47.47v13.11c0 3.67 1.64 5.78 4.98 5.78 3.05 0 5.08-2.16 5.08-5.55v-13.35c0-.28.19-.47.47-.47h3.01c.28 0 .47.19.47.47v21.57c0 .28-.19.47-.47.47h-3.01Zm11.65 8.46c-.28 0-.47-.19-.47-.47v-30.03c0-.28.19-.47.47-.47h3.01c.28 0 .47.19.47.47v2.12h.05c1.08-1.79 3.01-3.1 6.39-3.1 3.9 0 6.63 1.83 7.75 5.4.61 1.79.8 3.57.8 6.34s-.19 4.61-.8 6.39c-1.13 3.57-3.85 5.4-7.75 5.4-3.38 0-5.31-1.36-6.39-3.15h-.05v10.62c0 .28-.19.47-.47.47h-3.01Zm13.91-15.04c.38-1.17.52-2.63.52-4.7s-.14-3.48-.52-4.7c-.75-2.21-2.44-3.38-4.93-3.38s-4.23 1.13-4.98 3.38c-.38 1.13-.52 2.44-.52 4.7s.14 3.62.52 4.7c.75 2.26 2.49 3.43 4.98 3.43s4.18-1.22 4.93-3.43Z" class="cls-law"/>
      </g>
    </g>
    <g id="Head_Waters" data-name="Head Waters">
      <g id="Group_10" data-name="Group 10">
        <path id="Path_134" d="M88.93 126.94v-14.49c0-1.14-.93-2.07-2.07-2.07h-5.09c-1.14 0-2.07-.92-2.07-2.06V81.53c0-20.14-9.06-30.71-25.84-30.71-9.58 0-15.66 2.72-19.72 5.72-.92.67-2.21.47-2.88-.45-.26-.36-.4-.78-.4-1.23V14.29c0-1.14-.92-2.07-2.06-2.07H2.4c-1.14 0-2.07.92-2.07 2.06v14.65c0 1.14.92 2.07 2.06 2.07h4.93c1.14 0 2.07.92 2.07 2.07v75.23c0 1.14-.93 2.07-2.07 2.07H2.07A2.08 2.08 0 0 0 0 112.44v14.49c0 1.14.92 2.07 2.07 2.07H38.7c1.14 0 2.07-.93 2.07-2.07v-14.49c0-1.14-.93-2.06-2.07-2.06h-5.76c-1.14 0-2.07-.93-2.07-2.07v-31.4c0-.72.37-1.39.99-1.77 3.92-2.35 8.37-3.68 12.94-3.86 9.9 0 13.26 4.36 13.26 12.75v24.28c0 1.14-.92 2.07-2.07 2.07h-5.93c-1.14 0-2.07.93-2.07 2.07v14.49c0 1.14.93 2.07 2.07 2.07h36.81c1.14 0 2.07-.93 2.07-2.07" class="cls-grey" data-name="Path 134"/>
        <path id="Path_135" d="M130.49 130.85c9.59-.17 19.02-2.53 27.56-6.89a2.275 2.275 0 0 0 1.01-2.89l-5.31-12.78a2.298 2.298 0 0 0-3.02-1.21c-.04.02-.08.04-.12.05a46.44 46.44 0 0 1-19.96 4.6c-8.82 0-14.18-4-15.48-10.93a2.28 2.28 0 0 1 2.27-2.66h40.23c1.09 0 2.03-.76 2.24-1.83.7-3.94 1.07-7.93 1.1-11.93 0-16.61-8.9-33.56-33.06-33.56S91.7 69.28 91.7 90.76c0 23.32 11.74 40.1 38.76 40.1m-15.08-51.51c1.14-5.97 4.81-10.58 12.58-10.58 5.87 0 12.08 3.19 12.08 11.24 0 .68-.05 1.35-.17 2.02h-22.23c-1.26 0-2.29-1.01-2.29-2.27 0-.13.01-.27.03-.4" class="cls-grey" data-name="Path 135"/>
        <path id="Path_136" d="m213.01 84.14-6 .39c-23.32 1.51-38.09 6.88-38.09 24.16 0 13.76 9.06 22.15 22.65 22.15 10.71 0 18.26-4.5 22.65-9.88a1.808 1.808 0 0 1 3.04.45c2.24 5.12 7.34 8.58 16.25 8.58 3.37.02 6.74-.23 10.07-.73a1.82 1.82 0 0 0 1.51-1.82v-14.67c0-1.01-.82-1.83-1.84-1.83h-.34a5.629 5.629 0 0 1-6.03-5.22c-.01-.15-.01-.29-.01-.44V79.14c0-22.82-10.4-28.35-31.88-28.35s-31.88 8.22-31.88 19.13c-.02 3.16.72 6.27 2.15 9.09.32.61.96.99 1.65.98h16.35c1.01 0 1.83-.82 1.83-1.83v-6.23c0-1.01.82-1.84 1.84-1.83h15.96c1.01 0 1.84.82 1.84 1.83V82.3c0 .97-.75 1.77-1.72 1.83m1.71 21.99c0 .57-.25 1.1-.7 1.45a24.832 24.832 0 0 1-14.57 5.32c-4.7 0-7.38-1.85-7.38-6.04s2.35-6.71 14.93-8.05l5.68-.62c1.01-.11 1.91.62 2.02 1.62 0 .07.01.13.01.2v6.12Z" class="cls-grey" data-name="Path 136"/>
        <path id="Path_137" d="M203.81 137.89h-37.19c-1.13 0-2.05.92-2.05 2.05v14.7c0 1.13.92 2.05 2.05 2.05h5.97c1.13 0 2.04.91 2.04 2.04 0 .15-.02.31-.05.46l-6.19 27.36a2.039 2.039 0 0 1-2.44 1.54c-.7-.16-1.27-.67-1.49-1.36l-15.53-47.43a2.05 2.05 0 0 0-1.94-1.41h-17.86a2.044 2.044 0 0 0-1.94 2.67l4.63 14.43c.14.45.13.93-.04 1.37l-12.32 31.72a2.05 2.05 0 0 1-3.9-.25l-7.06-28.6c-.27-1.1.4-2.2 1.5-2.47.16-.04.33-.06.49-.06h6.42c1.13 0 2.04-.92 2.04-2.05v-14.7c0-1.13-.91-2.05-2.04-2.05H79.38c-1.13 0-2.04.92-2.04 2.05v14.7c0 1.13.91 2.05 2.04 2.05h4.66c.9 0 1.7.59 1.96 1.46l16.41 54.81c.26.87 1.05 1.46 1.96 1.46h21.42c.84 0 1.59-.51 1.9-1.29l12.43-31.28a2.045 2.045 0 0 1 2.66-1.14c.54.22.97.66 1.17 1.21l11.27 31.17a2.04 2.04 0 0 0 1.92 1.35h22.02c.91 0 1.72-.61 1.97-1.49l15.6-54.75c.25-.88 1.05-1.48 1.97-1.48h5.14c1.13 0 2.05-.92 2.05-2.05v-14.7c0-1.13-.92-2.05-2.05-2.05" class="cls-grey" data-name="Path 137"/>
        <path id="Path_138" d="M285.05 196.37c-.05 0-.1.01-.15.01a5.66 5.66 0 0 1-6.04-5.24c-.01-.15-.02-.29-.01-.44v-26.14c0-22.82-10.4-28.36-31.88-28.36s-31.88 8.22-31.88 19.13c-.02 3.16.72 6.27 2.15 9.08.32.61.96.99 1.65.99h16.34c1.02 0 1.84-.82 1.84-1.84v-6.22c0-1.02.82-1.84 1.84-1.84h15.96c1.01 0 1.84.82 1.83 1.84v10.37c0 .97-.75 1.77-1.72 1.83l-6 .39c-23.32 1.51-38.09 6.88-38.09 24.16 0 13.76 9.06 22.15 22.65 22.15 10.71 0 18.26-4.5 22.65-9.87a1.807 1.807 0 0 1 3.04.46c2.25 5.11 7.35 8.58 16.26 8.58 3.37.02 6.74-.23 10.07-.73a1.82 1.82 0 0 0 1.51-1.82V198.2c0-1.02-.82-1.84-1.84-1.84h-.18m-28.35-4.83c0 .57-.25 1.11-.7 1.46a24.822 24.822 0 0 1-14.57 5.31c-4.7 0-7.39-1.85-7.39-6.04s2.35-6.71 14.94-8.06l5.68-.62c1.01-.11 1.92.62 2.03 1.63 0 .07.01.13.01.2v6.11Z" class="cls-grey" data-name="Path 138"/>
        <path id="Path_139" d="M290.36 129.92c.61-.12 1.16-.42 1.6-.85l8.48-8.48 24.13-24.13a6.055 6.055 0 0 0 1.77-4.28V15.52c0-1.92-1.56-3.48-3.48-3.48h-28.27c-1.92 0-3.48 1.56-3.48 3.48v11.66c0 1.92 1.56 3.48 3.48 3.48h6.79c1.92 0 3.48 1.56 3.48 3.48v17.02a3.472 3.472 0 0 1-5.15 3.05c-4.71-2.5-9.99-3.73-15.32-3.58-20.47 0-31.88 14.6-31.88 39.77s11.58 40.27 31.04 40.27c1.89 0 3.77-.17 5.62-.51.07-.01.65-.13 1.18-.23m.42-19.74c-12.08 0-15.77-8.56-15.77-19.8s3.86-19.29 15.77-19.29c4.1-.09 8.17.72 11.92 2.38 1.22.58 2.01 1.81 2.01 3.16v27.06c.01 1.1-.51 2.14-1.4 2.79a22.925 22.925 0 0 1-12.53 3.7" class="cls-grey" data-name="Path 139"/>
        <path id="Path_140" d="M343.72 195.18c-3.37.37-7.54.6-9.49.6-4.19 0-7.88-1.51-7.88-7.38v-29.98c0-.96.77-1.73 1.73-1.73h13.32c.96 0 1.73-.78 1.73-1.73v-15.33c0-.96-.78-1.73-1.73-1.73h-13.31c-.96 0-1.73-.77-1.73-1.73v-27.64a1.33 1.33 0 0 0-2.27-.94l-32.61 32.61c-.34.34-.52.79-.53 1.27v13.49c0 .96.78 1.73 1.73 1.73h10.3c.96 0 1.73.78 1.73 1.73v33.17c0 13.93 6.04 24.66 22.48 24.66 5.75-.09 11.48-.7 17.12-1.84.79-.18 1.34-.88 1.34-1.69v-15.83c0-.95-.77-1.73-1.73-1.73-.06 0-.13 0-.19.01" class="cls-grey" data-name="Path 140"/>
        <path id="Path_141" d="M389.1 136.22c-23.83 0-36.24 18.46-36.24 39.94 0 23.32 11.74 40.1 38.76 40.1 9.37-.17 18.59-2.43 26.98-6.6a2.88 2.88 0 0 0 1.4-3.67l-4.89-11.76a2.828 2.828 0 0 0-3.68-1.55c-.03.01-.06.03-.1.04a46.48 46.48 0 0 1-19.54 4.4c-8.43 0-13.69-3.65-15.28-10.01a2.872 2.872 0 0 1 2.76-3.58h39.07c1.39 0 2.58-1.01 2.81-2.38.64-3.76.97-7.57 1-11.38 0-16.61-8.89-33.56-33.06-33.56m11.92 31.22h-21.52c-1.59 0-2.86-1.3-2.86-2.88 0-.22.03-.45.08-.66 1.32-5.55 5.01-9.71 12.39-9.71 5.87 0 12.08 3.19 12.08 11.24 0 .68-.05 1.35-.17 2.01" class="cls-grey" data-name="Path 141"/>
        <path id="Path_142" d="M494.12 136.68c-3.27-.34-7.18-.46-9.88-.46-7.5 0-14.29 6.18-18.26 12.09-.56.8-1.66 1-2.46.44-.48-.33-.76-.88-.75-1.46v-7.62c0-.98-.79-1.77-1.77-1.77h-27.17c-.98 0-1.77.79-1.77 1.77v15.25c0 .98.79 1.77 1.77 1.77h7.2c.98 0 1.77.79 1.77 1.77v34.35c0 .77-.5 1.46-1.24 1.69l-8.26 2.58c-.74.23-1.24.92-1.24 1.69v13.88c0 .98.79 1.77 1.77 1.77h45.12c.98 0 1.77-.79 1.77-1.77v-15.09c0-.98-.79-1.77-1.77-1.77h-12.74c-.98 0-1.77-.79-1.77-1.77v-26.5c0-.39.12-.76.34-1.08 3.05-4.19 8.35-6.69 15.02-7.22.16-.01.32 0 .48.02l11.93 1.99c.96.16 1.88-.49 2.04-1.45 0-.06.02-.11.02-.17l1.43-21.04c.07-.95-.63-1.79-1.59-1.89" class="cls-grey" data-name="Path 142"/>
        <path id="Path_143" d="m544.81 168.27-11.41-3.52c-5.2-1.68-5.87-4.03-5.87-6.88 0-3.52 2.51-6.37 7.55-6.37 2.79-.07 5.57.38 8.19 1.32.55.22.96.69 1.11 1.26l1.75 6.61c.21.81.95 1.37 1.78 1.37h13.85c1.02 0 1.85-.83 1.85-1.85v-17.74c0-.74-.43-1.41-1.11-1.7-6.7-2.75-17.75-4.55-27.59-4.55-25.17 0-31.71 13.59-31.71 24.33 0 11.75 6.71 19.3 20.64 23.66l12.25 3.86c4.03 1.34 5.7 4.2 5.7 6.71 0 4.2-3.19 6.55-8.39 6.55-3.3.05-6.58-.52-9.67-1.68-.48-.21-.84-.62-1-1.12l-2.51-7.52a1.85 1.85 0 0 0-1.75-1.26h-13.83c-1.02 0-1.85.83-1.85 1.85v.1l1 18.34c.04.73.5 1.37 1.17 1.63 7.92 3.06 16.57 4.59 28.59 4.59 25.84 0 32.89-12.75 32.89-24.16 0-12.08-6.88-19.29-21.65-23.83" class="cls-grey" data-name="Path 143"/>
      </g>
    </g>
    <g id="Mountain">
      <path id="Path_144" d="M561.94 132.06c.77 0 1.39-.62 1.39-1.39v-4.74c0-.77-.62-1.39-1.39-1.39H378.57c-17.17 0-25.27-4.31-25.69-8.59-.47-4.77 8.22-13.69 28.35-17.67 59.15-11.69 73.79-35.26 74.38-36.26l.94-1.58c.33-.55.24-1.25-.21-1.7L410.29 12.7c-.54-.54-1.42-.54-1.96 0l-74.02 74.02c-.26.26-.41.61-.41.98v6.69a1.387 1.387 0 0 0 2.37.98l72.06-72.06c.54-.54 1.42-.54 1.96 0l36.15 36.15c.53.53.55 1.39.03 1.94a61.854 61.854 0 0 1-10.92 8.9c-17.12 11.29-39.78 17.42-55.78 20.58-21.31 4.21-35.44 14.81-34.37 25.77.45 4.62 4.59 15.37 33.17 15.37h183.37Z" class="cls-grey" data-name="Path 144"/>
      <path id="Path_145" d="M412.54 94.81c-9.41 4.1-14.6 6.36-14.6 11.15 0 6.46 9.62 7.34 31.56 7.81 2.43.05 4.53.1 6.1.17 15.2.67 114.96.17 126.85.11.64 0 1.16-.53 1.16-1.17v-7.74c0-.31-.12-.61-.34-.82l-71.3-71.3c-.45-.45-1.19-.46-1.65 0l-1.83 1.81c-.17.17-16.96 16.77-33.8 33.61-14.2 14.2-31.01 21.53-42.13 26.37m77.74-51.19c.46-.45 1.19-.45 1.64 0l61 61c.46.45.47 1.19.02 1.65-.22.22-.52.35-.83.35-37.73.21-101.8.46-116.18-.18-1.66-.07-3.8-.12-6.27-.17-3.77-.08-11.41-.24-17.33-.76a1.168 1.168 0 0 1-.37-2.23c1.18-.53 2.4-1.06 3.58-1.57 11.64-5.07 29.24-12.74 44.45-27.95 12.26-12.26 24.49-24.39 30.29-30.14" class="cls-grey" data-name="Path 145"/>
    </g>
  </g>
  <g id="Animation" clip-path="url(#clippath)">
    <circle id="Sun" cx="443.17" cy="27.69" r="19.7" transform="translate(0 0)"/>
    <circle id="Moon" cx="443.17" cy="27.69" r="17" transform="translate(0 0)"/>
  </g>
</svg>
  </div></div>
</div>

script.js

document.addEventListener('DOMContentLoaded', function() {
    const mapboxAccessToken = 'pk.eyJ1Ijoid2F0c29uY3JlYXRpdmVjb20iLCJhIjoiY2x3MHk1bGhyMDYzNDJtcGY0bXdudXo1diJ9.rsyIaccdx28qBdPHEzSoSQ';
    mapboxgl.accessToken = mapboxAccessToken;
    const initialPitch = 0;
    const initialBearing = 0;
    let lastPitch = initialPitch;
    let lastBearing = initialBearing;
    const smoothingFactor = 0.3; // Adjust this value to increase or decrease smoothing

    const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/watsoncreativecom/clw0y7kxn01x601q11b97bx7p',
        center: [-121.7625815, 46.8529532],
        zoom: 14.75,
        pitch: initialPitch,
        bearing: initialBearing,
        interactive: false
    });

    map.boxZoom.disable();
    map.doubleClickZoom.disable();
    map.dragPan.disable();
    map.dragRotate.disable();
    map.keyboard.disable();
    map.scrollZoom.disable();
    map.touchZoomRotate.disable();

    // Function to update the map's pitch and bearing based on mouse position
    function handleMouseMove(e) {
        const x = e.point.x;
        const y = e.point.y;
        const newPitch = initialPitch + (y - window.innerHeight / 2) / 100;
        const newBearing = initialBearing + (x - window.innerWidth / 2) / 100;

        map.setPitch(newPitch);
        map.setBearing(newBearing);
    }

    // Function to request permission for device orientation events on iOS 13+
    function requestPermission() {
        DeviceMotionEvent.requestPermission().then(response => {
            if (response === 'granted') {
                window.addEventListener('deviceorientation', handleOrientation);
            } else {
                console.log('Permission denied for Device Orientation');
            }
        }).catch(console.error);
    }

    // Function to update the map's pitch and bearing based on device orientation
    function handleOrientation(event) {
        const alpha = event.alpha;
        const beta = event.beta;
        const gamma = event.gamma;

        const targetPitch = initialPitch + (beta - 45) / 180 * 90;
        const targetBearing = initialBearing + gamma / 180 * 90;

        // Apply smoothing
        lastPitch = lastPitch + (targetPitch - lastPitch) * smoothingFactor;
        lastBearing = lastBearing + (targetBearing - lastBearing) * smoothingFactor;

        map.setPitch(lastPitch);
        map.setBearing(lastBearing);
    }

    // Desktop interactions
    map.on('mousemove', handleMouseMove);

    // Mobile interactions
    if (typeof DeviceMotionEvent !== 'undefined' && typeof DeviceMotionEvent.requestPermission === 'function') {
        document.body.addEventListener('click', requestPermission);
    } else {
        window.addEventListener('deviceorientation', handleOrientation);
    }
});

style.css

*, html, body {
  padding: 0;
  margin: 0;
}
html, body {
  height: 100%;
  width: 100%; 
  background: #0C3D32;
  display: flex;
  align-items: center;
  justify-content: center;
}
#container {
  position: relative;
  width: 100vw;
  height: 100vh;
}

#map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* This line allows mouse events to pass through the overlay */
  display: flex;
  justify-content: center;
  align-items: center;
}

#map, div.mapboxgl-control-container {
  cursor: default !important;
}

#map > div.mapboxgl-control-container > div.mapboxgl-ctrl-bottom-left,
#map > div.mapboxgl-control-container > div.mapboxgl-ctrl-bottom-right {
  display: none !important;
}

h1 {
  color: white;
  font-size: 10vw;
  pointer-events: auto; /* This line enables mouse events for the h1 element */
}

.box {
  width: 25vw;
}
.box svg {
  width: 100%;
  height: auto;
}
.cls-none {
  fill: none;
}
.cls-law {
  transition: fill 0.5s ease-in-out;
}
.cls-grey {
  fill: #f2efee;
}
.cls-isolate {
  isolation: isolate;
}
#Moon, #Sun, .cls-law {
  fill: #faa41a;
}