Created
July 6, 2022 20:42
-
-
Save darrenwiens/d2ff20882c592f2f6ef3be54f0c55c49 to your computer and use it in GitHub Desktop.
Transparent Mapbox Globe
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment