topic Adding basemap toggle widget to 3d scene in ArcGIS JavaScript Maps SDK Questions

Adding basemap toggle widget to 3d scene

MeganWirth — Thu, 11 Feb 2016 14:58:29 GMT

Trying to add the basemap toggle to a 3d scene. Can some please correct me. Thanks in advance.

<!DOCTYPE html>

<html>

<head>

<title>Polygon extrusion 3D - 4.0 beta 1</title>

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

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>

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

</body>

</html>

Re: Adding basemap toggle widget to 3d scene

KenBuja — Sat, 11 Dec 2021 09:45:57 GMT

You should remember to check the console for errors. It was reporting that you had an unexpected "}". You inadvertently closed the require function after the toggle.startup(); line (line 91)

This seems to work

<!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.0beta3/esri/css/esri.css">
    <script src="https://js.arcgis.com/4.0beta3/"></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>

Re: Adding basemap toggle widget to 3d scene

MeganWirth — Thu, 11 Feb 2016 16:46:46 GMT

Thank you Ken! appreciate the help.

Re: Adding basemap toggle widget to 3d scene

MeganWirth — Thu, 11 Feb 2016 17:38:31 GMT

In addition. trying to get the code i posted to work as you did Ken. I also needed to change the script links to 4.0beta3

hope this helps another noobster