Last active
January 30, 2024 14:28
-
-
Save stepankuzmin/5858e404d1c382460179707543fdce77 to your computer and use it in GitHub Desktop.
Overlay 3D buildings with the Satellite layer in the Standard Style with Mapbox GL JS v3
This file contains 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Display a map on a webpage</title> | |
| <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"> | |
| <link href="https://api.mapbox.com/mapbox-gl-js/v3.1.2/mapbox-gl.css" rel="stylesheet"> | |
| <script src="https://api.mapbox.com/mapbox-gl-js/v3.1.2/mapbox-gl.js"></script> | |
| <style> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #map { | |
| position: absolute; | |
| top: 0; | |
| bottom: 0; | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="map"></div> | |
| <script> | |
| // TO MAKE THE MAP APPEAR YOU MUST | |
| // ADD YOUR ACCESS TOKEN FROM | |
| // https://account.mapbox.com | |
| mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'; | |
| const map = new mapboxgl.Map({ | |
| container: 'map', // container ID | |
| center: [-74.5, 40], // starting position [lng, lat] | |
| zoom: 9 // starting zoom | |
| }); | |
| map.on('style.load', () => { | |
| // Disable Terrain to disable draping | |
| map.setTerrain(null); | |
| // Add Satellite layer | |
| map.addLayer({ | |
| "id": "satellite", | |
| "type": "raster", | |
| "slot": "top", | |
| "source": { | |
| "type": "raster", | |
| "url": "mapbox://mapbox.satellite", | |
| "tileSize": 256 | |
| }, | |
| "source-layer": "mapbox_satellite_full" | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment