topic Re: 4.0 Beta 2 Home Button strange behavior in ArcGIS JavaScript Maps SDK Questions

4.0 Beta 2 Home Button strange behavior

DavidChrest — Wed, 25 Nov 2015 16:56:39 GMT

The Home widget was added in 4.0 Beta 2. It's dead simple to add and the provided example code is a simple, minimal page of just a Scene and the Home Button. However, when I add the Home Button widget to my page which utilizes some other widgets (not sure if this has anything to do with it) my map view literally pans down and zooms in a bit on a nonstop repeating loop right on startup. Has anybody else seen this? Looks like some kind of Beta 2 bug.

David

Re: 4.0 Beta 2 Home Button strange behavior

MikeCrook — Wed, 25 Nov 2015 17:04:02 GMT

I'm currently using the Home button on JS API 4.0 Beta2. I don't see any behavior like that. It appears to be working as intended. However you said that your Home widget is utilized with other widgets and maybe that the problem. I am using a few other controls, like basemap toggle, search widget and a few others and the home button still seems fine. If you provide a snippet, maybe we can spot something wierd.

Re: 4.0 Beta 2 Home Button strange behavior

RickeyFight — Wed, 25 Nov 2015 17:11:11 GMT

David,

Does your console.log give any errors?

Re: 4.0 Beta 2 Home Button strange behavior

MikeCrook — Wed, 25 Nov 2015 17:17:33 GMT

I just zoomed in on the map and clicked then Home Button. Nothing is being logged to the console. Sorry I cant be more helpful.

Re: 4.0 Beta 2 Home Button strange behavior

DavidChrest — Sun, 12 Dec 2021 04:05:14 GMT

Thanks much Mike. My page has other controls too like you: basemap toggle, search widget, and others. My Home widget is not really "utilized" with other widgets. Below is my entire page. All I did was add in the CSS, the "esri/widgets/Home," the "Home" in my variables list, the "homeBtn" setup snippet right after the map setup at the top, and then the <div at the bottom.

<!DOCTYPE html>
<html>


