Highlight Popup Feature from Map Image Layer, JS API 4.9

5368
15
Jump to solution
11-06-2018 06:19 PM
cle444
by
Occasional Contributor

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.

0 Kudos
15 Replies
RobertScheitlin__GISP
MVP Emeritus

Ashley,

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

0 Kudos
AshleyPeters
Occasional Contributor III

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

0 Kudos
AshleyPeters
Occasional Contributor III

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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

0 Kudos
AshleyPeters
Occasional Contributor III

Thank you! I did not catch that difference.

0 Kudos
Nicolas_
New Contributor III

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;
    }
})

 

0 Kudos