- Home
- :
- All Communities
- :
- Developers
- :
- JavaScript Maps SDK
- :
- JavaScript Maps SDK Questions
- :
- Popup is not highlighting when it should
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
Popup is not highlighting when it should
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I have a project with multiple layers. The user can control the layers through the TOC. I have a popup with a fillSymbol added, because all my layers are polygons. An identifyTask executes on the map click and depending in the layer, a different infoTemplate is used, as well as a different color for the header. There's other tools that load a grid based on a user drawn graphic, so some of the choices I've made in the code have to deal with it.
This project was written originally in legacy and I"m trying to get all that code updated to AMD. I noticed today that although my infoTemplates display correctly with the color changes as expected, the polygon isn't highlighting.
I explicitly added highlight:true to my popup definition, but that's the default anyway, so that didn't help. I'm not including all the code and I don't think I can get it working in Fiddle. Our test site is public facing: EEZ Viewer AMD style
selectSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
new Color([255,0,0]), 3), new Color([255,255,0, 0.25])); //red outline, yellow fill
popup = new Popup({
fillSymbol: selectSymbol
}, domConstruct.create("div"));
map = new Map("mapDiv", {
infoWindow: popup,
center: [-92.593, 38.5],
zoom: 7
});
// ---- define information tag formats----
bg_infoTemplate = new InfoTemplate();
bg_infoTemplate.setTitle("Block Group 2010");
bg_infoTemplate.setContent(
"<b>${GEOID10}</b> <br>"
+ "Population: ${Population}<br>"
+ "Unemployment: ${Unemployment}<br/>"
+ "County Poverty: ${CountyPoverty}<br>"
+ "State Poverty: ${StatePoverty}<br>"
+ "Overlap %: ${ZoneCrossPct}"
);
eez_infoTemplate = new InfoTemplate();
eez_infoTemplate.setTitle("EEZ 2000");
eez_infoTemplate.setContent(
"<b>${EEZ_DESC}</b> <br>"
+ "City: ${CITY}<br>"
+ "Township: ${TOWNSHIP}<br>"
+ "County: ${COUNTY}<br/>"
+ "Tract: ${TRACT}<br>"
+ "Block Group: ${BLKGRP}"
);
eez10_infoTemplate = new InfoTemplate();
eez10_infoTemplate.setTitle("EEZ 2010");
eez10_infoTemplate.setContent(
"Tract: ${TRACT}<br>"
+ "Block Group: ${BLKGRP}"
);
tif_infoTemplate = new InfoTemplate ();
tif_infoTemplate.setTitle("Tax Inc Financing");
tif_infoTemplate.setContent (
"<b>${Name}</b><br>"
+ "Description: ${Description}<br/>"
+"Legal Def: ${LegalDef}"
);
//----------- add layers --------------------
countyLayer = new ArcGISDynamicMapServiceLayer(pathName+"/ArcGIS/rest/services/BaseMap/county_simple/MapServer",
{id:"countyLayer"
});
selGraphicsLayer = new GraphicsLayer({id:'selGraphicsLayer'});
var districtLayer = new ArcGISDynamicMapServiceLayer(pathName+"/ArcGIS/rest/services/LEGIS/legisDistrict/MapServer",{
id:'districtLayer', visible:false});
eezLayer = new ArcGISDynamicMapServiceLayer(pathName+"/ArcGIS/rest/services/DED/EEZ/MapServer",{
id:'eezLayer',visible:true, opacity:0.6});
eezFeatureLayer = new FeatureLayer(pathName+"/ArcGIS/rest/services/DED/EEZ/MapServer/3",
{mode: FeatureLayer.MODE_SELECTION,
id: "eezFeatureLayer",
outFields: ["*"],
autoGeneralize: true,
maxAllowableOffset:5});
eezFeatureLayer.setSelectionSymbol(highlightFillSymbol);
eezSelectFeatureLayer = new FeatureLayer(pathName+"/ArcGIS/rest/services/DED/EEZ/MapServer/3",
{mode: FeatureLayer.MODE_SELECTION,
id: "eezSelectFeatureLayer",
outFields: ["*"],
autoGeneralize: true,
maxAllowableOffset:5});
eezSelectFeatureLayer.setSelectionSymbol(selectSymbol);
map.addLayers([countyLayer,selGraphicsLayer,districtLayer, eezLayer, eezFeatureLayer, eezSelectFeatureLayer]);
// ---- populates the Table of contents --------
map.on("layers-add-result", function (event) {
try {
var toc = new TOC({
map: map,
layerInfos: [{
layer: eezLayer,
title: "Enhanced Enterprise Zones",
slider:true
},{
layer: districtLayer,
title: "Legislative Districts"
}]
}, 'tocDiv');
toc.startup();
} catch (e) {
console.log(e.message);
}
});
// ---- change infoWindow header color based on content ----
popup.on( "selection-change", function(){
count = popup.count;
query(".esriPopup .titlePane").style("backgroundColor", "#7EABCD");
query(".esriPopup .titlePane .title").style("backgroundColor", "#7EABCD");
if (count >= 1) {
var feature = popup.getSelectedFeature();
var featureTitle = feature.infoTemplate.title;
switch (featureTitle) {
case "EEZ 2010":
query(".esriPopup .titlePane").style("backgroundColor", "#ff5b5b");
query(".esriPopup .titlePane .title").style("backgroundColor", "#ff5b5b");
break;
case "EEZ 2000":
query(".esriPopup .titlePane").style("backgroundColor", "#bc79ff");
query(".esriPopup .titlePane .title").style("backgroundColor", "#bc79ff");
break;
case "Tax Inc Financing":
query(".esriPopup .titlePane").style("backgroundColor", "#facb74");
query(".esriPopup .titlePane .title").style("backgroundColor", "#facb74");
break;
default:
query(".esriPopup .titlePane").style("backgroundColor", "#7EABCD");
query(".esriPopup .titlePane .title").style("backgroundColor", "#7EABCD");
break;
}
}
});
//---- identify setup and functions ----
identifyClickHandler = on.pausable(map, 'click', executeIdentifyTask);
identifyTask = new IdentifyTask(eezLayer.url);
identifyParams = new IdentifyParameters();
identifyParams.tolerance = 1;
identifyParams.returnGeometry = true;
identifyParams.layerOption = IdentifyParameters.LAYER_OPTION_VISIBLE;
identifyParams.width = map.width;
identifyParams.height = map.height;
function executeIdentifyTask(evt){
map.infoWindow.hide();
identifyParams.mapExtent = map.extent;
var currentVis = getVisibleLayers(eezLayer);
if (mapClick) {
idPoint = evt.mapPoint;
identifyParams.layerIds = currentVis;
}else {
identifyParams.layerIds = [3];
}
identifyParams.geometry = idPoint;
var deferred = identifyTask.execute(identifyParams);
deferred.addCallback(function(response){// response is an array of identify result objects
return arrayUtils.map(response, function(result){
var feature = result.feature;
feature.attributes.layerName = result.layerName;
switch (result.layerName) {
case 'EEZ 2000':
feature.setInfoTemplate(eez_infoTemplate);
break;
case 'EEZ 2010':
feature.setInfoTemplate(eez10_infoTemplate);
break;
case 'Tax Increment Financing Areas':
feature.setInfoTemplate(tif_infoTemplate);
break;
default:
feature.setInfoTemplate(bg_infoTemplate);
break;
}
return feature;
});
});
map.infoWindow.setFeatures([deferred]);
map.infoWindow.show(idPoint);
mapClick = true;
}
//---- determines current layer visibility, used for identifyParameter --
function getVisibleLayers(myLayer) {
var visibleLayers = [];
var items = arrayUtils.map(myLayer.layerInfos, function (info, index) {
layerID = info.id;
if (info.visible && !info.subLayerIds) {
visibleLayers.push(layerID)
}
});
return visibleLayers;
}
