Created
July 4, 2025 02:00
-
-
Save tveimo/d54c3b2a74fe14ad317f486fc1b9d6e4 to your computer and use it in GitHub Desktop.
ArcGIS JS SDK simple globe example with gray basemap
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
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"/> | |
| <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/> | |
| <title>Globe</title> | |
| <link rel="stylesheet" href="https://js.arcgis.com/4.33/esri/themes/light/main.css"/> | |
| <script src="https://js.arcgis.com/4.33/"></script> | |
| <style> | |
| html, | |
| body, | |
| #viewDiv { | |
| height: 100%; | |
| width: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| </style> | |
| <script type="module"> | |
| const [ | |
| WebScene, | |
| SceneView, | |
| Locate, | |
| Home, | |
| ] = await $arcgis.import([ | |
| "@arcgis/core/WebScene.js", | |
| "@arcgis/core/views/SceneView.js", | |
| "@arcgis/core/widgets/Locate.js", | |
| "@arcgis/core/widgets/Home.js", | |
| ]); | |
| const webscene = new WebScene({ | |
| basemap: "gray", // "gray-3d" to show buildings | |
| ground: "world-elevation", | |
| }); | |
| const view = new SceneView({ | |
| container: "viewDiv", | |
| map: webscene, | |
| }); | |
| window.view = view; | |
| view.ui.add({component: new Home({view}), position: "top-left"}); | |
| view.ui.add({component: new Locate({view}), position: "top-left"}); | |
| </script> | |
| </head> | |
| <body> | |
| <div id="viewDiv"/> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment