AnsweredAssumed Answered

Adding basemap toggle widget to 3d scene

Question asked by AreaPlan on Feb 11, 2016
Latest reply on Feb 11, 2016 by AreaPlan

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>

Outcomes