<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Day 1 3D</title>
  <style>
  html,
  body {
  padding: 0;
  margin: 0;
  }

  #searchDiv {
  position: absolute;
  z-index: 20;
  top: 15px;
  left: 65px;
  }

  #buttonsDiv {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 12px;
  background-color: rgba(200, 200, 200, 0.5);
  border: 1px solid black;
  }

  #indicatorSpan {
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  background-color: rgba(100, 100, 100, 0.8);
  border: 2px solid #ccc;
  }

  #environmentDiv {
  position: absolute;
  top: 12px;
  right: 140px;
  padding: 2px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  }

  #BasemapToggleDiv {
  position: absolute;
  top: 78px;
  right: 12px;

  #homediv {
  position: absolute;
  top: 120px;
  left: 10px;
  z-index: 50;
  }

  </style>


  <link rel="stylesheet" href="https://js.arcgis.com/4.0beta2/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/4.0beta2/esri/css/main.css">
  <script src="https://js.arcgis.com/4.0beta2/"></script>


  <script>
  var map, view;


  require([
  "esri/Map",
  "esri/Color",
  "esri/widgets/Home",


  "esri/layers/GraphicsLayer",
  "esri/Graphic",
  "esri/geometry/Point",
  "esri/geometry/Polyline",
  "esri/geometry/Polygon",


  "esri/symbols/SimpleMarkerSymbol",
  "esri/symbols/SimpleLineSymbol",
  "esri/symbols/SimpleFillSymbol",


  "esri/PopupTemplate",
  "esri/views/SceneView",
  "esri/widgets/BasemapToggle",
  "esri/widgets/Search",
  "esri/layers/FeatureLayer",
  "esri/symbols/PolygonSymbol3D",
  "esri/symbols/ExtrudeSymbol3DLayer",
  "esri/renderers/SimpleRenderer",
  "esri/symbols/PointSymbol3D",
  "esri/symbols/ObjectSymbol3DLayer",
  "dojo/on",
  "dojo/dom",
  "dojo/domReady!"
            ],


  function (Map, Color, Home, GraphicsLayer, Graphic, Point, Polyline, Polygon, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, PopupTemplate, SceneView, BasemapToggle, Search, FeatureLayer, PolygonSymbol3D, ExtrudeSymbol3DLayer, SimpleRenderer, PointSymbol3D, ObjectSymbol3DLayer, on, dom) {


  var objectSymbol, objectSymbolRenderer, day1Activities;


  //Create Map
  map = new Map({
  basemap: "topo"
  });




  //Create SceneView and set viewpoint
  view = new SceneView({
  container: "viewDiv",
  map: map,
  scale: 15000,
  center: [-77.009, 38.889]
  })

  var homeBtn = new Home({
  view: view
  }, "homediv");
  homeBtn.startup();


  //<<<ENVIRONMENT - SHADOWS>>>
  //Set the environment in SceneView
  view.environment = {
  lighting: {
  directShadows: true,
  date: new Date("Sun Mar 15 2015 09:00:00 GMT-0500 (EST)")
  }
  };


  //Register the events to controls
  on(dom.byId("timeOfDaySelect"), "change", updateTimeOfDay);
  on(dom.byId("directShadowsInput"), "change", updateDirectShadows);


  //Create the event's callback functions
  function updateTimeOfDay(ev) {
  var select = ev.target;
  var date = select.options[select.selectedIndex].value;
  view.environment.lighting.date = new Date(date);
  }


  function updateDirectShadows(ev) {
  view.environment.lighting.directShadows = !!ev.target.checked;
  }
  //<<<ENVIRONMENT - SHADOWS>>>




  //<<<DAY 1 ACTIVITIES>>>
  //Create objectSymbol for Day 1 Activities and add to renderer
  objectSymbol = new PointSymbol3D({
  symbolLayers: [new ObjectSymbol3DLayer({
  width: 15,
  height: 15,
  anchor: "bottom",
  resource: {
  primitive: "sphere"
  },
  material: {
  color: "purple"
  }
  })]
  });
  objectSymbolRenderer = new SimpleRenderer({
  symbol: objectSymbol
  });


  //Create the Day 1 Activities PopupTemplate
  var template = new PopupTemplate({
  title: "D.C. Day 1 GPS Readings", //description is the text in the popup. {fieldName} can be used to reference the value of the selected feature
  content: "<b> Date: {Day1Date} </b>" +
  "<br><b>Time:</b> {TimeofDay}" +
  "<br><b>Latitude:</b> {Latitude}" +
  "<br><b>Longitude:</b> {Longitude}"
  });


  //Request Day 1 Activities featureLayer and overwrite renderer
  day1Activities = new FeatureLayer({
  url: "http://sushi:6080/arcgis/rest/services/DavidC/MovesDCDay1/MapServer/2",
  outFields: ["*"],
  popupTemplate: template,
  renderer: objectSymbolRenderer,
  //Ensure that all features are shown at all scales
  maxScale: 0,
  minScale: 0
  });
  map.add(day1Activities);


  day1Activities.renderer = objectSymbolRenderer;




  //<<<STARBUCKS>>>
  //Create objectSymbol for Starbucks and add to renderer
  objectSymbolSB = new PointSymbol3D({
  symbolLayers: [new ObjectSymbol3DLayer({
  width: 15,
  height: 50,
  anchor: "bottom",
  resource: {
  primitive: "cylinder"
  },
  material: {
  color: ([115, 0, 0, 0.5])
  }
  })]
  });
  objectSymbolSBRenderer = new SimpleRenderer({
  symbol: objectSymbolSB
  });


  //Create the Starbucks PopupTemplate
  var templateSB = new PopupTemplate({
  title: "Starbucks  {Name}", //description is the text in the popup. {fieldName} can be used to reference the value of the selected feature
  content: "<b>Store Number: {Store_Number}</b>" +
  "<br><b>Name:</b> {Name}" +
  "<br><b>Ownership:</b> {Ownership_Type}" +
  "<br><b>Products:</b> {Features_Products}" +
  "<br><b>Services:</b> {Features_Service}" +
  "<br><b>Phone:</b> {Phone}" +
  "<br><b>Address:</b> {Street_Address}" +
  "<br><b>City:</b> {City}" +
  "<br><b>State:</b> {State}" +
  "<br><b>Zip:</b> {Zip}" +
  "<br><b>Latitude:</b> {Latitude}" +
  "<br><b>Longitude:</b> {Longitude}"
  });


  //Request Starbucks featureLayer and overwrite renderer
  starbucks = new FeatureLayer({
  url: "http://sushi:6080/arcgis/rest/services/DavidC/MovesDCSBFF/MapServer/0",
  outFields: ["*"],
  popupTemplate: templateSB,
  renderer: objectSymbolSBRenderer,
  //Ensure that all features are shown at all scales
  maxScale: 0,
  minScale: 0
  });
  map.add(starbucks);


  starbucks.renderer = objectSymbolSBRenderer;




  //<<<FAST FOOD>>>
  //Create objectSymbol for Starbucks and add to renderer
  objectSymbolFF = new PointSymbol3D({
  symbolLayers: [new ObjectSymbol3DLayer({
  width: 15,
  height: 50,
  anchor: "bottom",
  resource: {
  primitive: "diamond"
  },
  material: {
  color: ([0, 0, 254, 0.5])
  }
  })]
  });
  objectSymbolFFRenderer = new SimpleRenderer({
  symbol: objectSymbolFF
  });


  //Create the Fast Food PopupTemplate
  var templateFF = new PopupTemplate({
  title: "Fast Food: {CONAME}", //description is the text in the popup. {fieldName} can be used to reference the value of the selected feature
  content: "<b>Location: {ADDR}</b>" +
  "<br><b>City:</b> {CITY}" +
  "<br><b>State:</b> {STATE}" +
  "<br><b>Zip:</b> {ZIP}" +
  "<br><b>Phone:</b> {PHONE}" +
  "<br><b>NAICS Code:</b> {NAICS}" +
  "<br><b>SIC Code:</b> {SIC}" +
  "<br><b>Year Started:</b> {YRSTARTED}" +
  "<br><b>Latitude:</b> {Latitude}" +
  "<br><b>Longitude:</b> {Longitude}"
  });




  //Request Fast Food featureLayer and overwrite renderer
  fastfood = new FeatureLayer({
  url: "http://sushi:6080/arcgis/rest/services/DavidC/MovesDCSBFF/MapServer/1",
  outFields: ["*"],
  popupTemplate: templateFF,
  renderer: objectSymbolFFRenderer,
  //Ensure that all features are shown at all scales
  maxScale: 0,
  minScale: 0
  });
  map.add(fastfood);


  fastfood.renderer = objectSymbolFFRenderer;




  //Create Buildings featureLayer and add to the map
  var buildings3D = new FeatureLayer({
  url: "http://sushi:6080/arcgis/rest/services/DavidC/MovesDCTransit/MapServer/4"
  });
  map.add(buildings3D);


  //Create the Renderer for the buildings,
  var extrudePolygonRenderer = new SimpleRenderer({
  symbol: new PolygonSymbol3D({
  symbolLayers: [new ExtrudeSymbol3DLayer()]
  }),
  visualVariables: [{
  type: "sizeInfo",
  field: "Stories",
  minSize: 30,
  maxSize: 30,
  minDataValue: 8,
  maxDataValue: 8
                    }, {
  type: "colorInfo",
  colors: [
  new Color([190, 210, 255, 0.75])
             ]
            }]
  });


  buildings3D.renderer = extrudePolygonRenderer;


  //Search Widget
  var searchWidget = new Search({
  view: view
  }, "searchDiv");


  searchWidget.startup();




  //<<<EASY NAVIGATION>>>
  //Register events to control
  var rotateAntiClockwiseSpan = dom.byId("rotateAntiClockwiseSpan");
  var rotateClockwiseSpan = dom.byId("rotateClockwiseSpan");
  var indicatorSpan = dom.byId("indicatorSpan");
  on(rotateClockwiseSpan, "click", function () {
  rotateView(1);
  });
  on(rotateAntiClockwiseSpan, "click", function () {
  rotateView(-1);
  });
  on(indicatorSpan, "click", tiltView);


  //Watch the change on view.camera
  view.watch("camera", updateIndicator);


  //Create the event's callback functions
  function rotateView(direction) {
  var heading = view.camera.heading;


  // Set the heading of the view to the closest multiple of 90 degrees,
  // depending on the direction of rotation
  if (direction > 0) {
  heading = Math.floor((heading + 1e-3) / 90) * 90 + 90;
  } else {
  heading = Math.ceil((heading - 1e-3) / 90) * 90 - 90;
  }
  view.animateTo({
  heading: heading
  });
  }


  function tiltView() {
  // Get the camera tilt and add a small number for numerical inaccuracies
  var tilt = view.camera.tilt + 1e-3;


  // Switch between 3 levels of tilt
  if (tilt >= 80) {
  tilt = 0;
  } else if (tilt >= 40) {
  tilt = 80;
  } else {
  tilt = 40;
  }
  view.animateTo({
  tilt: tilt
  });
  }


  function updateIndicator(camera) {
  var tilt = camera.tilt;
  var heading = camera.heading;


  // Update the indicator to reflect the current tilt/heading using
  // css transforms.
  var transform = "rotateX(" + 0.8 * tilt +
  "deg) rotateY(0) rotateZ(" + -heading + "deg)";


  indicatorSpan.style["transform"] = transform;
  indicatorSpan.style["-webkit-transform"] = transform; //Solution for Safari
  }
  //^^^EASY NAVIGATION^^^




  //BASEMAP TOGGLE
  var toggle = new BasemapToggle({
  map: map,
  basemap: "hybrid"
  }, "BasemapToggleDiv");
  toggle.startup();




  //<<<GRAPHICS>>>
  graphicsLayer = new GraphicsLayer();
  map.add(graphicsLayer);


  //Add a 3D point graphic
  var point = new Point({
  x: -77.011,
  y: 38.89686,
  z: 650
  }),


  markerSymbol = new SimpleMarkerSymbol({
  color: [69, 150, 255],
  outline: new SimpleLineSymbol({
  color: [255, 0, 0],
  width: 2
  })
  });


  pointGraphic = new Graphic({
  geometry: point,
  symbol: markerSymbol
  });


  graphicsLayer.add(pointGraphic);


  //Add a 3D polyline graphic
  var polyline = new Polyline([
  [-77.011, 38.89686, 0],
  [-77.011, 38.89686, 640]
        ]),


  lineSymbol = new SimpleLineSymbol({
  color: [69, 150, 255],
  width: 4
  });


  polylineGraphic = new Graphic({
  geometry: polyline,
  symbol: lineSymbol
  });


  graphicsLayer.add(polylineGraphic);


  //Add a 3D polygon graphic
  //Ploygon Coordinates taken from digitized KML in Google Earth
  var polygon = new Polygon([
  [-77.01096035528856, 38.8967466432082, 400],
  [-77.01092530398697, 38.89665268015742, 400],
  [-77.0103007644429, 38.89665637370967, 400],
  [-77.01029444259881, 38.89689790704291, 400],
  [-77.0102010903575, 38.89690267859739, 400],
  [-77.01020040140389, 38.8972096365415, 400],
  [-77.01157574798415, 38.89720378112004, 400],
  [-77.01147251335793, 38.89690596573629, 400],
  [-77.01139745184112, 38.89691800587753, 400],
  [-77.01130350043968, 38.89665972200029, 400],
  [-77.01096035528856, 38.8967466432082, 400]
        ]),


  //fillSymbol does not seem to work unless polygon covers a very large area
  fillSymbol = new SimpleFillSymbol({
  color: [227, 139, 79],
  outline: new SimpleLineSymbol({
  color: [255, 0, 0, 0.5],
  width: 10
  })
  });


  polygonGraphic = new Graphic({
  geometry: polygon,
  symbol: fillSymbol
  });


  graphicsLayer.add(polygonGraphic);
  //^^^GRAPHICS^^^


  });
  </script>
