Hi Tracy,
The InfoWindow and Popup are essentially same things. Popup is an implementation of InfoWindow that has few more features. Both are just a container therefore in most cases just changing the content (InfoWindow/Popup.setContent()) is enough. But if you have a custom popup/InfoWindow that you want to switch. Then use
Map.setInfoWindow(customInfoWindow)
This method is not mentioned in the API documentation but its there.
here is a small example: This attaches an event handler on map click and check whether its clicked on any feature or not. If its not on any feature it changes the info window and its contents. you can insert any logic here. Or if you want the same thing can be done on Layer's OnClick also.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>Popup</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">
<style>
html, body, #map {
padding: 0;
margin: 0;
height: 100%;
}
/* Change color of icons to match bar chart and selection symbol */
.esriPopup.dark div.titleButton,
.esriPopup.dark div.titlePane .title,
.esriPopup.dark div.actionsPane .action {
color: #A4CE67;
}
/* Additional customizations */
.esriPopup.dark .esriPopupWrapper {
border: none;
}
.esriPopup .contentPane {
text-align: center;
}
.esriViewPopup .gallery {
margin: 0 auto;
}
</style>
<script src="https://js.arcgis.com/3.15/"></script>
<script>
var map;
require([
"esri/map",
"esri/dijit/Popup", "esri/dijit/InfoWindow", "esri/dijit/PopupTemplate",
"esri/layers/FeatureLayer",
"esri/symbols/SimpleFillSymbol", "esri/Color",
"dojo/dom-class", "dojo/dom-construct", "dojo/on",
"dojox/charting/Chart", "dojox/charting/themes/Dollar",
"dojo/domReady!"
], function(
Map,
Popup, InfoWindow, PopupTemplate,
FeatureLayer,
SimpleFillSymbol, Color,
domClass, domConstruct, on,
Chart, theme
) {
//The popup is the default info window so you only need to create the popup and
//assign it to the map if you want to change default properties. Here we are
//noting that the specified title content should display in the header bar
//and providing our own selection symbol for polygons.
var fill = new SimpleFillSymbol("solid", null, new Color("#A4CE67"));
var infoWindow = new InfoWindow({}, domConstruct.create("div"));
infoWindow.startup();
var popup = new Popup({
fillSymbol: fill,
titleInBody: false
}, domConstruct.create("div"));
//Add the dark theme which is customized further in the <style> tag at the top of this page
domClass.add(popup.domNode, "dark");
map = new Map("map", {
basemap: "gray",
center: [-98.57, 39.82],
zoom: 4,
infoWindow: popup
});
map.on("click", function(evt){
if(!evt.graphic){
map.setInfoWindow(infoWindow); //This line is only needed if you want to switch the infoWindow
//Change the content only if do not want to change the appearance of infoWindow.
map.infoWindow.setContent("<div>I am no where</div>");
map.infoWindow.show(evt.screenPoint, map.getInfoWindowAnchor(evt.screenPoint));
}
})
var template = new PopupTemplate({
title: "Boston Marathon 2013",
description: "{STATE_NAME}: {Percent_Fi} of starters finished",
fieldInfos: [{ //define field infos so we can specify an alias
fieldName: "Number_Ent",
label: "Entrants"
},{
fieldName: "Number_Sta",
label: "Starters"
},{
fieldName: "Number_Fin",
label: "Finishers"
}],
mediaInfos:[{ //define the bar chart
caption: "",
type:"barchart",
value:{
theme: "Dollar",
fields:["Number_Ent","Number_Sta","Number_Fin"]
}
}]
});
var featureLayer = new FeatureLayer("http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Boston_Marathon/FeatureServer/0",{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"],
infoTemplate: template
});
map.addLayer(featureLayer);
});
</script>
</head>
<body class="claro">
<div id="map"></div>
</body>
</html>
Let me know if that help.
Enjoy!
