topic Re: Highlight Popup Feature from Map Image Layer, JS API 4.9 in ArcGIS JavaScript Maps SDK Questions

Highlight Popup Feature from Map Image Layer, JS API 4.9

cle444 — Wed, 07 Nov 2018 02:19:55 GMT

Questions:

1. Mechanism of highlighting popup's selected feature from a query enabled map image layer? Found the popup highlighting is enabled by default for feature layers, controlled by view.highlightOptions. Is there a magical setting for map image layer then there is no need to have a workaround using graphics?

2. For the feature layer popup highlighting, where is that piece of blue highlighting graphic stored in JS? Initially, I thought it may be in view.graphics, not there.

Side by side comparison:

Map Service, popup and no highlighting: Highlight popup on MapImageLayer - ArcGIS JS API 4.9

Feature Service, popup and highlighting in blue: Highlight popup on FeatureLayer - ArcGIS JS API 4.9

Appreciated if there is anyone with such experience.

Re: Highlight Popup Feature from Map Image Layer, JS API 4.9

RobertScheitlin__GISP — Wed, 07 Nov 2018 14:47:26 GMT

Hua,

In the 3.x API when a ArcGISDynamicMapServiceLayer has infoTemplates defined, the API would query the map service when a click occurred to see if the click intersected a feature and would return the geometry from the intersected feature to the map popup to be used as the highlight geometry.

1. This is not the case in 4.x. I am not sure the reason way but can speculate that it is overhead that the API developer did not want coded into the API and now leave to developer to add the graphic for the highlight in their own code.

2. The API directly draws to the canvas for this and not the default view.graphics (as far as I know).

Re: Highlight Popup Feature from Map Image Layer, JS API 4.9

cle444 — Wed, 07 Nov 2018 22:42:55 GMT

Thanks Rob. Have done another dig and found something that I think better put it here.

The highlight works for feature layers because of FeatureLayerView has a method highlight.

E.g. const highlightFeature = featLyrView.highlight(feat.attributes["OBJECTID"]);

To remove, use highlightFeature.remove();

Still not sure where that highlight graphic is stored, anyone can shed some light on this?

In contrast, for map image layers, the corresponding layer view has the declared class of "esri.views.2d.layers.MapImageLayerView2D", which simply doesn't have this highlight method. This is probably the reason no auto highlight on image layers.

Re: Highlight Popup Feature from Map Image Layer, JS API 4.9

RobertScheitlin__GISP — Thu, 08 Nov 2018 14:44:31 GMT

Still not sure where that highlight graphic is stored, anyone can shed some light on this?

The API directly draws to the canvas for this and not the default view.graphics (as far as I know).

Re: Highlight Popup Feature from Map Image Layer, JS API 4.9

cle444 — Fri, 09 Nov 2018 09:28:58 GMT

I hear you Rob, but don't quite get it what canvas means. If API can draw the highlight and then dismiss it, does it mean the graphic is stored somewhere?

Re: Highlight Popup Feature from Map Image Layer, JS API 4.9

RobertScheitlin__GISP — Fri, 09 Nov 2018 14:19:57 GMT

Hua,

Canvas is:

HTML5 Canvas

In the past esri used SVG to render all their layers in the browser but in modern HTML5 browsers there is the much more capable Canvas. You can see that there is no layer used for this graphic if you loop through all the maps layers using allLayers collection. I have not tracked it down yet but I beleive the highlight is drawn on the same canvas as the FeatureLayer.

If API can draw the highlight and then dismiss it, does it mean the graphic is stored somewhere?

When the FeatureLayerView executes highlight method the return of this method is a object that can be user to remove the highlight.

Re: Highlight Popup Feature from Map Image Layer, JS API 4.9

AshleyPeters — Mon, 29 Jul 2019 18:53:50 GMT

Hua,

Did you find a work around to highlight the popup's selected feature when using MapImageLayer? I'd like to do the same thing in 4.12.

Ashley

Re: Highlight Popup Feature from Map Image Layer, JS API 4.9

RobertScheitlin__GISP — Sat, 11 Dec 2021 23:32:28 GMT

Ashley,

