-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcustom-popup.html
146 lines (136 loc) · 4.59 KB
/
custom-popup.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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1,user-scalable=no"
/>
<!--
ArcGIS API for JavaScript, https://js.arcgis.com
For more information about the popuptemplate-function sample, read the original sample description at developers.arcgis.com.
https://developers.arcgis.com/javascript/latest/sample-code/popuptemplate-function/index.html
-->
<title>
PopupTemplate - use functions to set content | Sample | ArcGIS API for
JavaScript 4.17
</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.17/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.17/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
var populationChange;
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/Layer"
], function (Map, MapView, Layer) {
var map = new Map({
basemap: "dark-gray-vector"
});
// Create the MapView
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 6,
center: [-87, 34]
});
Layer.fromPortalItem({
portalItem: {
// autocasts as new PortalItem()
id: "e8f85b4982a24210b9c8aa20ba4e1bf7"
}
}).then(function (layer) {
// add the layer to the map
map.add(layer);
// Create a new popupTemplate for the layer and
// format the numeric field values using the FieldInfoFormat properties. Call the custom populationChange()
// function to calculate percent change for the county.
var popupTemplate = {
// autocasts as new PopupTemplate()
title: "Population in {NAME}",
outFields: ["*"],
content: populationChange,
fieldInfos: [
{
fieldName: "POP2010",
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "POP10_SQMI",
format: {
digitSeparator: true,
places: 2
}
},
{
fieldName: "POP2013",
format: {
digitSeparator: true,
places: 0
}
},
{
fieldName: "POP13_SQMI",
format: {
digitSeparator: true,
places: 2
}
}
]
};
layer.popupTemplate = popupTemplate;
function populationChange(feature) {
var div = document.createElement("div");
var upArrow =
'<svg width="16" height="16" ><polygon points="14.14 7.07 7.07 0 0 7.07 4.07 7.07 4.07 16 10.07 16 10.07 7.07 14.14 7.07" style="fill:green"/></svg>';
var downArrow =
'<svg width="16" height="16"><polygon points="0 8.93 7.07 16 14.14 8.93 10.07 8.93 10.07 0 4.07 0 4.07 8.93 0 8.93" style="fill:red"/></svg>';
// Calculate the population percent change from 2010 to 2013.
var diff =
feature.graphic.attributes.POP2013 -
feature.graphic.attributes.POP2010;
var pctChange = (diff * 100) / feature.graphic.attributes.POP2010;
var arrow = diff > 0 ? upArrow : downArrow;
// Add green arrow if the percent change is positive and a red arrow for negative percent change.
div.innerHTML =
"As of 2010, the total population in this area was <b>" +
feature.graphic.attributes.POP2010 +
"</b> and the density was <b>" +
feature.graphic.attributes.POP10_SQMI +
"</b> sq mi. As of 2013, the total population was <b>" +
feature.graphic.attributes.POP2013 +
"</b> and the density was <b>" +
feature.graphic.attributes.POP13_SQMI +
"</b> sq mi. <br/> <br/>" +
"Percent change is " +
arrow +
"<span style='color: " +
(pctChange < 0 ? "red" : "green") +
";'>" +
pctChange.toFixed(3) +
"%</span>";
return div;
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>