{"id":593272,"date":"2019-08-26T10:06:47","date_gmt":"2019-08-26T17:06:47","guid":{"rendered":"https:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=593272"},"modified":"2020-06-08T09:02:54","modified_gmt":"2020-06-08T16:02:54","slug":"interactive-3d-globe","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/interactive-3d-globe","title":{"rendered":"An interactive 3D globe of extremes – a DIY mapping\u00a0guide"},"author":7011,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[23771,22941],"tags":[25781,454292,549072,24921,29401],"industry":[],"product":[36831],"class_list":["post-593272","blog","type-blog","status-publish","format-standard","hentry","category-3d-gis","category-mapping","tag-3d","tag-3d-globe","tag-esrirdzurich","tag-javascript","tag-web","product-js-api-arcgis"],"acf":{"short_description":"A tutorial on how to create an interactive 3D globe using ArcGIS API for JavaScript.","flexible_content":[{"acf_fc_layout":"content","content":"

Some months ago I worked with John Nelson on an interactive 3D globe and the project turned out really nicely, so I’ve written a blog post that shows how to create this globe using ArcGIS API for JavaScript.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":593382,"id":593382,"title":"screenshot","filename":"screenshot.png","filesize":321781,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/screenshot.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/interactive-3d-globe\/screenshot-13","alt":"Screenshot of the interactive 3D globe","author":"7011","description":"","caption":"The globe of extremes","name":"screenshot-13","status":"inherit","uploaded_to":593272,"date":"2019-08-24 19:29:54","modified":"2019-08-26 16:49:42","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1589,"height":959,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/screenshot-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/screenshot.png","medium-width":432,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/screenshot.png","medium_large-width":768,"medium_large-height":464,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/screenshot.png","large-width":1589,"large-height":959,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/screenshot.png","1536x1536-width":1536,"1536x1536-height":927,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/screenshot.png","2048x2048-width":1589,"2048x2048-height":959,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/screenshot-770x465.png","card_image-width":770,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/screenshot.png","wide_image-width":1589,"wide_image-height":959}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/ralucanicola.github.io\/the-globe-of-extremes"},{"acf_fc_layout":"content","content":"

John Nelson worked with Vizzuality<\/a> on the Half Earth project<\/a> and in that process he created a basemap prototype that we\u2019ll use in this tutorial. You can read all about it in his blog post<\/a> (or as John would put it, don’t read it!). For the globe we were inspired by the Half-Earth globe<\/a> as well as this beautiful virtual globe<\/a> and this awesome hand-crafted<\/a> globe. In this blog post we\u2019ll show you step by step how to create this interactive 3D globe:<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":593282,"id":593282,"title":"Overview-steps","filename":"Overview-steps.png","filesize":114004,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Overview-steps.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/interactive-3d-globe\/overview-steps","alt":"","author":"7011","description":"","caption":"","name":"overview-steps","status":"inherit","uploaded_to":593272,"date":"2019-08-24 19:01:57","modified":"2019-08-24 19:01:57","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1107,"height":490,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Overview-steps-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Overview-steps.png","medium-width":464,"medium-height":205,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Overview-steps.png","medium_large-width":768,"medium_large-height":340,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Overview-steps.png","large-width":1107,"large-height":490,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Overview-steps.png","1536x1536-width":1107,"1536x1536-height":490,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Overview-steps.png","2048x2048-width":1107,"2048x2048-height":490,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Overview-steps-826x366.png","card_image-width":826,"card_image-height":366,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/Overview-steps.png","wide_image-width":1107,"wide_image-height":490}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"

Before we get started with the tutorial, the repository for this app is here<\/a> and each commit corresponds to one step in the tutorial. Click on “see the code” to see the corresponding commit on Github.<\/p>\n"},{"acf_fc_layout":"content","content":"

Step 1: where we create a globe with a custom basemap<\/h2>\n

See the code<\/a><\/p>\n

We start off with a basic setup: we have an HTML page where we initialize a Map<\/a> and a SceneView<\/a> that renders the map. Additionally, in the CSS page we set the map container to cover the whole screen.<\/p>\n

The important part here is adding the TileLayer<\/a> that John created as part of the basemap:<\/p>\n"},{"acf_fc_layout":"content","content":"

\r\nconst<\/span> basemap = new<\/span> Basemap({\r\n  baseLayers: [\r\n    new<\/span> TileLayer({\r\n       url: \"https:\/\/tiles.arcgis.com\/tiles\/...\/MapServer\"<\/span>\r\n    })\r\n  ]\r\n});\r\n\r\nconst<\/span> map = new<\/span> Map<\/span>({\r\n  basemap: basemap\r\n});\r\n\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"image","image":{"ID":593292,"id":593292,"title":"step1","filename":"step1.png","filesize":14178,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step1.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/interactive-3d-globe\/step1-3","alt":"step 1 - globe","author":"7011","description":"","caption":"Globe after step 1","name":"step1-3","status":"inherit","uploaded_to":593272,"date":"2019-08-24 19:07:33","modified":"2019-08-24 19:07:59","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":261,"height":215,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step1-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step1.png","medium-width":261,"medium-height":215,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step1.png","medium_large-width":261,"medium_large-height":215,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step1.png","large-width":261,"large-height":215,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step1.png","1536x1536-width":261,"1536x1536-height":215,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step1.png","2048x2048-width":261,"2048x2048-height":215,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step1.png","card_image-width":261,"card_image-height":215,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step1.png","wide_image-width":261,"wide_image-height":215}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/github.com\/RalucaNicola\/the-globe-of-extremes\/commit\/c229b4ae14cf6a6614130372849db401d0af88b6"},{"acf_fc_layout":"content","content":"
Step 3: where we exaggerate\u2026 the terrain<\/h2>\n
See the code<\/a><\/p>\n"},{"acf_fc_layout":"content","content":"
In this map we\u2019ll show the highest and the lowest points on Earth, but with the real elevation values you can barely see any changes in the terrain height. To solve that, we\u2019ll exaggerate both land and ocean surface elevation. We\u2019ll use the Topobathy elevation service<\/a> provided by Esri to have access to world elevation data.<\/p>\n
With this technique, the 3D perception of terrain increases considerably as we exaggerate the elevation:<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":593312,"id":593312,"title":"exaggerated-elevation","filename":"exaggerated-elevation.png","filesize":152951,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/exaggerated-elevation.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/interactive-3d-globe\/exaggerated-elevation","alt":"exaggerated elevation","author":"7011","description":"","caption":"Example of exaggerated elevation","name":"exaggerated-elevation","status":"inherit","uploaded_to":593272,"date":"2019-08-24 19:12:03","modified":"2019-08-24 19:12:27","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1043,"height":386,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/exaggerated-elevation-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/exaggerated-elevation.png","medium-width":464,"medium-height":172,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/exaggerated-elevation.png","medium_large-width":768,"medium_large-height":284,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/exaggerated-elevation.png","large-width":1043,"large-height":386,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/exaggerated-elevation.png","1536x1536-width":1043,"1536x1536-height":386,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/exaggerated-elevation.png","2048x2048-width":1043,"2048x2048-height":386,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/exaggerated-elevation-826x306.png","card_image-width":826,"card_image-height":306,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/exaggerated-elevation.png","wide_image-width":1043,"wide_image-height":386}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
Exaggerating the elevation layer can be done in the API by extending the BaseElevationLayer<\/a>. In the fetchTile()<\/a> method we multiply the elevation of each data value with the exaggeration value. After playing around with several values we decided on 60 times larger for values above 0 meters and 40 times smaller for values below 0 meters.<\/p>\n"},{"acf_fc_layout":"content","content":"
\r\nfunction<\/span> fetchTile<\/span>(level, row, col) {\r\n  return<\/span> this<\/span>._elevation.fetchTile(level, row, col).then(\r\n    function<\/span>(data) {\r\n      for<\/span> (let<\/span> i = 0<\/span>; i < data.values.length; i++) {\r\n        if<\/span> (data.values[i] >= 0<\/span>) {\r\n          data.values[i] = data.values[i] * 60<\/span>;\r\n        }\r\n        else<\/span> {\r\n          data.values[i] = data.values[i] * 40<\/span>;\r\n        }\r\n      }\r\n      return<\/span> data;\r\n    }.bind(this<\/span>));\r\n}\r\n\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"image","image":{"ID":593362,"id":593362,"title":"step3","filename":"step3.png","filesize":22006,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step3.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/interactive-3d-globe\/step3","alt":"step 3 - globe","author":"7011","description":"","caption":"Globe after step 3","name":"step3","status":"inherit","uploaded_to":593272,"date":"2019-08-24 19:24:27","modified":"2019-08-24 19:24:42","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":264,"height":213,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step3-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step3.png","medium-width":264,"medium-height":213,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step3.png","medium_large-width":264,"medium_large-height":213,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step3.png","large-width":264,"large-height":213,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step3.png","1536x1536-width":264,"1536x1536-height":213,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step3.png","2048x2048-width":264,"2048x2048-height":213,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step3.png","card_image-width":264,"card_image-height":213,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step3.png","wide_image-width":264,"wide_image-height":213}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/github.com\/RalucaNicola\/the-globe-of-extremes\/commit\/59a32f4519368b9e8e3687890194bffa1c925ad3"},{"acf_fc_layout":"content","content":"
Step 4: where we add a shiny ocean surface<\/h2>\n
See the code<\/a><\/p>\n
John had this cool idea of adding a glassy, semi-transparent surface as the ocean surface, a bit like in this globe<\/a>. Currently, specular reflection is supported in the API for GLTF<\/a> models and for Mesh geometries<\/a>.\u00a0 So we created a sphere using an utility method called Mesh.createSphere()<\/a>. Besides the size and the location where the sphere should be placed, we’re also setting the material. A MeshMaterialMetallicRoughness<\/a> allows us to set the metallic<\/a> and roughness<\/a> properties that will make the surface of the sphere look shiny. The sphere also is semi-transparent so that we can see the ocean floor through it:<\/p>\n"},{"acf_fc_layout":"content","content":"
\r\nconst<\/span> origin = new<\/span> Point({\r\n  x: 0<\/span>, y: -90<\/span>, z: -(2<\/span> * R)\r\n});\r\n\r\nconst<\/span> oceanSurfaceMesh = Mesh.createSphere(\r\n  origin, {\r\n  size: {\r\n    width: 2<\/span> * R,\r\n    depth: 2<\/span> * R,\r\n    height: 2<\/span> * R\r\n  },\r\n  densificationFactor: 5<\/span>,\r\n  material: {\r\n    color: [0<\/span>, 210<\/span>, 210<\/span>, 0.8<\/span>],\r\n    metallic: 0.9<\/span>,\r\n    roughness: 0.8<\/span>,\r\n    doubleSided: false<\/span>\r\n  }\r\n});\r\n\r\nconst<\/span> oceanSurfaceGraphic = new<\/span> Graphic({\r\n  geometry: oceanSurfaceMesh,\r\n  symbol: {\r\n    type: \"mesh-3d\"<\/span>,\r\n    symbolLayers: [{\r\n      type: \"fill\"<\/span>\r\n    }]\r\n  }\r\n});\r\n\r\nview.graphics.add(oceanSurfaceGraphic);\r\n\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"image","image":{"ID":593322,"id":593322,"title":"step4","filename":"step4.png","filesize":20194,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step4.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/interactive-3d-globe\/step4","alt":"step 4 - globe","author":"7011","description":"","caption":"Globe after step 4","name":"step4","status":"inherit","uploaded_to":593272,"date":"2019-08-24 19:17:53","modified":"2019-08-24 19:18:11","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":269,"height":216,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step4-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step4.png","medium-width":269,"medium-height":216,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step4.png","medium_large-width":269,"medium_large-height":216,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step4.png","large-width":269,"large-height":216,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step4.png","1536x1536-width":269,"1536x1536-height":216,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step4.png","2048x2048-width":269,"2048x2048-height":216,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step4.png","card_image-width":269,"card_image-height":216,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step4.png","wide_image-width":269,"wide_image-height":216}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/github.com\/RalucaNicola\/the-globe-of-extremes\/blob\/master\/index.html#L108"},{"acf_fc_layout":"content","content":"
Step 6: where we collect and display the extreme points<\/h2>\n
See the code<\/a><\/p>\n
This was the tedious part of this project: actual data collection. The main resource was this wikipedia article<\/a> of extreme points on Earth. There\u2019s no magic going on here, after some online research, we manually created a GeoJSON file<\/a> with the points and loaded it in our app as a GeoJSONLayer<\/a>. For this globe we need some symbols that stand out, so we created a PointSymbol3D<\/a> with two IconSymbol3DLayers<\/a> representing concentric circles. When clicking on an icon a popup shows up, displaying the information stored in the GeoJSON file. We docked the popup in the upper right corner and we applied some custom CSS to style it.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":593342,"id":593342,"title":"step6","filename":"step6.png","filesize":21539,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step6.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/interactive-3d-globe\/step6","alt":"step 6 - globe","author":"7011","description":"","caption":"Globe after step 6","name":"step6","status":"inherit","uploaded_to":593272,"date":"2019-08-24 19:20:50","modified":"2019-08-24 19:21:06","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":274,"height":218,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step6-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step6.png","medium-width":274,"medium-height":218,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step6.png","medium_large-width":274,"medium_large-height":218,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step6.png","large-width":274,"large-height":218,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step6.png","1536x1536-width":274,"1536x1536-height":218,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step6.png","2048x2048-width":274,"2048x2048-height":218,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step6.png","card_image-width":274,"card_image-height":218,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step6.png","wide_image-width":274,"wide_image-height":218}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/github.com\/RalucaNicola\/the-globe-of-extremes\/commit\/97773d44eb1a1ee0adfbfddbb710b144a515950b"},{"acf_fc_layout":"content","content":"
Step 7: where we create the Intro page\u2728<\/h2>\n
See the code<\/a><\/p>\n
As an \u201cIntro\u201d page we want to have a message that tells the user what the app is about. The globe shouldn\u2019t be too distracting, so we\u2019re going to blur the globe using a css filter<\/a> while the intro message is displayed. Once the user clicks on Go to globe<\/code> the globe starts spinning to show the user that they can interact with it.<\/p>\n
In this step we\u2019ll also add an \u201cAbout\u201d page (which is technically the same as the \u201cIntro\u201d page with different content) to give the user more information about the data and the tools that were used to build this app.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":593352,"id":593352,"title":"step7","filename":"step7.png","filesize":13049,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step7.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/interactive-3d-globe\/step7","alt":"step 7 - globe","author":"7011","description":"","caption":"Globe after step 7","name":"step7","status":"inherit","uploaded_to":593272,"date":"2019-08-24 19:22:17","modified":"2019-08-24 19:22:35","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":270,"height":220,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step7-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step7.png","medium-width":270,"medium-height":220,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step7.png","medium_large-width":270,"medium_large-height":220,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step7.png","large-width":270,"large-height":220,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step7.png","1536x1536-width":270,"1536x1536-height":220,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step7.png","2048x2048-width":270,"2048x2048-height":220,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step7.png","card_image-width":270,"card_image-height":220,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step7.png","wide_image-width":270,"wide_image-height":220}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/github.com\/RalucaNicola\/the-globe-of-extremes\/commit\/54918b4a8d844d460ab2070f3c123e7b43f0cb76"},{"acf_fc_layout":"content","content":"
And that\u2019s all there is to it! Have fun exploring our globe<\/a> and we look forward to see what it inspired you to build!<\/p>\n"}],"authors":[{"ID":7011,"user_firstname":"Raluca","user_lastname":"Nicola","nickname":"Raluca Nicola","user_nicename":"raluca_zurich","display_name":"Raluca Nicola","user_email":"RNicola@esri.com","user_url":"https:\/\/raluca-nicola.net\/","user_registered":"2018-03-02 00:19:07","user_description":"Raluca works as a web cartographer with the Geo Experience Center team at Esri. She loves to play around with web technologies and visualization styles. If she's not in front of the computer, she's probably somewhere up in the mountains.","user_avatar":""}],"related_articles":"","card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/card-1.png","wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/banner-1.jpg"},"yoast_head":"\nAn interactive 3D globe of extremes - a DIY mapping\u00a0guide<\/title>\n<meta name=\"description\" content=\"A tutorial on how to create an interactive 3D globe using ArcGIS API for JavaScript\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/interactive-3d-globe\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"An interactive 3D globe of extremes - a DIY mapping\u00a0guide\" \/>\n<meta property=\"og:description\" content=\"A tutorial on how to create an interactive 3D globe using ArcGIS API for JavaScript\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/interactive-3d-globe\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2020-06-08T16:02:54+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/interactive-3d-globe#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/interactive-3d-globe\"},\"author\":{\"name\":\"Raluca Nicola\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/e8fe39abb687cde59f7f1296fbfb24a4\"},\"headline\":\"An interactive 3D globe of extremes – a DIY mapping\u00a0guide\",\"datePublished\":\"2019-08-26T17:06:47+00:00\",\"dateModified\":\"2020-06-08T16:02:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/interactive-3d-globe\"},\"wordCount\":11,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"3D\",\"3D globe\",\"EsriRDZurich\",\"JavaScript\",\"web\"],\"articleSection\":[\"3D Visualization & Analytics\",\"Mapping\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/interactive-3d-globe\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/interactive-3d-globe\",\"name\":\"An interactive 3D globe of extremes - a DIY mapping\u00a0guide\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2019-08-26T17:06:47+00:00\",\"dateModified\":\"2020-06-08T16:02:54+00:00\",\"description\":\"A tutorial on how to create an interactive 3D globe using ArcGIS API for JavaScript\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/interactive-3d-globe#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/interactive-3d-globe\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/interactive-3d-globe#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"An interactive 3D globe of extremes – a DIY mapping\u00a0guide\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/e8fe39abb687cde59f7f1296fbfb24a4\",\"name\":\"Raluca Nicola\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/7VkWXsZ3_400x400.jpg\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/7VkWXsZ3_400x400.jpg\",\"caption\":\"Raluca Nicola\"},\"description\":\"Raluca works as a web cartographer with the Geo Experience Center team at Esri. She loves to play around with web technologies and visualization styles. If she's not in front of the computer, she's probably somewhere up in the mountains.\",\"sameAs\":[\"https:\/\/raluca-nicola.net\/\",\"https:\/\/www.linkedin.com\/in\/raluca-nicola-cartography\/\",\"https:\/\/x.com\/nicolaraluk\"],\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/raluca_zurich\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"An interactive 3D globe of extremes - a DIY mapping\u00a0guide","description":"A tutorial on how to create an interactive 3D globe using ArcGIS API for JavaScript","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/interactive-3d-globe","og_locale":"en_US","og_type":"article","og_title":"An interactive 3D globe of extremes - a DIY mapping\u00a0guide","og_description":"A tutorial on how to create an interactive 3D globe using ArcGIS API for JavaScript","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/interactive-3d-globe","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2020-06-08T16:02:54+00:00","twitter_card":"summary_large_image","twitter_site":"@ESRI","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/interactive-3d-globe#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/interactive-3d-globe"},"author":{"name":"Raluca Nicola","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/e8fe39abb687cde59f7f1296fbfb24a4"},"headline":"An interactive 3D globe of extremes – a DIY mapping\u00a0guide","datePublished":"2019-08-26T17:06:47+00:00","dateModified":"2020-06-08T16:02:54+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/interactive-3d-globe"},"wordCount":11,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["3D","3D globe","EsriRDZurich","JavaScript","web"],"articleSection":["3D Visualization & Analytics","Mapping"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/interactive-3d-globe","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/interactive-3d-globe","name":"An interactive 3D globe of extremes - a DIY mapping\u00a0guide","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2019-08-26T17:06:47+00:00","dateModified":"2020-06-08T16:02:54+00:00","description":"A tutorial on how to create an interactive 3D globe using ArcGIS API for JavaScript","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/interactive-3d-globe#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/interactive-3d-globe"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/interactive-3d-globe#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"An interactive 3D globe of extremes – a DIY mapping\u00a0guide"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/e8fe39abb687cde59f7f1296fbfb24a4","name":"Raluca Nicola","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/7VkWXsZ3_400x400.jpg","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/7VkWXsZ3_400x400.jpg","caption":"Raluca Nicola"},"description":"Raluca works as a web cartographer with the Geo Experience Center team at Esri. She loves to play around with web technologies and visualization styles. If she's not in front of the computer, she's probably somewhere up in the mountains.","sameAs":["https:\/\/raluca-nicola.net\/","https:\/\/www.linkedin.com\/in\/raluca-nicola-cartography\/","https:\/\/x.com\/nicolaraluk"],"url":"https:\/\/www.esri.com\/arcgis-blog\/author\/raluca_zurich"}]}},"text_date":"August 26, 2019","author_name":"Raluca Nicola","author_page":"https:\/\/www.esri.com\/arcgis-blog\/author\/raluca_zurich","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/banner-1.jpg","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":25781,"name":"3D","slug":"3d","term_group":0,"term_taxonomy_id":25781,"taxonomy":"post_tag","description":"","parent":0,"count":342,"filter":"raw"},{"term_id":454292,"name":"3D globe","slug":"3d-globe","term_group":0,"term_taxonomy_id":454292,"taxonomy":"post_tag","description":"","parent":0,"count":10,"filter":"raw"},{"term_id":549072,"name":"EsriRDZurich","slug":"esrirdzurich","term_group":0,"term_taxonomy_id":549072,"taxonomy":"post_tag","description":"","parent":0,"count":96,"filter":"raw"},{"term_id":24921,"name":"JavaScript","slug":"javascript","term_group":0,"term_taxonomy_id":24921,"taxonomy":"post_tag","description":"","parent":0,"count":151,"filter":"raw"},{"term_id":29401,"name":"web","slug":"web","term_group":0,"term_taxonomy_id":29401,"taxonomy":"post_tag","description":"","parent":0,"count":17,"filter":"raw"}],"category_data":[{"term_id":23771,"name":"3D Visualization & Analytics","slug":"3d-gis","term_group":0,"term_taxonomy_id":23771,"taxonomy":"category","description":"","parent":0,"count":686,"filter":"raw"},{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2690,"filter":"raw"}],"product_data":[{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":362,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=js-api-arcgis","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/593272","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/7011"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=593272"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/593272\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=593272"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=593272"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=593272"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=593272"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=593272"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Step 5: where some clouds show up<\/h2>\n
See the code<\/a><\/p>\n
Continuing with the experiments, we wanted to add some clouds to our globe. NASA has satellite images of clouds<\/a> available for public use, so we added a layer of clouds using the Mesh<\/a> class. Basically we create a sphere with Mesh.createSphere()<\/a> and we map the clouds image as a texture on the sphere. Of course, the clouds are then not exactly in the place they were when the image was taken, but that is not very relevant for our visualization. We elevated clouds from the globe by adding an offset of 300km to the radius of the Earth and setting this as the radius of the mesh sphere.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":593332,"id":593332,"title":"step5","filename":"step5.png","filesize":21049,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step5.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/interactive-3d-globe\/step5","alt":"step 5 - globe","author":"7011","description":"","caption":"Globe after step 5","name":"step5","status":"inherit","uploaded_to":593272,"date":"2019-08-24 19:19:15","modified":"2019-08-24 19:19:31","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":262,"height":213,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step5-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step5.png","medium-width":262,"medium-height":213,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step5.png","medium_large-width":262,"medium_large-height":213,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step5.png","large-width":262,"large-height":213,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step5.png","1536x1536-width":262,"1536x1536-height":213,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step5.png","2048x2048-width":262,"2048x2048-height":213,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step5.png","card_image-width":262,"card_image-height":213,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step5.png","wide_image-width":262,"wide_image-height":213}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/github.com\/RalucaNicola\/the-globe-of-extremes\/commit\/047b19153b5bd1c2c4ff672ff88a54d8adc91d6b"},{"acf_fc_layout":"content","content":"
Step 2: where the globe starts looking fancy<\/h2>\n
See the code<\/a><\/p>\n"},{"acf_fc_layout":"content","content":"
After the first step the globe has a very realistic background and for our app I\u2019d like to give it a playful look that will invite users to explore the data on the globe. For that, we\u2019ll remove the stars and the atmosphere and we\u2019ll add a custom background gradient on the body<\/code>: background: radial-gradient(#12bff2,#0269a1);<\/code>. We\u2019ll also set altitude constraints so that the user can\u2019t zoom in or out too much to avoid that they get lost.<\/p>\n
Another change that we\u2019ll make to the globe is adding some CSS filters to increase the saturation and additionally we\u2019ll add a white halo around it: filter: saturate(1.5) drop-shadow(0 0 20px white);<\/code>\u00a0.<\/p>\n"},{"acf_fc_layout":"image","image":{"ID":593302,"id":593302,"title":"step2","filename":"step2.png","filesize":22659,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step2.png","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/3d-gis\/interactive-3d-globe\/step2-2","alt":"step 2 - globe","author":"7011","description":"","caption":"Globe after step 2","name":"step2-2","status":"inherit","uploaded_to":593272,"date":"2019-08-24 19:10:12","modified":"2019-08-24 19:10:29","menu_order":0,"mime_type":"image\/png","type":"image","subtype":"png","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":247,"height":212,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step2-213x200.png","thumbnail-width":213,"thumbnail-height":200,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step2.png","medium-width":247,"medium-height":212,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step2.png","medium_large-width":247,"medium_large-height":212,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step2.png","large-width":247,"large-height":212,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step2.png","1536x1536-width":247,"1536x1536-height":212,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step2.png","2048x2048-width":247,"2048x2048-height":212,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step2.png","card_image-width":247,"card_image-height":212,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2019\/08\/step2.png","wide_image-width":247,"wide_image-height":212}},"image_position":"center","orientation":"horizontal","hyperlink":"https:\/\/github.com\/RalucaNicola\/the-globe-of-extremes\/commit\/b7bf5d295485103cb4f5d67f6b87d6ec726f5339"},{"acf_fc_layout":"content","content":"