Here is how to do it for a MapImageLayer (assuming the layer type is a polygon).

        view.popup.watch('selectedFeature', function(gra){
          if(gra){
            view.graphics.removeAll();
            var h = view.highlightOptions;
            gra.symbol = {
              type: "simple-fill", // autocasts as new SimpleFillSymbol()
              color: [h.color.r,h.color.g, h.color.b, h.fillOpacity],
              outline: {
                // autocasts as new SimpleLineSymbol()
                color: [h.color.r,h.color.g, h.color.b, h.color.a],
                width: 1
              }
            };
            view.graphics.add(gra);
          }else{
            view.graphics.removeAll();
          }
        });
        
        view.popup.watch('visible', function(vis){
          if(!vis){
            view.graphics.removeAll();
          }
        });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Highlight Popup Feature from Map Image Layer, JS API 4.9

AshleyPeters — Mon, 29 Jul 2019 20:14:24 GMT

Robert,

A huge thank you! I've been trying to figure that out all day.

Ashley

Re: Highlight Popup Feature from Map Image Layer, JS API 4.9

AshleyPeters — Wed, 31 Jul 2019 20:27:09 GMT

Robert,

I've implemented the code from above and it works beautifully on all of my MapImageLayers but one. From what I can tell the only difference is that this layer I want the user to turn on, so I've set the visibility to false. Any ideas?

Ashley

Re: Highlight Popup Feature from Map Image Layer, JS API 4.9

RobertScheitlin__GISP — Wed, 31 Jul 2019 20:30:01 GMT

Ashley,

So are you saying that after it is turned on it will not popup with highlight?

Re: Highlight Popup Feature from Map Image Layer, JS API 4.9

AshleyPeters — Wed, 31 Jul 2019 20:33:12 GMT

Yes, once that layer is visible, the popup and the highlight do not work. But it's working on all of the other MapImageLayers.

Re: Highlight Popup Feature from Map Image Layer, JS API 4.9

AshleyPeters — Sat, 11 Dec 2021 23:32:31 GMT

Code block for the layer that isn't working:

var artificialReefsLayer = new MapImageLayer({
		url: "https://conservationgis.alabama.gov/adcnrweb/rest/services/ArtificialReefs/MapServer",
		sublayers:
			[{id:0,
			popupTemplate: {
			title: "{Reef_Name}",
			content: "The {Reef_Name} is an {Reef_Type} built in {Year}. It is constructed of {Material} and is located at a depth of {Depth} feet in the {Zone} zone at {GPS_Latitu}, {GPS_Longit} ({Latitude_D}, {Longitude}).<br><br> From Perdido Pass, the reef is located {Distance_P} nautical miles offshore. <br><br> From Sand Island Lighthouse, the reef is located {Distance_S} nautical miles offshore."},
			}],			
		title: "Artificial Reefs",
		});
		
		artificialReefsLayer.visible = false;‍‍‍‍‍‍‍‍‍‍‍‍

Code block for one of the layers that is working:

var fwTrailsLayer = new MapImageLayer({
		url: "https://conservationgis.alabama.gov/adcnrweb/rest/services/DCNRTrails/MapServer",
		sublayers:
			[{id:0,
			popupTemplate: {
			title: "{TrailName}",
			content: "Trail Type: {TrailType}<br><br>Located On: {Tract}<br><br>Length (mi.): {Mileage}"},
			definitionExpression: "SPorFW = 'FW'",
			}],			
		title: "Forever Wild Trails",
		});
		
		fwTrailsLayer.minScale = 250000;

		// watch handler: the callback fires each time the scale of the view changes
	var handle = view.watch('scale', function(newScale) {
    console.log("Scale: ", newScale);
    if (newScale > 250000) {
        fwTrailsLayer.listMode = 'hide';
    } else {
        fwTrailsLayer.listMode = 'show';
    }
	});‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

I'm not seeing anything blatantly different between the two. Both are later added to the map as part of a group layer.

Re: Highlight Popup Feature from Map Image Layer, JS API 4.9

RobertScheitlin__GISP — Wed, 31 Jul 2019 20:42:47 GMT

That layer symbology is a Point. The code I provided is only for Polygons

Re: Highlight Popup Feature from Map Image Layer, JS API 4.9

AshleyPeters — Wed, 31 Jul 2019 20:47:20 GMT

Thank you! I did not catch that difference.

Re: Highlight Popup Feature from Map Image Layer, JS API 4.9

Nicolas_ — Fri, 01 Dec 2023 19:18:39 GMT

You can control the highlight of the selected features using the popup.

For exemple, if you don't want imagery layers highlighted by the popup, you can do this:

reactiveUtils.watch(() => view.popup.selectedFeature, () => { if (view.popup.selectedFeature && view.popup.selectedFeature.layer.type === "imagery") { view.popup.highlightEnabled = false; } else { view.popup.highlightEnabled = true; } })