-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy path2_geojson.html
108 lines (97 loc) · 3.55 KB
/
2_geojson.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>GeoJSON</title>
<link rel="stylesheet" href="./src/2_geojson/application.css">
<link rel="stylesheet" href="./src/widgets/Indicator.css">
<link rel="stylesheet" href="./src/widgets/Banner.css">
<link rel="stylesheet" href="./src/widgets/IconButton.css">
<link rel="stylesheet" href="./src/widgets/ToggleIconButton.css">
<link rel="stylesheet" href="./src/widgets/Slider.css">
<link rel="stylesheet" href="https://js.arcgis.com/4.25/esri/themes/dark/main.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.15.5/build/styles/agate.min.css">
</head>
<body>
<div class="application">
<div id="viewDiv" class="mapping" style="display: flex;"></div>
</div>
<div id="layerPanel" class="esri-widget application-panel" style="width: auto;">
<fieldset>
<legend>Add GeoJSONLayer</legend>
<div class="js-code">
<div id="addGeoJSONLayerButton" class="run-button esri-widget esri-widget--button esri-icon-play" role="button"></div>
<pre><code class="javascript">const url = "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.geojson";
const layer = new GeoJSONLayer({
url,
title: "USGS Earthquakes",
copyright: "USGS",
definitionExpression: "type = 'earthquake'",
popupTemplate: {
title: `{title}`,
content: `
Earthquake of magnitude {mag} on {time}.<br />
<a href="{url}" >More details...</a>
`
}
});</code></pre>
</div>
</fieldset>
</div>
<div id="elevationPanel" class="esri-widget application-panel">
<fieldset>
<legend>Elevation</legend>
<div class="js-code">
<div id="applyElevationInfoButton" class="run-button esri-widget esri-widget--button esri-icon-play" role="button"></div>
<pre><code class="javascript">layer.elevationInfo = {
mode: "absolute-height",
unit: "kilometers",
featureExpressionInfo: {
expression: "Geometry($feature).z * -1"
}
};</code></pre>
</div>
</fieldset>
<fieldset>
<legend>Ground Opacity</legend>
<div class="js-code">
<pre><code id="groundOpacityCode" class="javascript">scene.ground.opacity = 1;</code></pre>
</div>
<div id="opacitySlider"></div>
</fieldset>
</div>
<div id="rendererPanel" class="esri-widget application-panel">
<fieldset>
<legend>Renderer</legend>
<div class="js-code">
<div id="applyRendererButton" class="run-button esri-widget esri-widget--button esri-icon-play" role="button"></div>
<pre><code class="javascript">layer.renderer = new SimpleRenderer({
symbol: new PointSymbol3D({
symbolLayers: [
new ObjectSymbol3DLayer({
resource: { primitive: "sphere" }
})
]
}),
visualVariables: [
new ColorVariable({
field: "mag",
stops: [{ value: 1, color: "white" }, { value: 5, color: "red" }]
}),
new SizeVariable({
field: "mag",
axis: "all",
stops: [{ value: 2, size: 500 }, { value: 7, size: 10000 }]
})
]
});</code></pre>
</div>
</fieldset>
</div>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.15.5/build/highlight.min.js"></script>
<script src="src/config.js"></script>
<script src="https://js.arcgis.com/4.25/init.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>