Working with the example Extrude Symbol 3D layer. I am trying to figure out how to include a popup for the extruded features. I have only been able to create two instances of the same feature. one that performs the extrusion and another that creates the popup. Would someone be so kind as to show me how to create the popup from the same feature being extruded. Thanks in advance.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Evansville Vand | Poverty</title>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://js.arcgis.com/4.0beta3/esri/css/main.css">
<script src="https://js.arcgis.com/4.0beta3/"></script>
<style>
html,
body {
padding: 0;
margin: 0;
}
#BasemapToggleDiv {
position: absolute;
top: 15px;
left: 70px;
z-index: 103;
}
#div-test{
position: absolute;
top: 30px;
right: 20px;
z-index: 102;
}
div.image {
content:url(http://maps.evansvillegis.com/Apps/Subdivisions/Scans/APC_Logos/APC_Logo_ORG_WHT_small.png);
}
#textbox1{
font-family: 'Roboto', sans-serif;
position: absolute;
height: 50;
width:400px;
padding:10px;
bottom: 40px;
left: 20px;
color: white;
background-color: rgba(34, 34, 34, 0.5);
z-index: 102;
}
/* Popup Style*/
.esri-popup-header {
font-family: 'Roboto', sans-serif;
font-size: 12px;
color: #ffffff;
background-color: rgba(128, 128, 128, 0.8);
}
.esri-popup .esri-background {
font-family: 'Roboto', sans-serif;
color:white;
background-color: rgba(75, 75, 75, 0.7);
}
.esri-popup-header .esri-popup-header-buttons .esri-button {
padding: 12px 8px;
float: left;
color: white;
}
.esri-popup .esri-button {
padding: 12px 7px;
height: 40px;
font-size: 13px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #ffffff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.esri-popup .esri-footer .esri-pagination .esri-page-text {
font-size: 13px;
line-height: 16px;
height: 40px;
padding: 12px 3px;
color: white;
}
</style>
<script>
var map, view;
require([
"esri/Map",
"esri/PopupTemplate",
"esri/Color",
"esri/views/SceneView",
"esri/widgets/BasemapToggle",
"esri/widgets/BasemapToggle/BasemapToggleViewModel",
"esri/layers/FeatureLayer",
"esri/symbols/PolygonSymbol3D",
"esri/symbols/ExtrudeSymbol3DLayer",
"esri/renderers/SimpleRenderer",
"dojo/domReady!"
], function(Map, PopupTemplate, Color, SceneView, BasemapToggle, BasemapToggleVM, FeatureLayer, PolygonSymbol3D,
ExtrudeSymbol3DLayer, SimpleRenderer) {
//Create map
map = new Map({
basemap: "dark-gray"
});
var template = new PopupTemplate({
title: "Poverty Level, Census Tract: {TRACTCE10}",
content: "<p><strong>As of 2010 Census, <b>{POVERTY2}%</b> of people living below poverty level</strong></p>" +
"<ul><li>{Total_Population} Total Population</li>" +
"<li>{Am_Indian_NH} American Indian Non Hispanic</li>" +
"<li>{Asian_NH} Asian Non Hispanic</li>" +
"<li>{Black_NH} Black Non Hispanic</li>" +
"<li>{Hispanic_or_Latino} Hispanic or Latino</li>" +
"<li>{Pacific_Is_NH} Pacific Islander Non Hispanic</li>" +
"<li>{White_NH} White Non Hispanic</li>" +
"<li>{Other_Race_NH} Other Race Non Hispanic</li><ul>",
fieldInfos: [{
fieldName: "Total_Population",
format: {
digitSeparator: true, //Uses a comma separator in large numbers
places: 0 //sets the number of decimal places to 0 and rounds up
}
}, {
fieldName: "Am_Indian_NH",
format: {
digitSeparator: true,
places: 0
}
}, {
fieldName: "Asian_NH",
format: {
digitSeparator: true,
places: 0
}
}, {
fieldName: "Black_NH",
format: {
digitSeparator: true,
places: 0
}
}, {
fieldName: "Hispanic_or_Latino",
format: {
digitSeparator: true,
places: 0
}
}, {
fieldName: "Pacific_Is_NH",
format: {
digitSeparator: true,
places: 0
}
}, {
fieldName: "White_NH",
format: {
digitSeparator: true,
places: 0
}
}]
});
//Create SceneView for 3d visualization
view = new SceneView({
container: "viewDiv",
map: map,
camera: {
position: [-87.5782998, 37.5802499, 50000],
tilt: 40,
heading: -0
}
});
var toggle = new BasemapToggle({
//Setting widget properties via viewModel is subject to
//change for the 4.0 final release
viewModel: new BasemapToggleVM({
view: view,
secondaryBasemap: "hybrid"
})
}, "BasemapToggleDiv");
toggle.startup();
//Create featureLayer and add to the map
var featureLayer = new FeatureLayer({
url: "http://services1.arcgis.com/1vlgiUCSf9FiT4I0/arcgis/rest/services/CensusTractsPoverty/FeatureServer/...",
outFields: ["POVERTY2", "TRACTCE10", "Total_Population", "White_NH", "Hispanic_or_Latino", "Black_NH", "Am_Indian_NH", "Asian_NH", "Pacific_Is_NH", "Other_Race_NH"],
popupTemplate: template
});
map.add(featureLayer);
var featureLayer = new FeatureLayer({
url: "http://services1.arcgis.com/1vlgiUCSf9FiT4I0/arcgis/rest/services/CensusTractsPoverty/FeatureServer/..."
});
map.add(featureLayer);
//Create the Renderer for the featureLayer,
var extrudePolygonRenderer = new SimpleRenderer({
symbol: new PolygonSymbol3D({
symbolLayers: [new ExtrudeSymbol3DLayer()]
}),
visualVariables: [{
type: "sizeInfo",
field: "POVERTY2",
minSize: 100,
maxSize: 1000,
minDataValue: 9.100000,
maxDataValue: 50.099998
}, {
type: "colorInfo",
field: "POVERTY2",
minDataValue: 1,
maxDataValue: 50,
colors: [
new Color("rgb(255, 255, 255)"),
new Color("rgb(255, 88, 0)"),
new Color("rgb(255, 0, 0)")
]
}]
});
featureLayer.renderer = extrudePolygonRenderer;
});
</script>
</head>
<body>
<div id="textbox1">
<h3><i class="fa fa-users"></i> Evansville Vanderburgh Co. | Poverty Data</h3>
<p>This visualization was created by joining the <strong>Poverty Status</strong> 2010 American Community Survey 5-Year Estimates and the 2010 Census Tracts boundaries. The Tract boundaries are extruded based on the percent of people below poverty. The higher the geomtry the higher the poverty rate.</p>
</div>
<div id="div-test" class="image"></div>
<div id="viewDiv">
<div id="BasemapToggleDiv"></div>
</div>
</body>
</html>