</head>


<body>
  <div id="searchDiv"></div>

  <div id="viewDiv">
    <div id="homediv"></div>
  </div>
  
  <div id="BasemapToggleDiv"></div>
  <div id="buttonsDiv">
  <button id="rotateAntiClockwiseSpan" title="Rotate 90°">↻</button>
  <button id="indicatorSpan"></button>
  <button id="rotateClockwiseSpan" title="Rotate 90°">↺</button>
  </div>
  <div id="environmentDiv">
  <table>
  <tr>
  <td>Time of day:</td>
  <td>
  <select id="timeOfDaySelect">
  <option value="Sun Mar 15 2015 09:00:00 GMT-0500 (EST)">Morning</option>
  <option value="Sun Mar 15 2015 12:00:00 GMT-0500 (EST)">Noon</option>
  <option value="Sun Mar 15 2015 16:00:00 GMT-0500 (EST)">Afternoon</option>
  <option value="Sun Mar 15 2015 18:00:00 GMT-0500 (EST)">Evening</option>
  </select>
  </td>
  </tr>
  <tr>
  <td>Direct shadows:</td>
  <td>
  <input id="directShadowsInput" type="checkbox" checked="yes">
  </td>
  </tr>
  </table>
  </div>


</body>


</html>

Re: 4.0 Beta 2 Home Button strange behavior

