Converting JS API V3 to V4

victhomas · ‎08-12-2019

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

<!DOCTYPE html>
<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 API</title>
	<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 V4</title>
	<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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

TateM · ‎08-18-2019

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.

victhomas · ‎08-20-2019

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.