Converting JS API V3 to V4

Question

Hello All, I'm having a little hard time converting the code that I have in ArcGIS JS API v3 into v4. Below is my code in v3 that I'm trying to convert to v4 with the exact functionality that is in v3. I have converted a little bit into v4 already, but the hovering and the on click querying functionality is what I'm having trouble with. Thanks in advanced for any help or pointers. V3 code <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="X-UA-Compatitble" content="IE=Edge" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>V3 JS APItitle> <link rel="stylesheet" href="https://js.arcgis.com/3.28/esri/css/esri.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.28/dijit/themes/claro/claro.css"> <style> html, body, #mapDiv{border:0; margin:0; padding:0; height:90%; width:100%;} style> <script type="text/javascript" src="https://js.arcgis.com/3.28/">script> <script type="text/javascript"> var totalPop; require([ 'esri/map', 'esri/layers/FeatureLayer', 'esri/symbols/SimpleFillSymbol', 'esri/symbols/SimpleLineSymbol', 'esri/Color', 'esri/tasks/query', 'esri/tasks/QueryTask', 'esri/graphic' ], function(Map, FeatureLayer, SimpleFillSymbol, SimpleLineSymbol, Color, Query, QueryTask, Graphic) { var stateLayer = new FeatureLayer('https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3', {mode: FeatureLayer.MODE_DEMAND} ); var mapView = new Map('mapDiv', { basemap: 'streets', center: [-94.84, 39.69], zoom: 5 }); mapView.addLayer(stateLayer); const highlightSymbol = new SimpleFillSymbol( SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 255]), 2), new Color([46, 33, 76, 0.6]) ); //hovering over features stateLayer.on('mouse-over', function(event) { const highlightGraphic = new Graphic(event.graphic.geometry, highlightSymbol); mapView.graphics.add(highlightGraphic); }); mapView.on('click', event => { const query = new Query(); query.returnGeometry = true; query.outFields = ["POP2007"]; query.geometry = event.mapPoint; const queryTask = new QueryTask('https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3'); queryTask.execute(query, featureSet => { mapView.graphics.clear(); const feature = featureSet.features[0]; const mySymbol = new SimpleFillSymbol('none', new SimpleLineSymbol('solid', new Color([255, 0, 255]), 2), new Color([0, 0, 0, 0.5]) ); feature.setSymbol(mySymbol); mapView.graphics.add(feature); //this.selectedMuniName = feature.attributes.municipality_name_esp; totalPop = feature.attributes.POP2007; document.getElementById("TotalPopData").innerHTML = "Total Population: "+totalPop; console.log("Total Population " + totalPop); //for comfirmation of ouput value }); }); mapView.on('load', function() { mapView.disableScrollWheel(); //mapView.disableMapNavigation(); mapView.graphics.enableMouseEvents(); mapView.graphics.on("mouse-out", function(){mapView.graphics.clear()}); }); }); script> head> <body> <div id="mapDiv">div> <div id="TotalPopData" style="font-weight: bold"> div> body> html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ V4 code <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <title>V3 to V4title> <style> html, body, #mapViewDiv{border:0; margin:0; padding:0; height:90%; width:100%;} style> <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css"> <script src="https://js.arcgis.com/4.12/">script> <script> require([ 'esri/Map', 'esri/views/MapView', 'esri/layers/FeatureLayer' ], function(Map, MapView, FeatureLayer) { var stateLayer = new FeatureLayer ({ url: 'https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3', outFields: ["*"] }); var map = new Map({ basemap: 'streets', layers: stateLayer }); const mapView = new MapView({ container: "mapViewDiv", center: [-98.34, 40.28], zoom: 5, map:map }); mapView.on("click", function(event) { var pointXY = { x: event.x, y: event.y }; mapView.hitTest(pointXY).then(response => { if(response.results.length) { var graphic = response.results.filter(dataResult => { return dataResult.graphic.layer === stateLayer; })[0].graphic; const attributes = graphic.attributes; document.getElementById("TotalPopData").innerHTML = "Total Population: "+attributes.POP2007; } }); }); mapView.on('mouse-wheel', event => { event.stopPropagation(); }); }); script> head> <body> <div id="mapViewDiv">div> <div id="TotalPopData" style="font-weight: bold"> div> body> html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

victhomas · Answer

Thanks Tate,

I was able to get the click event to pull out attributes.  I edit the above V4 code with the new code.

Now on to the hovering and border outline, still can't seem to get that working though.

TateM · Answer

Vic,

See the following links:

Esri JavaScript 4x GraphicsLayer on click event

Access features with pointer events | ArcGIS API for JavaScript 4.12

I think those links will help you with what you need, hovering over the features and querying out the data.