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>
