Switching dynamically between infoWindow / Popup in the Map definition

TracySchloss · ‎01-08-2016

I'm working through the example Info window with chart | ArcGIS API for JavaScript The key seems to be the use an infoWindow rather than a popup for the template in the constructor of the Map.

I have other layers in my map, though, where I'd prefer to use popups. In the map documentation, it looks like I can use map.attr to change this. map.attr('infoWindow','popup').

Has anyone else encountered this situation and do you have a recommendation or example on how to handle this? I think I'll need a listener on the selection of the featureLayer that needs the infoWindow rather than popup. But then I'll need to switch it back to popup for my other layers.

GirishYadav · ‎01-08-2016

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>

<title>Popup</title>

<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>

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>

</html>

Let me know if that help.

Enjoy!

TracySchloss · ‎01-08-2016

That does help, but it doesn't switch back. Once you've change to the plainer infoWindow, it stays there.

I always use Popup, but in the case of the original example, which includes a tabContainer, a couple of content panes and a chart, it doesn't draw correctly until you specify infoWindow instead. I stared at my setContent function for quite a while, assuming my problem was there, before I finally took a step back and looked elsewhere.

GirishYadav · ‎01-08-2016

oh yes, I quickly just compiled this code to show how can you change the infoWindow. However following is more complete example: