Trying to add the basemap toggle to a 3d scene. Can some please correct me. 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>Polygon extrusion 3D - 4.0 beta 1</title>
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<style>
html,
body {
padding: 0;
margin: 0;
}
#BasemapToggleDiv {
position: absolute;
top: 20px;
right: 20px;
z-index: 50;
}
#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: 40px;
color: white;
background-color: rgba(34, 34, 34, 0.5);
z-index: 102;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.0beta1/esri/css/esri.css">
<script src="https://js.arcgis.com/4.0beta1/"></script>
<script>
var map, view;
require([
"esri/Map",
"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, Color, SceneView, BasemapToggle, BasemapToggleVM, FeatureLayer, PolygonSymbol3D,
ExtrudeSymbol3DLayer, SimpleRenderer) {
//Create map
map = new Map({
basemap: "dark-gray"
});
//Create SceneView for 3d visualization
view = new SceneView({
container: "viewDiv",
map: map,
camera: {
position: [-86.8757632, 37.656801, 38000],
tilt: 60,
heading: -60
}
});
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"
});
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("white"),
new Color("red")
]
}]
});
featureLayer.renderer = extrudePolygonRenderer;
});
</script>
</head>
<body>
<div id="textbox1">
<h3>Evansville Vanderburgh County | 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>
