<!DOCTYPE html>
<html>
<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 - 4.4</title>
<style>
body {
font-family: sans-serif;
padding: 0;
margin: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
#viewDiv {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"dojo/domReady!"
], function(
Map, MapView, FeatureLayer
) {
var map = new Map({
basemap: "streets-navigation-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [0.46564130, 51.736810] ,
zoom: 17
});
/********************
* Add feature layer
********************/
// sampling of breweries
var featureLayer = new FeatureLayer({
outFields: ["*"],
//definitionExpression: "country = 'United States'",
// add a custom action
popupTemplate: {
title: "{Postcode}",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "Postcode"
}]
}],
actions: [{
id: "find-brewery",
image: "beer.png",
title: "Brewery Info"
}]
}
});
map.add(featureLayer);
function showResults(response) {
var tbl = document.getElementById("tableDiv");
var tblBody = document.createElement("tbody");
var header = tbl.createTHead();
var headerRow = header.insertRow(0);
var headerCell = document.createElement("th");
headerCell.innerHTML = "Name";
headerRow.appendChild(headerCell);
var headerCell2 = document.createElement("th");
headerCell2.innerHTML = "Alias";
headerRow.appendChild(headerCell2);
var attributes = popup.viewModel.selectedFeature.attributes;
// Get the "website" field attribute
var info = attributes.Postcode;
info.parse(response).fields.forEach(function(field){
var row = document.createElement("tr");
var cell = document.createElement("td");
var cell2 = document.createElement("td");
cell.innerHTML = field.name;
cell2.innerHTML = field.alias;
row.appendChild(cell);
row.appendChild(cell2);
tblBody.appendChild(row);
});
tbl.appendChild(tblBody);
}
}
console.info(response);
};
view.then(function() {
var popup = view.popup;
popup.viewModel.on("trigger-action", function(event) {
if (event.action.id === "find-brewery") {
var attributes = popup.viewModel.selectedFeature.attributes;
// Get the "website" field attribute
var info = attributes.Postcode;
// Make sure the "website" attribute value is not null
if (info !== null) {
// Open up a new browser using the URL value in the 'website' field
// window.open(info.trim());
showResults(info.trim());
// If the "website" value is null, open a new window and Google search the name of the brewery
}
//else {
// attributes.Postcode);
// }
}
});
});
});
</script>
</head>
<body class="light">
<div id="viewDiv" style="float: left; width: 80%; height: 95%;">
<table id="tbl" style="float: right; width: 10%; height: 16%;">></table>
<table id="tableDiv" style="float: right; width: 200%; height: 20%;">></table>
</div>
</body>
</html>