Todd,
Sorry I missed that you were missing the actual zoom to layer code.
Here is your example fixed:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Intro to MapView - Create a 2D map - 4.8</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
<script src="https://js.arcgis.com/4.8/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/geometry/support/webMercatorUtils",
"esri/widgets/Search",
"esri/widgets/Locate",
"esri/widgets/Expand",
"esri/layers/TileLayer",
"esri/layers/FeatureLayer",
"esri/widgets/LayerList",
"esri/widgets/BasemapGallery",
"esri/tasks/GeometryService",
"esri/tasks/support/ProjectParameters",
"dojo/dom",
"dojo/domReady!"
], function(Map, MapView, webMercatorUtils, Search, Locate, Expand, TileLayer, FeatureLayer, LayerList, BasemapGallery,
GeometryService, ProjectParameters, dom) {
var droneimage1 = new TileLayer({
url: "https://tiles.arcgis.com/tiles/3xOwF6p0r7IHIjfn/arcgis/rest/services/a010002_1/MapServer",
title: "Drone Image"
});
var eco = new FeatureLayer({
url: "http://services.arcgis.com/3xOwF6p0r7IHIjfn/arcgis/rest/services/OK_LevelIII_Ecoregions/FeatureServe...",
title: "Oklahoma Ecoregions"
});
var map = new Map({
basemap: "streets",
layers: [droneimage1, eco]
});
var view = new MapView({
container: "viewDiv",
map: map,
zoom: 15,
center: [-103.064, 36.175]
});
function showCoordinates(evt) {
var point = view.toMap({
x: evt.x,
y: evt.y
});
var mp = webMercatorUtils.webMercatorToGeographic(point);
dom.byId("info").innerHTML = mp.x.toFixed(3) + ", " + mp.y.toFixed(3);
}
view.when(function() {
view.on("pointer-move", showCoordinates);
});
var searchWidget = new Search({
view: view
});
var locateBtn = new Locate({
view: view
});
view.ui.add(locateBtn, {
position: "top-left"
});
view.ui.add(searchWidget, {
position: "top-right"
});
var layerList = new LayerList({
view: view,
listItemCreatedFunction: function(event) {
var item = event.item;
item.actionsSections = [
[{
title: "Zoom to layer",
className: "esri-icon-zoom-out-fixed",
id: "full-extent"
}]
];
}
});
layerList.on("trigger-action", function(event) {
var id = event.action.id;
if (id === "full-extent") {
if(event.item.layer.fullExtent.spatialReference !== view.spatialReference){
var geomSer = new GeometryService({url: 'http://sampleserver6.arcgisonline.com/arcgis/rest/services/Utilities/Geometry/GeometryServer'});
var params = new ProjectParameters({
geometries: [event.item.layer.fullExtent],
outSpatialReference: view.spatialReference
});
geomSer.project(params).then(function(results){
view.goTo(results[0]);
});
}else{
view.goTo(event.item.layer.fullExtent);
}
}
});
view.ui.add(layerList, "bottom-left");
var basemapGallery = new BasemapGallery({
view: view,
container: document.createElement("div")
});
var bgExpand = new Expand({
view: view,
content: basemapGallery
});
view.ui.add(bgExpand, "top-left");
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<span id="info" style="position:absolute; right:25px; bottom: 25px; color:#000000; font-size: 12px; z-index:50;"></span>
</body>
</html>