DavidChrest — Wed, 25 Nov 2015 17:25:11 GMT

I get a warning that says this:

"js.arcgis.com/4.0beta2/init.js:823 Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/."

Re: 4.0 Beta 2 Home Button strange behavior

DavidChrest — Wed, 25 Nov 2015 17:27:17 GMT

Although, the same message appears on my other Beta 2 pages that work fine and do not have the Home Button so this really doesn't mean much in this case.

Re: 4.0 Beta 2 Home Button strange behavior

MikeCrook — Wed, 25 Nov 2015 17:29:00 GMT

the main difference between our code is.

YOUR USING THE SCENEVIEW:

view = new SceneView({

container: "viewDiv",

map: map,

scale: 15000,

center: [-77.009, 38.889]

})

AND I'm using the MapView. Perhaps that's where the issue is...

Re: 4.0 Beta 2 Home Button strange behavior

MikeCrook — Wed, 25 Nov 2015 17:30:12 GMT

and maybe your need to define extext in your view?

Re: 4.0 Beta 2 Home Button strange behavior

RickeyFight — Wed, 25 Nov 2015 17:35:40 GMT

Look at this example: ArcGIS API for JavaScript Sandbox

Re: 4.0 Beta 2 Home Button strange behavior

MikeCrook — Wed, 25 Nov 2015 17:39:35 GMT

oh, so maybe its an issue using the 3D view and the home button... For the home button with 2D seems to work properly...

Re: 4.0 Beta 2 Home Button strange behavior

DavidChrest — Sun, 12 Dec 2021 04:05:17 GMT

