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>
that says this:
