Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
	<title>Add Graphics to a SceneView | Sample | ArcGIS API for JavaScript 4.18</title>

	<link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css" />
	<script src="https://js.arcgis.com/4.18/"></script>
	<script>
		const fillSymbol = {
			type: 'simple-fill',
			color: [227, 139, 79, 0.8],
			outline: {
				color: [255, 255, 255],
				width: 1
			}
		}
		require(['esri/Map', 'esri/views/SceneView', 'esri/Graphic', "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol"], function(Map, SceneView, Graphic, SimpleMarkerSymbol, SimpleLineSymbol) {
			const markerSymbol = new SimpleMarkerSymbol({
				color: [0, 188, 238],
				style: "circle",
				outline: {
					width: 2,
					color: [255, 255, 255, 1]
				}
			});
			const vertLineSymbol = new SimpleLineSymbol({
				width: 2,
				color: [0, 188, 238]
			});
			const connectingLineSymbol = new SimpleLineSymbol({
				width: 4,
				color: [0, 188, 238]
			});
			const map = new Map({
				basemap: 'hybrid',
				ground: 'world-elevation'
			})
			const view = new SceneView({
				container: 'viewDiv',
				map: map,
				center: {
					x: -105,
					y: 40.5
				},
				zoom: 10,
				environment: {
					atmosphere: {
						quality: 'high'
					}
				}
			})
			const graphics = []
			// Create points and vertical lines
			points.forEach(message => {
				const marker = {
					type: 'point',
					x: message.longitude,
					y: message.latitude,
					z: message.altitude
				}
				const polyline = {
					type: 'polyline',
					paths: [
						[message.longitude, message.latitude, 0],
						[message.longitude, message.latitude, message.altitude]
					]
				}
				const markerGraphic = new Graphic({
					geometry: marker,
					symbol: markerSymbol
				})
				const polylineGraphic = new Graphic({
					geometry: polyline,
					symbol: vertLineSymbol
				})
				graphics.push(markerGraphic)
				graphics.push(polylineGraphic)
			})
			const stepPath = points.map(message => [message.longitude, message.latitude, message.altitude])
			// Create connecting line
			const polyLine = {
				type: 'polyline',
				paths: stepPath
			}
			const polylineGraphic = new Graphic({
				geometry: polyLine,
				symbol: connectingLineSymbol
			})
			graphics.push(polylineGraphic)
			view.set('graphics', graphics)
		})
		const points = [
			{
				latitude: 40.268639,
				longitude: -105.239532,
				altitude: 1735
			},
			{
				latitude: 40.268639,
				longitude: -105.239525,
				altitude: 1736
			},
			{
				latitude: 40.268642,
				longitude: -105.239517,
				altitude: 1737
			},
			{
				latitude: 40.268639,
				longitude: -105.239525,
				altitude: 1736
			},
			{
				latitude: 40.268639,
				longitude: -105.239525,
				altitude: 1735
			},
			{
				latitude: 40.268642,
				longitude: -105.239517,
				altitude: 1735
			},
			{
				latitude: 40.268696,
				longitude: -105.239532,
				altitude: 1739
			},
			{
				latitude: 40.2686716,
				longitude: -105.2395486,
				altitude: 1758.8
			},
			{
				latitude: 40.268684,
				longitude: -105.239525,
				altitude: 1736
			},
			{
				latitude: 40.268692,
				longitude: -105.239532,
				altitude: 1738
			},
			{
				latitude: 40.2686584,
				longitude: -105.2395418,
				altitude: 1758.9
			},
			{
				latitude: 40.268696,
				longitude: -105.239525,
				altitude: 1740
			},
			{
				latitude: 40.268696,
				longitude: -105.239525,
				altitude: 1740
			},
			{
				latitude: 40.268696,
				longitude: -105.239532,
				altitude: 1740
			},
			{
				latitude: 40.2686878,
				longitude: -105.2395251,
				altitude: 1766.4
			},
			{
				latitude: 40.268696,
				longitude: -105.239525,
				altitude: 1740
			},
			{
				latitude: 40.268692,
				longitude: -105.239532,
				altitude: 1739
			},
			{
				latitude: 40.2686876,
				longitude: -105.2395438,
				altitude: 1762.9
			},
			{
				latitude: 40.268696,
				longitude: -105.239532,
				altitude: 1739
			},
			{
				latitude: 40.2686811,
				longitude: -105.2395461,
				altitude: 1772.9
			},
			{
				latitude: 40.269028,
				longitude: -105.239555,
				altitude: 1896
			},
			{
				latitude: 40.2703481,
				longitude: -105.2395359,
				altitude: 2182.2
			},
			{
				latitude: 40.271351,
				longitude: -105.239731,
				altitude: 2362
			},
			{
				latitude: 40.2704353,
				longitude: -105.2369653,
				altitude: 3015.7
			},
			{
				latitude: 40.270443,
				longitude: -105.236847,
				altitude: 2998
			},
			{
				latitude: 40.270771,
				longitude: -105.234909,
				altitude: 3142
			},
			{
				latitude: 40.2721376,
				longitude: -105.2313413,
				altitude: 3428.9
			},
			{
				latitude: 40.271618,
				longitude: -105.232353,
				altitude: 3304
			},
			{
				latitude: 40.273495,
				longitude: -105.229774,
				altitude: 3639
			},
			{
				latitude: 40.2810306,
				longitude: -105.2268993,
				altitude: 4291.6
			},
			{
				latitude: 40.2878613,
				longitude: -105.2249061,
				altitude: 4721.1
			},
			{
				latitude: 40.289284,
				longitude: -105.224312,
				altitude: 4776
			},
			{
				latitude: 40.292152,
				longitude: -105.222946,
				altitude: 4956
			},
			{
				latitude: 40.29525,
				longitude: -105.221115,
				altitude: 5150
			},
			{
				latitude: 40.2955886,
				longitude: -105.2208774,
				altitude: 5205.3
			},
			{
				latitude: 40.298389,
				longitude: -105.219467,
				altitude: 5355
			},
			{
				latitude: 40.302319,
				longitude: -105.218666,
				altitude: 5559
			},
			{
				latitude: 40.307102,
				longitude: -105.217392,
				altitude: 5765
			},
			{
				latitude: 40.311646,
				longitude: -105.215851,
				altitude: 5973
			},
			{
				latitude: 40.315693,
				longitude: -105.214058,
				altitude: 6178
			},
			{
				latitude: 40.323502,
				longitude: -105.208534,
				altitude: 6597
			},
			{
				latitude: 40.326744,
				longitude: -105.204979,
				altitude: 6819
			},
			{
				latitude: 40.330051,
				longitude: -105.201172,
				altitude: 7042
			},
			{
				latitude: 40.333675,
				longitude: -105.197052,
				altitude: 7281
			},
			{
				latitude: 40.336376,
				longitude: -105.194267,
				altitude: 7522
			},
			{
				latitude: 40.339565,
				longitude: -105.193069,
				altitude: 7762
			},
			{
				latitude: 40.342949,
				longitude: -105.190186,
				altitude: 8014
			},
			{
				latitude: 40.3439421,
				longitude: -105.1892593,
				altitude: 8122
			},
			{
				latitude: 40.346481,
				longitude: -105.187065,
				altitude: 8273
			},
			{
				latitude: 40.34919,
				longitude: -105.184631,
				altitude: 8526
			},
			{
				latitude: 40.3512223,
				longitude: -105.1823094,
				altitude: 8797.7
			},
			{
				latitude: 40.351391,
				longitude: -105.182114,
				altitude: 8785
			},
			{
				latitude: 40.35429,
				longitude: -105.178833,
				altitude: 9038
			},
			{
				latitude: 40.365768,
				longitude: -105.1614,
				altitude: 10084
			},
			{
				latitude: 40.366382,
				longitude: -105.1603456,
				altitude: 10154.7
			},
			{
				latitude: 40.369205,
				longitude: -105.155083,
				altitude: 10312
			},
			{
				latitude: 40.372887,
				longitude: -105.148636,
				altitude: 10546
			},
			{
				latitude: 40.3756538,
				longitude: -105.1436639,
				altitude: 10760.3
			},
			{
				latitude: 40.376339,
				longitude: -105.142181,
				altitude: 10784
			},
			{
				latitude: 40.379093,
				longitude: -105.135376,
				altitude: 11035
			},
			{
				latitude: 40.381668,
				longitude: -105.127632,
				altitude: 11316
			},
			{
				latitude: 40.3828998,
				longitude: -105.1246695,
				altitude: 11462.1
			},
			{
				latitude: 40.384285,
				longitude: -105.120384,
				altitude: 11600
			},
			{
				latitude: 40.387226,
				longitude: -105.113014,
				altitude: 11874
			},
			{
				latitude: 40.389935,
				longitude: -105.105347,
				altitude: 12146
			},
			{
				latitude: 40.3972498,
				longitude: -105.0813523,
				altitude: 12810.5
			},
			{
				latitude: 40.395294,
				longitude: -105.087288,
				altitude: 12641
			},
			{
				latitude: 40.402817,
				longitude: -105.068916,
				altitude: 13063
			},
			{
				latitude: 40.406723,
				longitude: -105.060928,
				altitude: 13260
			},
			{
				latitude: 40.410461,
				longitude: -105.054909,
				altitude: 13468
			},
			{
				latitude: 40.41415,
				longitude: -105.051651,
				altitude: 13689
			},
			{
				latitude: 40.4171438,
				longitude: -105.0483774,
				altitude: 13909.8
			},
			{
				latitude: 40.418064,
				longitude: -105.047554,
				altitude: 13925
			},
			{
				latitude: 40.42178,
				longitude: -105.043602,
				altitude: 14175
			},
			{
				latitude: 40.425121,
				longitude: -105.039368,
				altitude: 14439
			},
			{
				latitude: 40.4262571,
				longitude: -105.0377339,
				altitude: 14573.2
			},
			{
				latitude: 40.428093,
				longitude: -105.035156,
				altitude: 14709
			},
			{
				latitude: 40.432209,
				longitude: -105.031128,
				altitude: 14984
			},
			{
				latitude: 40.4523865,
				longitude: -105.0166285,
				altitude: 15791.5
			},
			{
				latitude: 40.454777,
				longitude: -105.01519,
				altitude: 15843
			},
			{
				latitude: 40.4594,
				longitude: -105.011459,
				altitude: 16112
			},
			{
				latitude: 40.464027,
				longitude: -105.004074,
				altitude: 16638
			},
			{
				latitude: 40.465012,
				longitude: -105.002281,
				altitude: 16866
			},
			{
				latitude: 40.467896,
				longitude: -105.000496,
				altitude: 17113
			},
			{
				latitude: 40.472107,
				longitude: -105.000778,
				altitude: 17337
			},
			{
				latitude: 40.476887,
				longitude: -105.002029,
				altitude: 17568
			},
			{
				latitude: 40.480232,
				longitude: -105.000748,
				altitude: 17792
			},
			{
				latitude: 40.4836951,
				longitude: -105.0001163,
				altitude: 18208.2
			},
			{
				latitude: 40.484028,
				longitude: -105.000214,
				altitude: 18198
			},
			{
				latitude: 40.491074,
				longitude: -105.006538,
				altitude: 18532
			},
			{
				latitude: 40.499554,
				longitude: -105.010216,
				altitude: 18826
			},
			{
				latitude: 40.507286,
				longitude: -105.013565,
				altitude: 18970
			},
			{
				latitude: 40.510838,
				longitude: -105.014557,
				altitude: 19030
			},
			{
				latitude: 40.5127075,
				longitude: -105.0147058,
				altitude: 19088.5
			},
			{
				latitude: 40.51384,
				longitude: -105.014687,
				altitude: 19070
			},
			{
				latitude: 40.516541,
				longitude: -105.014671,
				altitude: 19100
			},
			{
				latitude: 40.518795,
				longitude: -105.014915,
				altitude: 19112
			},
			{
				latitude: 40.5192313,
				longitude: -105.0150189,
				altitude: 19146.7
			},
			{
				latitude: 40.520802,
				longitude: -105.015549,
				altitude: 19120
			},
			{
				latitude: 40.5240355,
				longitude: -105.0169623,
				altitude: 19177.2
			},
			{
				latitude: 40.524391,
				longitude: -105.017105,
				altitude: 19146
			},
			{
				latitude: 40.526184,
				longitude: -105.017899,
				altitude: 19148
			},
			{
				latitude: 40.528011,
				longitude: -105.018555,
				altitude: 19138
			},
			{
				latitude: 40.5339031,
				longitude: -105.0203338,
				altitude: 19130
			},
			{
				latitude: 40.542011,
				longitude: -105.023666,
				altitude: 19071
			},
			{
				latitude: 40.545967,
				longitude: -105.025291,
				altitude: 19079
			},
			{
				latitude: 40.547989,
				longitude: -105.026024,
				altitude: 19072
			},
			{
				latitude: 40.566513,
				longitude: -105.031151,
				altitude: 19123
			},
			{
				latitude: 40.5689581,
				longitude: -105.0321183,
				altitude: 19155.8
			},
			{
				latitude: 40.570229,
				longitude: -105.032639,
				altitude: 19126
			},
			{
				latitude: 40.572201,
				longitude: -105.033546,
				altitude: 19134
			},
			{
				latitude: 40.574203,
				longitude: -105.034622,
				altitude: 19139
			},
			{
				latitude: 40.589756,
				longitude: -105.04213,
				altitude: 19066
			},
			{
				latitude: 40.5995501,
				longitude: -105.0423199,
				altitude: 19063.5
			},
			{
				latitude: 40.603951,
				longitude: -105.041885,
				altitude: 19012
			},
			{
				latitude: 40.6075194,
				longitude: -105.0415395,
				altitude: 19027.8
			},
			{
				latitude: 40.60704,
				longitude: -105.041565,
				altitude: 18996
			},
			{
				latitude: 40.610153,
				longitude: -105.041306,
				altitude: 18986
			},
			{
				latitude: 40.613277,
				longitude: -105.0411,
				altitude: 18972
			},
			{
				latitude: 40.626862,
				longitude: -105.042076,
				altitude: 18914
			},
			{
				latitude: 40.630589,
				longitude: -105.043106,
				altitude: 18894
			},
			{
				latitude: 40.6346523,
				longitude: -105.0444858,
				altitude: 18902.7
			},
			{
				latitude: 40.634327,
				longitude: -105.04435,
				altitude: 18874
			},
			{
				latitude: 40.649338,
				longitude: -105.049538,
				altitude: 18778
			},
			{
				latitude: 40.680386,
				longitude: -105.058273,
				altitude: 18675
			},
			{
				latitude: 40.685192,
				longitude: -105.059662,
				altitude: 18655
			},
			{
				latitude: 40.690136,
				longitude: -105.061066,
				altitude: 18647
			},
			{
				latitude: 40.695107,
				longitude: -105.062508,
				altitude: 18640
			},
			{
				latitude: 40.7146,
				longitude: -105.066925,
				altitude: 18575
			},
			{
				latitude: 40.719265,
				longitude: -105.067474,
				altitude: 18559
			},
			{
				latitude: 40.723976,
				longitude: -105.068016,
				altitude: 18523
			},
			{
				latitude: 40.736103,
				longitude: -105.073372,
				altitude: 17813
			},
			{
				latitude: 40.738789,
				longitude: -105.072586,
				altitude: 17490
			},
			{
				latitude: 40.744152,
				longitude: -105.073166,
				altitude: 17165
			},
			{
				latitude: 40.747898,
				longitude: -105.070702,
				altitude: 16799
			},
			{
				latitude: 40.74987,
				longitude: -105.068321,
				altitude: 16357
			},
			{
				latitude: 40.755531,
				longitude: -105.060982,
				altitude: 15407
			},
			{
				latitude: 40.759731,
				longitude: -105.055428,
				altitude: 14946
			},
			{
				latitude: 40.777832,
				longitude: -105.036011,
				altitude: 13317
			},
			{
				latitude: 40.781601,
				longitude: -105.027107,
				altitude: 12943
			},
			{
				latitude: 40.785397,
				longitude: -105.017151,
				altitude: 12571
			},
			{
				latitude: 40.789516,
				longitude: -105.007607,
				altitude: 12197
			},
			{
				latitude: 40.793633,
				longitude: -105.000565,
				altitude: 11829
			},
			{
				latitude: 40.797295,
				longitude: -104.995094,
				altitude: 11465
			},
			{
				latitude: 40.800182,
				longitude: -104.989929,
				altitude: 11113
			},
			{
				latitude: 40.802456,
				longitude: -104.984604,
				altitude: 10756
			},
			{
				latitude: 40.805653,
				longitude: -104.979118,
				altitude: 10399
			},
			{
				latitude: 40.80994,
				longitude: -104.974251,
				altitude: 10050
			},
			{
				latitude: 40.82032,
				longitude: -104.963829,
				altitude: 9362
			},
			{
				latitude: 40.825367,
				longitude: -104.960938,
				altitude: 9026
			},
			{
				latitude: 40.830486,
				longitude: -104.958206,
				altitude: 8686
			},
			{
				latitude: 40.8349,
				longitude: -104.955833,
				altitude: 8360
			},
			{
				latitude: 40.839096,
				longitude: -104.953575,
				altitude: 8061
			},
			{
				latitude: 40.844311,
				longitude: -104.950172,
				altitude: 7766
			},
			{
				latitude: 40.849205,
				longitude: -104.946877,
				altitude: 7487
			},
			{
				latitude: 40.853397,
				longitude: -104.943626,
				altitude: 7200
			},
			{
				latitude: 40.857365,
				longitude: -104.941017,
				altitude: 6913
			},
			{
				latitude: 40.861279,
				longitude: -104.938622,
				altitude: 6589
			},
			{
				latitude: 40.864994,
				longitude: -104.936195,
				altitude: 6278
			},
			{
				latitude: 40.868446,
				longitude: -104.934349,
				altitude: 5991
			},
			{
				latitude: 40.871861,
				longitude: -104.932014,
				altitude: 5717
			},
			{
				latitude: 40.875134,
				longitude: -104.930138,
				altitude: 5468
			},
			{
				latitude: 40.878098,
				longitude: -104.929001,
				altitude: 5212
			},
			{
				latitude: 40.880951,
				longitude: -104.928192,
				altitude: 4960
			},
			{
				latitude: 40.88319,
				longitude: -104.927895,
				altitude: 4710
			},
			{
				latitude: 40.885307,
				longitude: -104.92765,
				altitude: 4458
			},
			{
				latitude: 40.887836,
				longitude: -104.927071,
				altitude: 4218
			},
			{
				latitude: 40.890076,
				longitude: -104.926125,
				altitude: 3977
			},
			{
				latitude: 40.891754,
				longitude: -104.925194,
				altitude: 3741
			},
			{
				latitude: 40.892826,
				longitude: -104.924026,
				altitude: 3501
			},
			{
				latitude: 40.892277,
				longitude: -104.919189,
				altitude: 2568
			},
			{
				latitude: 40.891285,
				longitude: -104.919434,
				altitude: 2321
			},
			{
				latitude: 40.890442,
				longitude: -104.919769,
				altitude: 2072
			},
			{
				latitude: 40.890438,
				longitude: -104.919518,
				altitude: 1825
			}
		]
	</script>

	<style>
		html,
		body,
		#viewDiv {
			padding: 0;
			margin: 0;
			height: 100%;
			width: 100%;
		}

		#overlayDiv {
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			pointer-events: none;
		}

		.box {
			animation-name: alertDanger;
			animation-duration: 1s;
			animation-iteration-count: infinite;
			animation-direction: alternate;
			background-color: white;
			position: absolute;
			right: 0;
			top: 0;
			width: 100px;
			height: 100px;
		}

		@keyframes alertDanger {
			0% {
				background: red;
			}

			50% {
				background: white;
			}
		}
	</style>
</head>

<body>
	<div id="viewDiv"></div>
	<div id="overlayDiv">
		<div class="box"></div>
	</div>
</body>

</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console