<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>
Custom popup actions per feature attribute | JavaScript 4.27
</title>
<style>
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
#viewDiv {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
</style>
<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>
require(["esri/Map", "esri/views/MapView", "esri/layers/GraphicsLayer", "esri/geometry/Polygon","esri/Graphic",
"esri/PopupTemplate",
"esri/core/reactiveUtils"], (
Map,
MapView,
GraphicsLayer,
Polygon,
Graphic,
PopupTemplate,
reactiveUtils
) => {
const map = new Map({
basemap: "streets-navigation-vector"
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-112.42914,38.771353],
zoom: 5
});
/********************
* Add boundary polygon/symbol
********************/
const boundaryPolygon1 = new Polygon({
hasZ: false,
hasM: false,
rings: [[[-112.42914,38.771353],[-112.324772,38.891169],[-112.571965,38.899720]]]
});
const boundaryPolygon2 = new Polygon({
hasZ: false,
hasM: false,
rings: [[[-111.52914,38.771353],[-111.424772,38.891169],[-111.671965,38.899720]]]
});
const theSymbol = {
type: "simple-fill",
style: "solid",
color: [200, 40, 40, 1],
outline: {
color: [255, 0, 0, 255],
width: 2,
type: "simple-line",
style: "solid"
}
};
/********************
* Add graphics layer
********************/
let myAtt1 = {
ObjectID: 1,
name: "John Ross",
address: "1234 Main Street"
};
let myAtt2 = {
ObjectID: 2,
name: "Bob Cattle",
address: null
};
graphicsLayer = new GraphicsLayer();
map.add(graphicsLayer);
// Must use shared PopupTemplate since there can be many boundary Graphic objects
var popTemplate = new PopupTemplate({
title: "Graphic Test",
content: [
{
type: "fields",
fieldInfos: [
{
fieldName: "ObjectID"
},
{
fieldName: "name"
},
{
fieldName: "address"
}
]
}
]
});
const boundaryGraphic1 = new Graphic({
geometry: boundaryPolygon1,
symbol: theSymbol,
attributes: myAtt1,
popupEnabled: true,
popupTemplate: popTemplate
});
const boundaryGraphic2 = new Graphic({
geometry: boundaryPolygon2,
symbol: theSymbol,
attributes: myAtt2,
popupEnabled: true,
popupTemplate: popTemplate
});
view.when(() => {
graphicsLayer.add(boundaryGraphic1);
graphicsLayer.add(boundaryGraphic2);
});
view.when(() => {
// Watch for when features are selected
reactiveUtils.watch(() => view.popup.selectedFeature, (graphic) => {
if (graphic) {
// Get Effective PopupTemplate
const graphicTemplate = graphic.getEffectivePopupTemplate();
// Hide row if null value
for(const fi of graphicTemplate.content[0].fieldInfos) {
var myfield = graphic.attributes[fi.fieldName];
if (!!myfield)
{
fi.visible = true;
}
else
{
fi.visible = false;
}
}
}
});
});
});
</script>
</head>
<body class="light">
<div id="viewDiv" class="esri-widget"></div>
</body>
</html>
