Adding popup to extruded polygon

MeganWirth — Fri, 12 Feb 2016 15:58:49 GMT

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>

<title>Evansville Vand | Poverty</title>

<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>

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/0",

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/0"

});

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>

<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>

</body>

</html>

Re: Adding popup to extruded polygon

JakeSkinner — Fri, 12 Feb 2016 19:36:05 GMT

Hi Ryan,

I may be missing something, but when removing your second FeatureLayer instance the feature layer is still extruded and you the popup exists.

Re: Adding popup to extruded polygon

MeganWirth — Sun, 14 Feb 2016 16:02:46 GMT

So it does lol Thanks for taking a look Jake.

topic Adding popup to extruded polygon in ArcGIS JavaScript Maps SDK Questions

Adding popup to extruded polygon

Re: Adding popup to extruded polygon

Re: Adding popup to extruded polygon