The live example code (https://developers.arcgis.com/javascript/beta/sample-code/widgets-home/live/index.html) as well as the "Explore in Sandbox" page (https://developers.arcgis.com/javascript/beta/sample-code/sandbox/sandbox.html?sample=widgets-home) uses SceneView. I even copied over the same SceneView code and have the same view of the globe but that just pans down and zooms in repeated loop. Below is Esri's simple sample that works. I even copied it to an html file on my PC, opened it and it works fine. But when I insert required Home Button code into my page, I get this very strange behavior. Something in my code is really clashing with that new Home Button.

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Home button - 4.0beta2</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.0beta2/esri/css/main.css">
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
    }
    
    #homediv {
      position: absolute;
      top: 120px;
      left: 10px;
      z-index: 50;
    }
  </style>
  <script src="https://js.arcgis.com/4.0beta2/"></script>
  <script>
    require([
      "esri/Map",
      "esri/views/SceneView",
      "esri/widgets/Home",
      "dojo/domReady!"
    ], function(
      Map, SceneView, Home
    ) {
      var map = new Map({
        basemap: "streets"
      });
      var view = new SceneView({
        container: "viewDiv",
        map: map,
        center: [-56.049, 38.485, 78],
        zoom: 3
      });
      var homeBtn = new Home({
        view: view
      }, "homediv");
      homeBtn.startup();
    });
  </script>
</head>
<body>
  <div id="viewDiv">
    <div id="homediv"></div>
  </div>
</body>
</html>

Re: 4.0 Beta 2 Home Button strange behavior

DavidChrest — Wed, 25 Nov 2015 17:51:24 GMT

Esri's example uses Home Button on a 3D view. See my links below.

Re: 4.0 Beta 2 Home Button strange behavior

YueWu1 — Wed, 25 Nov 2015 18:06:51 GMT

Hi David,

the issue is you didn't declare the body css well enough, missing a comma after body {}

you missing #viewDiv, and #homediv

I based on your code and tweak this two thing and it works normal now.

Hope this can help.

body{

padding: 0;

margin: 0;

#viewDiv {

padding: 0;

margin: 0;

height: 100%;

}

#homediv {

position: absolute;

top: 120px;

left: 10px;

z-index: 50;

}

Re: 4.0 Beta 2 Home Button strange behavior

DavidChrest — Sun, 12 Dec 2021 04:05:21 GMT

This still does not work and am getting the same strange behavior. I had already had the "#homediv" in my CSS but did add the comma after body{} and added the "#viewDiv" but am still getting the repeated pan, zoom loop. The home button does not even appear on my page as well. See my code below. Would it be possible another widget is interfering?

<!DOCTYPE html>
<html>


