Thanks for the codepen.
I have fixed the code for you - atleast till the part of getting the Park Layer and the graphic selection, however, it is throwing error for geometryEngine not being declared - didn't dig further on this, but I believe you can take this further.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS JavaScript Tutorials: Create a JavaScript starter app</title>
<style>
html, body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#viewDiv {
padding: 0;
height: 100%;
width: 100%;
}
#legendWidget {
position: absolute;
right:0;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css">
<script src="https://js.arcgis.com/4.15/"></script>
<script>
require([
"esri/WebMap",
"esri/views/MapView",
"esri/widgets/BasemapToggle",
"esri/widgets/Legend",
"esri/widgets/ScaleBar",
"esri/widgets/Expand",
"esri/layers/GraphicsLayer",
"esri/widgets/Locate",
"esri/widgets/Track",
"esri/Graphic",
"esri/widgets/Compass"
], function(WebMap, MapView, BasemapToggle, Legend, ScaleBar, Expand, GraphicsLayer, Locate, Track, Graphic, Compass) {
var webmap = new WebMap({
portalItem: {
id: "af2ccc6638624fa089548b1a0a8fdb45"
}
});
var view = new MapView({
container: "viewDiv",
//*** UPDATE ***//
map: webmap
//center: [-118.80500,34.02700],
//zoom: 13
});
var basemapToggle = new BasemapToggle({
view: view,
nextBasemap: "satellite"
});
view.ui.add(basemapToggle, "bottom-right");
var legend = new Legend({
container: document.createElement("div"),
view: view
});
// view.ui.add(legend, "top-right");
var scalebar = new ScaleBar({
view: view
});
view.ui.add(scalebar, "bottom-left");
legendExpand = new Expand({
expandIconClass: "esri-icon-layer-list", // see https://developers.arcgis.com/javascript/latest/guide/esri-icon-font/
expandTooltip: "Legend", // optional, defaults to "Expand" for English locale
view: view,
content: legend.domNode
});
view.ui.add(legendExpand, "top-right");
var coordsWidget = document.createElement("div");
coordsWidget.id = "coordsWidget";
coordsWidget.className = "esri-widget esri-component";
coordsWidget.style.padding = "7px 15px 5px";
view.ui.add(coordsWidget, "bottom-right");
function showCoordinates(pt) {
var coords = "Lat/Lon " + pt.latitude.toFixed(3) + " " + pt.longitude.toFixed(3) +
" | Scale 1:" + Math.round(view.scale) +
" | Zoom " + view.zoom;
coordsWidget.innerHTML = coords;
}
view.watch("stationary", function(isStationary) {
showCoordinates(view.center);
});
view.on("pointer-move", function(evt) {
showCoordinates(view.toMap({ x: evt.x, y: evt.y }));
});
// var locate = new Locate({
// view: view,
// useHeadingEnabled: false,
// goToOverride: function(view, options) {
// options.target.scale = 1500; // Override the default map scale
// return view.goTo(options.target);
// }
// });
//
// view.ui.add(locate, "top-left");
var track = new Track({
view: view,
graphic: new Graphic({
symbol: {
type: "simple-marker",
size: "12px",
color: "green",
outline: {
color: "#efefef",
width: "1.5px"
}
}
}),
useHeadingEnabled: false // Don't change orientation of the map
});
view.ui.add(track, "top-left");
var compass = new Compass({
view: view
});
// adds the compass to the top left corner of the MapView
view.ui.add(compass, "top-left");
var activeGraphic;
function findNearestGraphic(event) {
return view.hitTest(event).then(function (response) {
var graphic;
// Get the Trail graphics only
if (response.results.length) {
graphic = response.results.filter(function (result) {
return result.graphic.layer === parksLayer;
})[0].graphic;
}
// Only return new graphics are found
if (graphic) {
if (!activeGraphic || (activeGraphic.attributes.OBJECTID !== graphic.attributes.OBJECTID)) {
return graphic;
} else {
return null;
}
} else {
return null;
}
});
}
var bufferGraphic;
function drawBuffer(bufferGeometry) {
view.graphics.remove(bufferGraphic);
bufferGraphic = new Graphic({
geometry: bufferGeometry,
symbol: {
type: "simple-fill",
color: "rgba(0,0,0,0)",
outline: {
color: "rgba(0,0,0,.5)",
width: 1
}
}
});
view.graphics.add(bufferGraphic);
}
var parksLayer;
//var parksLayer = webmap.findLayerById("958f6534812a4407925a2a18a640b841");
view.when(function() {
parksLayer = webmap.allLayers.find(function(layer) {
return layer.title === "Parks";
});
console.log(parksLayer);
view.on("pointer-move", function(event){
findNearestGraphic(event).then(function(graphic){
if (graphic) {
activeGraphic = graphic;
var buffer = geometryEngine.geodesicBuffer(activeGraphic.geometry, .25, "miles");
drawBuffer(buffer);
}
});
});
});
});
</script>
</head>
<body>
<div id="legendWidget"></div>
<div id="viewDiv"></div>
</body>
</html>
Do let me know if this works.