Hide Table of Contents
Analysis
Data Reviewer
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Explore in the sandbox
View live sample
Download as a zip file
Description
This sample shows how to use the InfoWindowBase class to create a custom info window. This class was introduced at version 2.2 of the ArcGIS API for JavaScript and provides the ability to extend the info window to customize the behavior and appearance of an info window.
In this example, the content of the info window expands when you click the down arrow and the info window is hidden when the map is panned. To build a custom info window with this functionality, extend the InfoWindowBase class and add a new button to the title bar. When the user clicks the down button, the content portion of the info window is displayed using an animated effect defined using the dojo.fx.Toggler class.
After creating the custom info window, you can associate it with the map using the new infoWindow option.
Code
<!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>Custom Info Window</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
<link rel="stylesheet" href="myModules/InfoWindow.css">
<style>
html, body, #mapDiv { height: 100%; width: 100%; margin: 0; padding: 0; }
</style>
<script>var dojoConfig = {
parseOnLoad: true,
packages: [{
"name": "myModules",
"location": location.pathname.replace(/\/[^/]+$/, "") + "/myModules"
}]
};
</script>
<script src="https://js.arcgis.com/3.29/"></script>
<script>
require([
"dojo/dom",
"dojo/dom-construct",
"esri/map",
"myModules/InfoWindow",
"esri/layers/FeatureLayer",
"esri/InfoTemplate",
"dojo/string",
"dojo/domReady!"
], function(
dom,
domConstruct,
Map,
InfoWindow,
FeatureLayer,
InfoTemplate,
string
) {
//create the custom info window specifying any input options
var infoWindow = new InfoWindow({
domNode: domConstruct.create("div", null, dom.byId("mapDiv"))
});
//create the map and specify the custom info window as the info window that will
//be used by the map
var map = new Map("mapDiv", {
center: [-122.41, 37.78],
zoom: 17,
basemap: "topo",
infoWindow: infoWindow
});
//define the info template that is used to display the popup content.
var template = new InfoTemplate();
template.setTitle("<b>${qAddress}</b>");
template.setContent("hello");
template.setContent(getTextContent);
//create the feature layer (street trees of San Francisco)
var featureLayer = new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/Street_Trees/FeatureServer/0",{
infoTemplate: template,
outFields: ["*"]
});
map.addLayer(featureLayer);
//resize the info window
map.infoWindow.resize(180, 75);
function getTextContent(graphic){
var attr = graphic.attributes.qSpecies.replace('"',"");
var names=attr.split("::");
var commName = string.trim(names[1].replace('"',""));
var hlink = names[0].split(" ");
var sciName = hlink[0] + "_" + hlink[1];
if(commName === ""){
commName = names[0];
}
return "<b>" + commName + "</b><br /><a target='_blank' href=https://en.wikipedia.org/wiki/" + sciName +">Wikipedia Entry</a>";
}
});
</script>
</head>
<body>
<div id="mapDiv"></div>
</body>
</html>