{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; web-share; vr","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__graphql":{"data":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","currentContext":{"id":"VoDkNZ","title":"Captain Anonymous","name":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","username":"anon","__typename":"User"},"currentTeamId":null,"username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails","cpedata":{"action":"show","controller":"live_fullpage"}},"__user":{"anon":true,"base_url":"/anon/","current_team_id":0,"current_team_hashid":null,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNjY0NDg4NzE4LCJpYXQiOjE2NjQ0ODUxMTgsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.UIfByuHxyHhy15ugeqsOhdZD1mebvr3ifmi-Fx8iy50VnRrD199HNcC1I8oJ5Ju_BD8Fa7Mh3TBHfWJwaTT71mb2o_thqQMvTURPrG26gA2VmvoBAER9KUrhwr9Kj8VdOfuew7WzcDV7CnYBdnVkOc6ZEvSscBiNEV1fd_mRZj0cyoZAxiH_k8WOn_Z14cyiIq1KCp0XuZT_VZiMf4X1vUPRJHEgvv29tCpafloVba6ZUnN4ybZUgGHRmy4GoeUVBozpP_en1t6vT_DYfBCG4FBUDCv6f4VvTOewclDvUyDXVkQmZy2tUSgg1PO3NMstAgHir5QdxC3dZcy0820jCg"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__item":"{\"id\":42840423,\"user_id\":3352342,\"html\":\"<!DOCTYPE html>\\n<html>\\n \\n<head>\\n <meta charset=\\\"utf-8\\\">\\n <meta name=\\\"viewport\\\" content=\\\"initial-scale=1\\\">\\n <title>ArcGIS Globe<\\/title>\\n <link rel=\\\"stylesheet\\\" href=\\\"https:\\/\\/js.arcgis.com\\/4.8\\/esri\\/css\\/main.css\\\">\\n <script src=\\\"https:\\/\\/js.arcgis.com\\/4.8\\/\\\"><\\/script>\\n<\\/head>\\n\\n<body>\\n <header>\\n <div id=\\\"circle\\\"><\\/div>\\n <div id=\\\"floating-text\\\">\\n <h2>World's Largest Cities<\\/h2>\\n \\n <p>This globe highlights the cities in the world with the largest populations. Every city with a population over 5 million are labeled. The white points represent cities that have a population greater than 500 thousand. <\\/p>\\n <p>\\n Clicking on the labeled cities will open pop-ups that reveal the city's population. This application was created using ArcGIS's Javascript API.\\n <\\/div>\\n <\\/header>\\n \\n <div id=\\\"view\\\"><\\/div>\\n \\n \\n \\n<\\/body>\\n \\n<\\/html>\",\"css\":\"@import url('https:\\/\\/fonts.googleapis.com\\/css?family=Open+Sans');\\n\\nhtml, body {\\n padding: 0;\\n margin: 0;\\n height: 100%;\\n width: 100%;\\nbackground: #005AA7; \\/* fallback for old browsers *\\/\\nbackground: -webkit-linear-gradient(150deg,#005AA7, #FFFDE4); \\/* Chrome 10-25, Safari 5.1-6 *\\/\\nbackground: linear-gradient(150deg, #005AA7, #FFFDE4); \\/* W3C, IE 10+\\/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *\\/\\n}\\n \\n\\n#circle {\\n height: 100%;\\n width: 100%;\\n shape-outside: circle(30%);\\n float: right;\\n}\\n\\n#view {\\n height: 100%;\\n width: 100%;\\n}\\n\\n#view canvas{\\n filter: drop-shadow(26px 15px 5px rgba(0,0,0, 0.5));\\n}\\n\\nheader {\\n position: absolute;\\n top: 0;\\n right: 0;\\n height: 100%;\\n width: 100%;\\n}\\n\\n#floating-text {\\n font-size: 1.1em;\\n text-align: left;\\n padding: 20px;\\n font-family: 'Open Sans', sans-serif;\\n color: #ffffff;\\n}\\n\\nspan {\\n font-weight: bold;\\n}\\n\\n.esri-component.esri-attribution.esri-widget {\\n background-color: transparent;\\n}\\n\",\"js\":\" \\n\\/\\/all of the functions need to be called out in the require section:\\nrequire([\\n \\\"esri\\/WebScene\\\",\\n \\\"esri\\/views\\/SceneView\\\",\\n \\\"esri\\/layers\\/FeatureLayer\\\",\\n \\\"esri\\/layers\\/support\\/LabelClass\\\"\\n ], function(WebScene, SceneView, FeatureLayer, LabelClass) {\\n \\n \\/\\/\\/I am using a webscene here, and I am calling it 'map', no basemap, and the surface color is the ball's color (ocean)\\n var map = new WebScene({\\n basemap: null,\\n ground: {\\n surfaceColor: '#004C73'\\n }\\n });\\n \\n\\/\\/\\/Creating the SceneView, I have changed the 'environment' to remove the stars, the atmopohere, and the lighting. I get rid of the background as well\\n var view = new SceneView({\\n container: \\\"view\\\",\\n map: map,\\n alphaCompositingEnabled: true,\\n center: [90.168214, 18.808395],\\n scale: 50000000000,\\n constraints: {\\n altitude: {\\n min: 19000000,\\n max: 26000000\\n }\\n },\\n environment: {\\n starsEnabled: false,\\n atmosphereEnabled: false,\\n lighting: {\\n date: \\\"Sun Jul 15 2018 15:30:00 GMT+0900 (W. Europe Daylight Time)\\\"\\n},\\n background: {\\n type: \\\"color\\\",\\n color: [0, 0, 0, 0]\\n },\\n \\n }\\n });\\n\\n \\/\\/\\/get rid of UI\\n view.ui.empty(\\\"top-left\\\");\\n \\n \\/\\/\\/add a feature service, these are country boundaries, creating my own basemap\\n var countryBoundaries = new FeatureLayer({\\n url: \\\"http:\\/\\/services.arcgis.com\\/P3ePLMYs2RVChkJx\\/arcgis\\/rest\\/services\\/World_Countries_(Generalized)\\/FeatureServer\\\",\\n title: \\\"World Countries\\\",\\n \\/\\/ we use a simple renderer when we want to symbolize all features with the same symbol, how the feature service will look\\n renderer: {\\n type: \\\"simple\\\",\\n symbol: {\\n type: \\\"polygon-3d\\\",\\n symbolLayers: [{\\n type: \\\"fill\\\",\\n material: { color: [255, 255, 213, 0.5] },\\n outline: {\\n color: [0,0,0, 1]\\n }\\n }]\\n }\\n }\\n});\\n \\n \\/\\/\\/\\/Creaitng a popup template, forcing popup to only show title, forcing popup to close when map is moved or clicked off of popup\\n var popup = {\\n title: \\\"{CITY_NAME}, {CNTRY_NAME} has a Population of {POP}\\\",\\n }\\n view.popup.collapsed = true; \\n view.popup.autoCloseEnabled = true;\\n \\n \\/\\/\\/\\/First Population layer that will be used for labeling, uses callouts and vertical offsets to make a 3D effect\\n var populationLayer = new FeatureLayer({\\n url: \\\"https:\\/\\/services.arcgis.com\\/P3ePLMYs2RVChkJx\\/arcgis\\/rest\\/services\\/World_Cities_analysis\\/FeatureServer\\\",\\n definitionExpression: \\\"POP > 5000000\\\",\\n outFields: [\\\"CITY_NAME\\\",\\\"CNTRY_NAME\\\",\\\"POP\\\"],\\n popupTemplate: popup,\\n renderer: {\\n type: \\\"simple\\\",\\n symbol: {\\n type: \\\"point-3d\\\",\\n symbolLayers: [{\\n type: \\\"icon\\\",\\n size: 9,\\n resource: { primitive: \\\"circle\\\" },\\n material: { color: \\\"#000040\\\" },\\n outline: {\\n size: 1,\\n color: \\\"white\\\"\\n }\\n }],\\n verticalOffset: {\\n screenLength: 25\\n },\\n callout: {\\n type: \\\"line\\\", \\/\\/ autocasts as new LineCallout3D()\\n size: 2.5,\\n color: \\\"#1846ed\\\"\\n }\\n }\\n }\\n});\\n \\n\\/\\/\\/\\/add a label to the above layer, using the label expression\\n populationLayer.labelingInfo = [\\n new LabelClass({\\n labelExpressionInfo: { expression: \\\"$feature.CITY_NAME\\\" },\\n symbol: {\\n type: \\\"label-3d\\\",\\n symbolLayers: [{\\n type: \\\"text\\\",\\n material: { color: \\\"white\\\" },\\n size: 11,\\n font: {\\n family: \\\"Open Sans\\\",\\n weight: \\\"bold\\\"\\n },\\n halo: {\\n color: \\\"black\\\",\\n size: 1\\n }\\n }]\\n }\\n })\\n \\n];\\n\\n\\/\\/\\/\\/adding grid lines to the globe for clarity\\n var graticule = new FeatureLayer({\\n url: \\\"https:\\/\\/services.arcgis.com\\/V6ZHFr6zdgNZuVG0\\/arcgis\\/rest\\/services\\/World_graticule_15deg\\/FeatureServer\\\",\\n opacity: 0.4\\n});\\n\\n\\/\\/\\/\\/other cities layer, shows all cities within the definition expression. visualized as white\\n var citieslayer = new FeatureLayer({\\n url: \\\"https:\\/\\/services.arcgis.com\\/P3ePLMYs2RVChkJx\\/arcgis\\/rest\\/services\\/World_Cities_analysis\\/FeatureServer\\\",\\n definitionExpression: \\\"POP > 500000\\\",\\n renderer: {\\n type: \\\"simple\\\",\\n symbol: {\\n type: \\\"point-3d\\\",\\n symbolLayers: [{\\n type: \\\"icon\\\",\\n size: 5,\\n resource: { primitive: \\\"circle\\\" },\\n material: { color: [255,255,255, 0.7] },\\n }]\\n }\\n }\\n});\\n \\n\\n\\/\\/ addmany will add all the layers created above to the globe\\nmap.addMany([graticule, countryBoundaries, populationLayer, citieslayer]);\\n \\n});\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2020-02-11T20:42:28.000Z\",\"updated_at\":\"2020-03-27T21:20:45.000Z\",\"title\":\"ArcGIS Globe!\",\"description\":\"\",\"slug_hash\":\"BaNoNzV\",\"head\":\"\",\"private\":false,\"slug_hash_private\":\"ab6d36cdcf536d34f90a1564b96ff3e4\",\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"pen_hash\":null,\"hashid\":\"BaNoNzV\"}"}