<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Day 1 3D</title>
  <style>
  html,
  body {
  padding: 0;
  margin: 0;
  },

  #viewDiv {
  padding: 0;
  margin: 0;
  height: 100%;
  }

  #searchDiv {
  position: absolute;
  z-index: 20;
  top: 15px;
  left: 65px;
  }

  #buttonsDiv {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 12px;
  background-color: rgba(200, 200, 200, 0.5);
  border: 1px solid black;
  }

  #indicatorSpan {
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 30px;
  background-color: rgba(100, 100, 100, 0.8);
  border: 2px solid #ccc;
  }

  #environmentDiv {
  position: absolute;
  top: 12px;
  right: 140px;
  padding: 2px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  }

  #BasemapToggleDiv {
  position: absolute;
  top: 78px;
  right: 12px;

  #homediv {
  position: absolute;
  top: 120px;
  left: 10px;
  z-index: 50;
  }

  </style>


  <link rel="stylesheet" href="https://js.arcgis.com/4.0beta2/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/4.0beta2/esri/css/main.css">
  <script src="https://js.arcgis.com/4.0beta2/"></script>


  <script>
  var map, view;


  require([
  "esri/Map",
  "esri/Color",
  "esri/widgets/Home",


  "esri/layers/GraphicsLayer",
  "esri/Graphic",
  "esri/geometry/Point",
  "esri/geometry/Polyline",
  "esri/geometry/Polygon",


  "esri/symbols/SimpleMarkerSymbol",
  "esri/symbols/SimpleLineSymbol",
  "esri/symbols/SimpleFillSymbol",


  "esri/PopupTemplate",
  "esri/views/SceneView",
  "esri/widgets/BasemapToggle",
  "esri/widgets/Search",
  "esri/layers/FeatureLayer",
  "esri/symbols/PolygonSymbol3D",
  "esri/symbols/ExtrudeSymbol3DLayer",
  "esri/renderers/SimpleRenderer",
  "esri/symbols/PointSymbol3D",
  "esri/symbols/ObjectSymbol3DLayer",
  "dojo/on",
  "dojo/dom",
  "dojo/domReady!"
            ],


  function (Map, Color, Home, GraphicsLayer, Graphic, Point, Polyline, Polygon, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, PopupTemplate, SceneView, BasemapToggle, Search, FeatureLayer, PolygonSymbol3D, ExtrudeSymbol3DLayer, SimpleRenderer, PointSymbol3D, ObjectSymbol3DLayer, on, dom) {


  var objectSymbol, objectSymbolRenderer, day1Activities;


  //Create Map
  map = new Map({
  basemap: "topo"
  });




  //Create SceneView and set viewpoint
  view = new SceneView({
  container: "viewDiv",
  map: map,
  scale: 15000,
  center: [-77.009, 38.889]
  })

  var homeBtn = new Home({
  view: view
  }, "homediv");
  homeBtn.startup();


  //<<<ENVIRONMENT - SHADOWS>>>
  //Set the environment in SceneView
  view.environment = {
  lighting: {
  directShadows: true,
  date: new Date("Sun Mar 15 2015 09:00:00 GMT-0500 (EST)")
  }
  };


  //Register the events to controls
  on(dom.byId("timeOfDaySelect"), "change", updateTimeOfDay);
  on(dom.byId("directShadowsInput"), "change", updateDirectShadows);


  //Create the event's callback functions
  function updateTimeOfDay(ev) {
  var select = ev.target;
  var date = select.options[select.selectedIndex].value;
  view.environment.lighting.date = new Date(date);
  }


  function updateDirectShadows(ev) {
  view.environment.lighting.directShadows = !!ev.target.checked;
  }
  //<<<ENVIRONMENT - SHADOWS>>>




  //<<<DAY 1 ACTIVITIES>>>
  //Create objectSymbol for Day 1 Activities and add to renderer
  objectSymbol = new PointSymbol3D({
  symbolLayers: [new ObjectSymbol3DLayer({
  width: 15,
  height: 15,
  anchor: "bottom",
  resource: {
  primitive: "sphere"
  },
  material: {
  color: "purple"
  }
  })]
  });
  objectSymbolRenderer = new SimpleRenderer({
  symbol: objectSymbol
  });


  //Create the Day 1 Activities PopupTemplate
  var template = new PopupTemplate({
  title: "D.C. Day 1 GPS Readings", //description is the text in the popup. {fieldName} can be used to reference the value of the selected feature
  content: "<b> Date: {Day1Date} </b>" +
  "<br><b>Time:</b> {TimeofDay}" +
  "<br><b>Latitude:</b> {Latitude}" +
  "<br><b>Longitude:</b> {Longitude}"
  });


  //Request Day 1 Activities featureLayer and overwrite renderer
  day1Activities = new FeatureLayer({
  url: "http://sushi:6080/arcgis/rest/services/DavidC/MovesDCDay1/MapServer/2",
  outFields: ["*"],
  popupTemplate: template,
  renderer: objectSymbolRenderer,
  //Ensure that all features are shown at all scales
  maxScale: 0,
  minScale: 0
  });
  map.add(day1Activities);


  day1Activities.renderer = objectSymbolRenderer;




  //<<<STARBUCKS>>>
  //Create objectSymbol for Starbucks and add to renderer
  objectSymbolSB = new PointSymbol3D({
  symbolLayers: [new ObjectSymbol3DLayer({
  width: 15,
  height: 50,
  anchor: "bottom",
  resource: {
  primitive: "cylinder"
  },
  material: {
  color: ([115, 0, 0, 0.5])
  }
  })]
  });
  objectSymbolSBRenderer = new SimpleRenderer({
  symbol: objectSymbolSB
  });


  //Create the Starbucks PopupTemplate
  var templateSB = new PopupTemplate({
  title: "Starbucks  {Name}", //description is the text in the popup. {fieldName} can be used to reference the value of the selected feature
  content: "<b>Store Number: {Store_Number}</b>" +
  "<br><b>Name:</b> {Name}" +
  "<br><b>Ownership:</b> {Ownership_Type}" +
  "<br><b>Products:</b> {Features_Products}" +
  "<br><b>Services:</b> {Features_Service}" +
  "<br><b>Phone:</b> {Phone}" +
  "<br><b>Address:</b> {Street_Address}" +
  "<br><b>City:</b> {City}" +
  "<br><b>State:</b> {State}" +
  "<br><b>Zip:</b> {Zip}" +
  "<br><b>Latitude:</b> {Latitude}" +
  "<br><b>Longitude:</b> {Longitude}"
  });


  //Request Starbucks featureLayer and overwrite renderer
  starbucks = new FeatureLayer({
  url: "http://sushi:6080/arcgis/rest/services/DavidC/MovesDCSBFF/MapServer/0",
  outFields: ["*"],
  popupTemplate: templateSB,
  renderer: objectSymbolSBRenderer,
  //Ensure that all features are shown at all scales
  maxScale: 0,
  minScale: 0
  });
  map.add(starbucks);


  starbucks.renderer = objectSymbolSBRenderer;




  //<<<FAST FOOD>>>
  //Create objectSymbol for Starbucks and add to renderer
  objectSymbolFF = new PointSymbol3D({
  symbolLayers: [new ObjectSymbol3DLayer({
  width: 15,
  height: 50,
  anchor: "bottom",
  resource: {
  primitive: "diamond"
  },
  material: {
  color: ([0, 0, 254, 0.5])
  }
  })]
  });
  objectSymbolFFRenderer = new SimpleRenderer({
  symbol: objectSymbolFF
  });


  //Create the Fast Food PopupTemplate
  var templateFF = new PopupTemplate({
  title: "Fast Food: {CONAME}", //description is the text in the popup. {fieldName} can be used to reference the value of the selected feature
  content: "<b>Location: {ADDR}</b>" +
  "<br><b>City:</b> {CITY}" +
  "<br><b>State:</b> {STATE}" +
  "<br><b>Zip:</b> {ZIP}" +
  "<br><b>Phone:</b> {PHONE}" +
  "<br><b>NAICS Code:</b> {NAICS}" +
  "<br><b>SIC Code:</b> {SIC}" +
  "<br><b>Year Started:</b> {YRSTARTED}" +
  "<br><b>Latitude:</b> {Latitude}" +
  "<br><b>Longitude:</b> {Longitude}"
  });




  //Request Fast Food featureLayer and overwrite renderer
  fastfood = new FeatureLayer({
  url: "http://sushi:6080/arcgis/rest/services/DavidC/MovesDCSBFF/MapServer/1",
  outFields: ["*"],
  popupTemplate: templateFF,
  renderer: objectSymbolFFRenderer,
  //Ensure that all features are shown at all scales
  maxScale: 0,
  minScale: 0
  });
  map.add(fastfood);


  fastfood.renderer = objectSymbolFFRenderer;




  //Create Buildings featureLayer and add to the map
  var buildings3D = new FeatureLayer({
  url: "http://sushi:6080/arcgis/rest/services/DavidC/MovesDCTransit/MapServer/4"
  });
  map.add(buildings3D);


  //Create the Renderer for the buildings,
  var extrudePolygonRenderer = new SimpleRenderer({
  symbol: new PolygonSymbol3D({
  symbolLayers: [new ExtrudeSymbol3DLayer()]
  }),
  visualVariables: [{
  type: "sizeInfo",
  field: "Stories",
  minSize: 30,
  maxSize: 30,
  minDataValue: 8,
  maxDataValue: 8
                    }, {
  type: "colorInfo",
  colors: [
  new Color([190, 210, 255, 0.75])
             ]
            }]
  });


  buildings3D.renderer = extrudePolygonRenderer;


  //Search Widget
  var searchWidget = new Search({
  view: view
  }, "searchDiv");


  searchWidget.startup();




  //<<<EASY NAVIGATION>>>
  //Register events to control
  var rotateAntiClockwiseSpan = dom.byId("rotateAntiClockwiseSpan");
  var rotateClockwiseSpan = dom.byId("rotateClockwiseSpan");
  var indicatorSpan = dom.byId("indicatorSpan");
  on(rotateClockwiseSpan, "click", function () {
  rotateView(1);
  });
  on(rotateAntiClockwiseSpan, "click", function () {
  rotateView(-1);
  });
  on(indicatorSpan, "click", tiltView);


  //Watch the change on view.camera
  view.watch("camera", updateIndicator);


  //Create the event's callback functions
  function rotateView(direction) {
  var heading = view.camera.heading;


  // Set the heading of the view to the closest multiple of 90 degrees,
  // depending on the direction of rotation
  if (direction > 0) {
  heading = Math.floor((heading + 1e-3) / 90) * 90 + 90;
  } else {
  heading = Math.ceil((heading - 1e-3) / 90) * 90 - 90;
  }
  view.animateTo({
  heading: heading
  });
  }


  function tiltView() {
  // Get the camera tilt and add a small number for numerical inaccuracies
  var tilt = view.camera.tilt + 1e-3;


  // Switch between 3 levels of tilt
  if (tilt >= 80) {
  tilt = 0;
  } else if (tilt >= 40) {
  tilt = 80;
  } else {
  tilt = 40;
  }
  view.animateTo({
  tilt: tilt
  });
  }


  function updateIndicator(camera) {
  var tilt = camera.tilt;
  var heading = camera.heading;


  // Update the indicator to reflect the current tilt/heading using
  // css transforms.
  var transform = "rotateX(" + 0.8 * tilt +
  "deg) rotateY(0) rotateZ(" + -heading + "deg)";


  indicatorSpan.style["transform"] = transform;
  indicatorSpan.style["-webkit-transform"] = transform; //Solution for Safari
  }
  //^^^EASY NAVIGATION^^^




  //BASEMAP TOGGLE
  var toggle = new BasemapToggle({
  map: map,
  basemap: "hybrid"
  }, "BasemapToggleDiv");
  toggle.startup();




  //<<<GRAPHICS>>>
  graphicsLayer = new GraphicsLayer();
  map.add(graphicsLayer);


  //Add a 3D point graphic
  var point = new Point({
  x: -77.011,
  y: 38.89686,
  z: 650
  }),


  markerSymbol = new SimpleMarkerSymbol({
  color: [69, 150, 255],
  outline: new SimpleLineSymbol({
  color: [255, 0, 0],
  width: 2
  })
  });


  pointGraphic = new Graphic({
  geometry: point,
  symbol: markerSymbol
  });


  graphicsLayer.add(pointGraphic);


  //Add a 3D polyline graphic
  var polyline = new Polyline([
  [-77.011, 38.89686, 0],
  [-77.011, 38.89686, 640]
        ]),


  lineSymbol = new SimpleLineSymbol({
  color: [69, 150, 255],
  width: 4
  });


  polylineGraphic = new Graphic({
  geometry: polyline,
  symbol: lineSymbol
  });


  graphicsLayer.add(polylineGraphic);


  //Add a 3D polygon graphic
  //Ploygon Coordinates taken from digitized KML in Google Earth
  var polygon = new Polygon([
  [-77.01096035528856, 38.8967466432082, 400],
  [-77.01092530398697, 38.89665268015742, 400],
  [-77.0103007644429, 38.89665637370967, 400],
  [-77.01029444259881, 38.89689790704291, 400],
  [-77.0102010903575, 38.89690267859739, 400],
  [-77.01020040140389, 38.8972096365415, 400],
  [-77.01157574798415, 38.89720378112004, 400],
  [-77.01147251335793, 38.89690596573629, 400],
  [-77.01139745184112, 38.89691800587753, 400],
  [-77.01130350043968, 38.89665972200029, 400],
  [-77.01096035528856, 38.8967466432082, 400]
        ]),


  //fillSymbol does not seem to work unless polygon covers a very large area
  fillSymbol = new SimpleFillSymbol({
  color: [227, 139, 79],
  outline: new SimpleLineSymbol({
  color: [255, 0, 0, 0.5],
  width: 10
  })
  });


  polygonGraphic = new Graphic({
  geometry: polygon,
  symbol: fillSymbol
  });


  graphicsLayer.add(polygonGraphic);
  //^^^GRAPHICS^^^


  });
  </script>
