darrenwiens/index.html

## index.html
Blog: https://darrenwiens.github.io/transparent-mapbox-globe.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Transparent Globe</title>
    <link
      href="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css"
      rel="stylesheet"
    />
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      #mapA {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        opacity: 0.65;
        z-index: 1;
      }
      #mapB {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        opacity: 0.5;
        transform: scaleX(-1);
      }
    </style>
  </head>

  <body>
    <div id="mapA" class="map"></div>
    <div id="mapB" class="map"></div>
    <script>
      mapboxgl.accessToken =
        "<YOUR_MAPBOX_ACCESS_TOKEN>";
      let style = "<A_MAPBOX_STYLE>";

      let mapA = new mapboxgl.Map({
        container: "mapA",
        style: style,
        center: [0, 0],
        projection: "globe",
        zoom: 0,
        dragRotate: false,
        pitchWithRotate: false,
        touchPitch: false,
        touchZoomRotate: false,
      });
      let mapB = new mapboxgl.Map({
        container: "mapB",
        style: style,
        center: [180, 0],
        projection: "globe",
        zoom: 0,
        dragRotate: false,
        pitchWithRotate: false,
        touchPitch: false,
        touchZoomRotate: false,
        attributionControl: false,
      });

      function flipCoords(lnglat) {
        let lat = -lnglat.lat;
        let lng = lnglat.lng + 180;
        return new mapboxgl.LngLat(lng, lat);
      }

      function matchZoom(zoom) {
        mapB.setZoom(zoom);
      }

      mapA.on("move", function (data) {
        mapB.setCenter(flipCoords(mapA.getCenter()));
      });

      mapA.on("zoom", function (data) {
        let curZoom = mapA.getZoom();
        matchZoom(curZoom);
        let mapBDiv = document.getElementById("mapB");
        mapBDiv.style.opacity = (1 - curZoom / 7) * 0.5;
      });

      mapA.on("load", () => {
        mapA.setFog({});
        matchZoom(mapA.getZoom());
      });
    </script>
  </body>
</html>
	Blog: https://darrenwiens.github.io/transparent-mapbox-globe.html

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta
	name="viewport"
	content="initial-scale=1,maximum-scale=1,user-scalable=no"
	/>
	<title>Transparent Globe</title>
	<link
	href="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css"
	rel="stylesheet"
	/>
	<script src="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js"></script>
	<style>
	body {
	margin: 0;
	padding: 0;
	}
	#mapA {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	opacity: 0.65;
	z-index: 1;
	}
	#mapB {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 100%;
	opacity: 0.5;
	transform: scaleX(-1);
	}
	</style>
	</head>

	<body>
	<div id="mapA" class="map"></div>
	<div id="mapB" class="map"></div>
	<script>
	mapboxgl.accessToken =
	"<YOUR_MAPBOX_ACCESS_TOKEN>";
	let style = "<A_MAPBOX_STYLE>";

	let mapA = new mapboxgl.Map({
	container: "mapA",
	style: style,
	center: [0, 0],
	projection: "globe",
	zoom: 0,
	dragRotate: false,
	pitchWithRotate: false,
	touchPitch: false,
	touchZoomRotate: false,
	});
	let mapB = new mapboxgl.Map({
	container: "mapB",
	style: style,
	center: [180, 0],
	projection: "globe",
	zoom: 0,
	dragRotate: false,
	pitchWithRotate: false,
	touchPitch: false,
	touchZoomRotate: false,
	attributionControl: false,
	});

	function flipCoords(lnglat) {
	let lat = -lnglat.lat;
	let lng = lnglat.lng + 180;
	return new mapboxgl.LngLat(lng, lat);
	}

	function matchZoom(zoom) {
	mapB.setZoom(zoom);
	}

	mapA.on("move", function (data) {
	mapB.setCenter(flipCoords(mapA.getCenter()));
	});

	mapA.on("zoom", function (data) {
	let curZoom = mapA.getZoom();
	matchZoom(curZoom);
	let mapBDiv = document.getElementById("mapB");
	mapBDiv.style.opacity = (1 - curZoom / 7) * 0.5;
	});

	mapA.on("load", () => {
	mapA.setFog({});
	matchZoom(mapA.getZoom());
	});
	</script>
	</body>
	</html>