-
Notifications
You must be signed in to change notification settings - Fork 0
/
real-world-scale.html
128 lines (119 loc) · 3.61 KB
/
real-world-scale.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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Thematic visualization with realistic 3D symbols - 4.15</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.15/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.15/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/widgets/Legend"
], function(Map, MapView, FeatureLayer, Legend) {
/*****************************************************************
* Set the Renderer and Layer for the trees. The symbol references
* a hosted 3D symbol resource that resembles a tree.
* Four visual variables are used to modify this symbol on the
* client. One for the crown height (height axis),
* another for crown diameter from north to south (depth axis), and
* another for crown diameter from east to west (width axis).
*
* The color visual variable shades each tree based on its
* carbon storage.
*****************************************************************/
var renderer = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: {
type: "web-style", // autocasts as new WebStyleSymbol()
styleName: "esriRealisticTreesStyle",
name: "Other"
},
label: "tree",
visualVariables: [
{
type: "size",
axis: "height",
field: "Height", // tree height
valueUnit: "feet"
},
{
type: "color",
field: "C_Storage", // Carbon storage
stops: [
{
value: 0,
color: "#f7fcb9"
}, // features with zero carbon
{
value: 10000,
color: "#31a354"
} // features with 800 carbon
],
legendOptions: {
title: "Carbon Storage"
}
}
]
};
// Construct the layer and set the renderer and popupTemplate on it
var treesLayer = new FeatureLayer({
url:
"https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Landscape_Trees/FeatureServer/0",
renderer: renderer,
outFields: ["*"],
popupTemplate: {
// autocasts as new PopupTemplate()
title: "{Cmn_Name}",
content:
"<i>{Sci_Name}</i><br>" +
"This tree is in {Condition} condition and is {Height} feet in height."
}
});
var map = new Map({
basemap: "osm",
// ground: "world-elevation",
layers: [treesLayer]
});
var view = new MapView({
container: "viewDiv",
map: map,
// Set dock options on the view's popup
popup: {
dockEnabled: true,
dockOptions: {
breakpoint: false
}
},
});
view.when(function() {
var legend = new Legend({
view: view
});
view.ui.add(legend, "top-right");
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>