</head>


<body>
  <div id="searchDiv"></div>

  <div id="viewDiv">
    <div id="homediv"></div>
  </div>
  
  <div id="BasemapToggleDiv"></div>
  <div id="buttonsDiv">
  <button id="rotateAntiClockwiseSpan" title="Rotate 90°">↻</button>
  <button id="indicatorSpan"></button>
  <button id="rotateClockwiseSpan" title="Rotate 90°">↺</button>
  </div>
  <div id="environmentDiv">
  <table>
  <tr>
  <td>Time of day:</td>
  <td>
  <select id="timeOfDaySelect">
  <option value="Sun Mar 15 2015 09:00:00 GMT-0500 (EST)">Morning</option>
  <option value="Sun Mar 15 2015 12:00:00 GMT-0500 (EST)">Noon</option>
  <option value="Sun Mar 15 2015 16:00:00 GMT-0500 (EST)">Afternoon</option>
  <option value="Sun Mar 15 2015 18:00:00 GMT-0500 (EST)">Evening</option>
  </select>
  </td>
  </tr>
  <tr>
  <td>Direct shadows:</td>
  <td>
  <input id="directShadowsInput" type="checkbox" checked="yes">
  </td>
  </tr>
  </table>
  </div>


</body>


</html>

Re: 4.0 Beta 2 Home Button strange behavior

