Dear Colleagues, I am very new to JavaScript and cannot make a header on this map I have designed with help from sdk, any assistance here would be appreciated.
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Pie charts | Sample | ArcGIS Maps SDK for JavaScript 4.27</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.27/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.27/"></script>
<script type="module" src="https://js.arcgis.com/calcite-components/1.4.2/calcite.esm.js"></script>
<link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/1.4.2/calcite.css" />
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#filter {
background-color: white;
width: 400px;
}
.btns {
float: right;
padding-top: 5px;
}
#error {
color: red;
display: none;
}
#heading {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background-color: #f0f0f0;
}
.header {
text-align: left;
background: #cca1a2;
color: rgb(255, 255, 255, 0.9);
height: 44px;
display: flex;
align-items: center;
font-weight: bolder;
font-size: 24pt;
}
.header img {
height: 40px;
margin: 0 8px 0 8px;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/widgets/Legend",
"esri/widgets/Expand"
], (Map, MapView, FeatureLayer, Legend, Expand) => {
const map = new Map({
basemap: "gray-vector"
});
const view = new MapView({
map: map,
container: "viewDiv",
center: [32.059, 48.444431],
zoom: 6,
constraints: {
minScale: 9500000,
maxScale: 900000,
snapToZoom: false
}
});
const layer = new FeatureLayer({
url: "https://services.arcgis.com/qovwaCdMoEzUUFzS/arcgis/rest/services/ukr_adm2_NFI/FeatureServer/0",
renderer: {
type: "pie-chart", // autocasts as new PieChartRenderer
size: 75,
attributes: [
{
color: "#b27273",
label: "Provision of NFIs",
field: "Provision_of_NFIs"
},
{
color: "#cca1a2",
field: "Provision_of_Winter_Clothes",
label: "Winter Clothes"
},
{
color: "#e5d0d0",
field: "Support_winter_energy_needs",
label: "Winter Energy Needs"
}
],
backgroundFillSymbol: { // polygon fill behind pie chart
color: [10, 10, 10, 0],
outline: {
width: 0.75,
color: [0, 0, 0, 0.3]
}
},
outline: {
width: 1.0,
color: "gray"
},
visualVariables: [
{
type: "size",
valueExpression:
"$feature.Total",
minDataValue: 1,
maxDataValue: 120000,
minSize: 15,
maxSize: 85
}
]
},
popupTemplate: {
title: "<centre>Breakdown by NFI Activities</center><br>Oblast: {ADM1_EN}</br>Raoin: {ADM2_EN}",
content: [
{
type: "media",
mediaInfos: [
{
title: "Breakdown of People Reached by NFI Activities",
type: "pie-chart",
value: {
fields: ["Support_winter_energy_needs", "Provision_of_Winter_Clothes", "Provision_of_NFIs"]
}
}
]
},
{
type: "fields",
fieldInfos: [
{
fieldName: "Support_winter_energy_needs",
label: "Number of people given cash for Energy Needs",
format: {
digitSeparator: true
}
},
{
fieldName: "Provision_of_Winter_Clothes",
label: "Number of people given winter wear",
format: {
digitSeparator: true
}
},
{
fieldName: "Provision_of_NFIs",
label: "Number of people given NFIs",
format: {
digitSeparator: true
}
},
]
}
],
fieldInfos: [
{
fieldName: "Support_winter_energy_needs",
label: "Number of people given cash for Energy Needs"
},
{
fieldName: "Provision_of_Winter_Clothes",
label: "Number of people given winter wear"
},
{
fieldName: "Provision_of_NFIs",
label: "Number of people given NFIs"
}
],
expressionInfos: [
{
name: "percent-nfi",
title: "Percent given NFI",
expression:
"ROUND((($feature.Provision_of_NFIs/$feature.Total)*100),2)+ '%'",
}
]
}
});
map.add(layer);
layer.definitionExpression = "Total <> '0'";
const legend = new Legend({
view: view
});
view.ui.add(legend, "bottom-left");
view.ui.add(
new Expand({
content: document.getElementById("filter"),
view: view,
expandIcon: "sliders-horizontal",
expandTooltip: "Filter"
}),
"top-right"
);
const filterBy = document.getElementById("filterBy");
const operator = document.getElementById("operator");
const filterPct = document.getElementById("filterPct");
document.getElementById("filterBtn").addEventListener("click", () => {
if (filterBy.value && operator.value && filterPct.value) {
document.getElementById("error").style.display = "none";
let filterStr =
"(" +
filterBy.value +
"/ (Provision_of_Winter_Clothes + Support_winter_energy_needs + Provision_of_NFIs) *100 )" +
operator.value +
filterPct.value;
layer.featureEffect = {
filter: {
where: filterStr
},
excludedEffect: "opacity(20%)"
};
} else {
document.getElementById("error").style.display = "block";
}
});
document.getElementById("resetBtn").addEventListener("click", () => {
document.getElementById("error").style.display = "none";
layer.featureEffect = null;
filterPct.value = null;
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<calcite-card id="filter">
<h3>FILTER BY:</h3>
<calcite-segmented-control id="filterBy">
<calcite-segmented-control-item value="Provision_of_NFIs" checked>Provision of NFI </calcite-segmented-control-item>
<calcite-segmented-control-item value="Provision_of_Winter_Clothes">Provision of Winter Clothes</calcite-segmented-control-item>
<calcite-segmented-control-item value="Support_winter_energy_needs">Support Winter Energy Needs</calcite-segmented-control-item>
</calcite-segmented-control>
<span>
<calcite-select id="operator" style="width: 50%; float: left">
<calcite-option value=">" selected>Greater than</calcite-option>
<calcite-option value="<">Less than</calcite-option>
</calcite-select>
<calcite-input id="filterPct" type="number" min="0" max="100" suffix-text="%"></calcite-input>
</span>
<span id="error">All fields must have value in order to filter.</span>
<span class="btns">
<calcite-button id="resetBtn" appearance="outline">Reset</calcite-button>
<calcite-button id="filterBtn">Filter</calcite-button>
</span>
</calcite-card>
</body>
</html>
