Hide Table of Contents
View Popup sample in sandbox
Popup

Description

This sample demonstrates how to display layer details on click using the Popup window. The contents of the window are defined using PopupTemplate. The PopupTemplate allows you to quickly specify content that includes field info, text description, images and charts. The sample also demonstrates how to modify the default appearance of the popup using css.

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>Popup</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.22/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.22/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.22/"></script>
    <script>
      var map;
      require([
        "esri/map",
        "esri/dijit/Popup", "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, 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 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
        });

        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("https://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>