RickeyFight — Wed, 25 Nov 2015 18:29:24 GMT

David,

I copied your code into jsbin and added Yue Wu css and it worked.

JS Bin - Collaborative JavaScript Debugging

Re: 4.0 Beta 2 Home Button strange behavior

KenBuja — Wed, 25 Nov 2015 18:39:49 GMT

You're missing the closing } in #BasemapToggleDiv

 #BasemapToggleDiv {  
  position: absolute;  
  top: 78px;  
  right: 12px;

Re: 4.0 Beta 2 Home Button strange behavior

YueWu1 — Wed, 25 Nov 2015 18:41:25 GMT

Hi David,

Make sure the css order is like this body {...},

#viewDiv {

padding: 0;

margin: 0;

height: 100%;

}

#homediv {

position: absolute;

top: 120px;

left: 10px;

z-index: 50;

}

Re: 4.0 Beta 2 Home Button strange behavior

DavidChrest — Wed, 25 Nov 2015 18:46:30 GMT

Ah, there it is, now I see what happened. Just by moving my #homediv to the top of my CSS section, placing it right after body{} and #viewDiv, this fixed it. Not only did I need to add #viewDiv, but I had #homediv at the end of my CSS section. This caused the strange behavior. Thanks so much everyone for your timely help! It is incredibly appreciated.

David

Re: 4.0 Beta 2 Home Button strange behavior

DavidChrest — Wed, 25 Nov 2015 18:47:35 GMT

Yes, that was what was causing the problem. Thanks so much.