FeatureLayer with hover returns extra feature in popup

363
1
Jump to solution
02-10-2021 07:24 AM
GWReid
by
New Contributor II

I change the symbol on a point FeatureLayer (that has a popupTemplate) on hover (using pointer-move, hitTest and view.graphics).  For some reason, I get 2 features found in the popup on click.  Seems like it is picking up the hover graphic I added to view.graphics.  Any suggestions as to why?  Using 4.18. Thanks.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <meta name="description" content="CDO v3 Demo">
  <title>CDO v3 Demo</title>
	
  <style>
	html, body, #mapContainer {
	  padding: 0;
	  margin: 0;
	  height: 100%;
	  width: 100%;
	}
		
	#info {
	  top: 15px;
	  left: 75px;
	  position: absolute;
	  z-index: 99;
	  border-radius: 6px;
	  border: 2px solid gray;
	  color: gray;
	  background: white;
	  padding: 10px;
	  opacity: 0.65;
	}
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/css/main.css">
  <link rel="stylesheet" href="https://js.arcgis.com/4.18/dijit/themes/claro/claro.css">
  <script src="https://js.arcgis.com/4.18/"></script>

  <script>
    require([
	  "esri/Graphic",
	  "esri/geometry/Point",
	  "esri/Map",
	  "esri/views/MapView",
	  "esri/layers/FeatureLayer",
	  "dojo/dom",
	  "dojo/domReady!"
	], function (
	  Graphic,
	  Point,
	  Map,
	  MapView,
	  FeatureLayer,
	  dom
	) {

	  var map = new Map({
	    basemap: "topo"
      });

      var view = new MapView({
	    container: "mapContainer",
	    map: map,
	    center: [-84, 35],
	    zoom: 7,
	    background: {
	 	  color: '#EFEFEF'
	 	},
	 	constraints: {
	 	  rotationEnabled: false
	 	}
      });

      // pseudo data
      const data = [
	    {"id": "CLT", "name": "CHARLOTTE", "latitude": 35.336944, "longitude": -80.885},
		{"id": "ATL", "name": "ATLANTA", "latitude": 33.36333, "longitude": -84.56583},
		{"id": "NSH", "name": "NASHVILLE", "latitude": 35.98, "longitude": -86.661944},
		{"id": "GRE", "name": "GREER", "latitude": 34.88306, "longitude": -82.22028},
		{"id": "KNX", "name": "KNOXVILLE", "latitude": 36.16833, "longitude": -83.40194}
      ]  

      var features = [];

      data.forEach(function(value, i) {
		var feature = {
		  geometry: {
			type: "point",
			x: value.longitude,
			y: value.latitude
		  },
		  attributes: {
			ObjectID: i,
			ID: value.id,
			Name: value.name,
			Latitude: value.latitude,
			Longitude: value.longitude
		  }
		};
		features.push(feature);
      });

      const pointRenderer = {
		type: "simple",
		symbol: {
		  type: "picture-marker",
		  url: "images/marker_default.png",
		  contentType: "image/png",
		  width: "25px",
		  height: "36px"
		}
	  };

      var template = {
        title: "{Name} ({ID})",
        content: "<b>Latitide:</b> {Latitude}<br/><b>Longitude:</b> {Longitude}"
      };
      
      var featurelayer = new FeatureLayer({
		source: features,
	    renderer: pointRenderer,
	    objectIDField: "ObjectID",
	    geometryType: "point",
	    fields: [{
	      name: "ObjectID",
	      alias: "ObjectID",
	      type: "oid"
	    },
	    {
	      name: "ID",
	      alias: "ID",
	      type: "string"
	    },
	    {
	      name: "Name",
	      alias: "Name",
	      type: "string"
	    },
	    {
	      name: "Latitude",
	      alias: "Latitude",
	      type: "double"
	    },
	    {
	      name: "Longitude",
	      alias: "Longitude",
	      type: "double"
	    }],
	    outFields: ["*"],
	    popupTemplate: template
	  });

      map.add(featurelayer);

      function changeCursor(response) {
	    if (response.results.length > 0) {
		  document.getElementById("mapContainer").style.cursor = "pointer";
	    } else {
		  document.getElementById("mapContainer").style.cursor = "default";
	    }
      }

      function hoverGraphic(response) {
	    view.graphics.removeAll();
	    if (response.results.length > 0) {
		  let graphic = response.results[0].graphic;
		  graphic.symbol = {
			type: "picture-marker",
		    url: "images/marker_hover.png",
		    contentType: "image/png",
		    width: "25px",
            height: "36px"
		  }
		  view.graphics.add(graphic);
	    }
      }

      view.on("pointer-move", function (evt) {
	    var screenPoint = {
		  x: evt.x,
		  y: evt.y
	    };
     	view.hitTest(screenPoint).then(function (response) {
     	  changeCursor(response);
     	  hoverGraphic(response);
     	});
      });

    });
  </script>
</head>

<body>
	<div id="mapContainer"></div>
</body>

</html>

 

0 Kudos
1 Solution

Accepted Solutions
UndralBatsukh
Esri Regular Contributor

Hi there,

Yes it seems to be picking up a graphic added to view.graphics. View handles the popup for the graphics added to the view.  Please add the graphic to GraphicsLayer instead. This will ensure that the second graphic is not displayed in the the popup.

 

Hope this helps,

-Undral

View solution in original post

0 Kudos
1 Reply
UndralBatsukh
Esri Regular Contributor

Hi there,

Yes it seems to be picking up a graphic added to view.graphics. View handles the popup for the graphics added to the view.  Please add the graphic to GraphicsLayer instead. This will ensure that the second graphic is not displayed in the the popup.

 

Hope this helps,

-Undral

0 Kudos