-
Notifications
You must be signed in to change notification settings - Fork 0
/
continuous.html
124 lines (113 loc) · 3.53 KB
/
continuous.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
<html>
<head>
<meta 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 visualization-vv-color sample, read the original sample description at developers.arcgis.com.
https://developers.arcgis.com/javascript/latest/sample-code/visualization-vv-color/index.html
-->
<title>
Data-driven continuous color | Sample | ArcGIS API for JavaScript 4.16
</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.16/esri/themes/light/main.css"
/>
<!-- <script src="https://js.arcgis.com/4.16/"></script> -->
<script src="http://jscore.esri.com/debug/4.16/dojo/dojo.js"></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) {
const defaultSym = {
type: "simple-marker", // autocasts as new SimpleFillSymbol()
outline: {
// autocasts as new SimpleLineSymbol()
color: [128, 128, 128, 0.2],
width: "0.5px"
}
};
/*****************************************************************
* Set a color visual variable on the renderer. Color visual variables
* create continuous ramps that map low data values to weak or
* neutral colors and high data values to strong/deep colors. Features
* with data values in between the min and max data values are assigned
* a color proportionally between the min and max colors.
*****************************************************************/
const renderer = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: defaultSym,
label: "U.S. County",
visualVariables: [
{
type: "color",
// field: "POP_POVERTY",
field: "OBJECTID",
// normalizationField: "TOTPOP_CY",
legendOptions: {
title: "% population in poverty by county"
},
stops: [
{
value: 0.1,
color: "#FFFCD4",
label: "<10%"
},
{
value: 0.3,
color: "#350242",
label: ">30%"
}
]
}
]
};
const povLayer = new FeatureLayer({
url:
// "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/counties_politics_poverty/FeatureServer/0",
"https://gisdata.seattle.gov/server/rest/services/SDOT/SDOT_Streets/MapServer/6",
renderer: renderer,
title: "Poverty in the southeast U.S.",
minScale: 0,
maxScale: 0,
});
const map = new Map({
basemap: "gray-vector",
layers: [povLayer]
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-122.5, 47.5],
zoom: 9
});
view.ui.add(
new Legend({
view: view
}),
"top-right"
);
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>