<!DOCTYPE html>
<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">
<meta name="description" content="[PopupTemplate Function - 4.3]">
<!--
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/popupTemplate-function/index.html
-->
<title>PopupTemplate Function - 4.3</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
<script src="https://js.arcgis.com/4.3/"></script>
<style>
html,
body,
#viewDiv {
padding: ;
margin: ;
height: %;
width: %;
}
#title{
background-color:rgba(,,,);
border-radius:px;
display:"block";
}
</style>
<script>
var populationChange;
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/Layer",
"dojo/dom",
"dojo/number",
"dojo/on",
"dojo/domReady!"
],
function(
Map, MapView, Layer,
dom, number, on
) {
var map = new Map({
basemap: "streets"
});
// Create the MapView
var view = new MapView({
container: "viewDiv",
map: map,
zoom: ,
center: [-, ]
});
Layer.fromPortalItem({
portalItem: { // autocast as esri/portal/PortalItem
id: "e8f85b4982a24210b9c8aa20ba4e1bf7"
}
}).then(function(layer) {
// add the layer to the map
map.add(layer);
// create a new popupTemplate for the layer
// format the numeric field values using out of the box
// NumberFormat function. Call populationChange() custom
// function to calculate percent change for the county.
var img="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1494037046&di=2cc42ad6c658ead3624b1cde09db0eac&src=http://www.zhiyinlady.com/d/file/yule/tuku/2016-11-28/smallc8a40348b6a7d7e9a2def3eec4aaf47c.jpg";
var popupTemplate = {
title: "<div id='title'>Population in {NAME}</div>",
content: "As of 2010, the population in this area was <b>{POP2010:NumberFormat}</b> " +
"and the density was <b>{POP10_SQMI:NumberFormat}</b> sq mi. " +
"As of 2013, the population here was <b>{POP2013:NumberFormat}</b> " +
"and the density was <b>{POP13_SQMI:NumberFormat}</b> sq mi. <br/> <br/>" +
"Percent change is {POP2013:populationChange}"+"<img src='" + img + "'>"
};
layer.popupTemplate = popupTemplate;
populationChange = function(value, key, data) {
// calculate the population percent change from 2010 to 2013.
var diff = data.POP2013 - data.POP2010;
var pctChange = (diff * ) / data.POP2010;
var result = diff > ? "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494047482825&di=430ef25b49e7a8eee75fdc7639e39db1&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F14%2F12%2F08%2F66h58PICBjM_1024.jpg" : "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1494047551834&di=3986daac30d2e903e67c8cd2ca05b53d&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F14%2F97%2F65%2F69458PICWaA_1024.jpg";
// add green arrow if the percent change is positive.
// red arrow for negatice percent change.
return "<img src='" + result + "'/>" +
"<span style='color: " +
(pctChange < ? "red" : "green") + ";'>" +
number.format(pctChange, {
places:
}) +
"%</span>";
}
zoomOut();
});
function zoomOut() {
// In this case the view zooms out two LODs on each click
view.goTo({
center: view.center,
zoom: view.zoom +
});
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
