Hide Table of Contents
View Custom info window sample in sandbox
Custom info window

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.21/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.21/"></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>