Popup widget | ArcGIS API for JavaScript

This sample demonstrates how to replace the map's built-in info window with a popup. The Popup class, new at version 2.3, is a custom info window that adds additional functionality to the default info window. To replace the map's info window with the popup first create a new popup and set it to the map's info window when the map is created:

var popup = new esri.dijit.Popup(null, dojo.create("div"));
map = new esri.Map("map", {
extent: initExtent,
infoWindow: popup
});

The content for the popup can be formatted using the PopupTemplate class. This class provides the ability to define the title, content and media (charts, images). In this snippet, a new PopupTemplate is created and the title and fields are specififed using the {} syntax.

var popupTemplate = new esri.dijit.PopupTemplate({
title: "{address}",
fieldInfos: [
{fieldName: "req_type", visible: true, label:"Type"},
{fieldName: "req_date", visible:true, label:"Date" ,format:{dateFormat:'shortDateShortTime'}}
],
showAttachments:true
});

Since the feature layer displayed in the map has attachments enabled we use the showAttachments property to display attachments in the popup.

Code

<!DOCTYPE html>
<html>  
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
    <!--The viewport meta tag is used to improve the presentation and behavior of the
    samples on iOS devices-->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>
      San Francisco
    </title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; } .esriScalebar{
      padding: 20px 20px; } #map{ padding:0;}
    </style>

    <script>var dojoConfig = { parseOnLoad: true };</script>
    <script src="http://js.arcgis.com/3.6/"></script>
    <script>
      dojo.require("dijit.layout.BorderContainer");
      dojo.require("dijit.layout.ContentPane");
      dojo.require("esri.map");
      dojo.require("esri.layers.FeatureLayer");
      dojo.require("esri.dijit.Popup");

      var map;

      function init() {
        esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
         
        //define custom popup options
        var popupOptions = {
          markerSymbol: new esri.symbol.SimpleMarkerSymbol("circle", 32, null, new dojo.Color([0, 0, 0, 0.25])),
          marginLeft: "20", 
          marginTop: "20"
        };
        //create a popup to replace the map's info window
        var popup = new esri.dijit.Popup(popupOptions, dojo.create("div"));
        
        map = new esri.Map("map", {
          basemap: "topo",
          center: [-122.448, 37.788],
          zoom: 17,
          infoWindow: popup
        });
        
        //define a popup template
        var popupTemplate = new esri.dijit.PopupTemplate({
          title: "{address}",
          fieldInfos: [
          {fieldName: "req_type", visible: true, label:"Type"},
          {fieldName: "req_date", visible:true, label:"Date" ,format:{dateFormat:'shortDateShortTime'}}
          ],
          showAttachments:true
        });
  
        //create a feature layer based on the feature collection
        var featureLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/SanFrancisco/311Incidents/MapServer/0", {
          mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
          infoTemplate: popupTemplate,
          outFields: ["req_date", "address"]
        });
        featureLayer.setDefinitionExpression("address != ''");
        

        
        map.addLayer(featureLayer);
      }

      dojo.ready(init);
    </script>
  </head>
  <body class="claro">
    <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'"
    style="width: 100%; height: 100%; margin: 0;">
      <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"
      style="border:1px solid #000;padding:0;">
      </div>
    </div>
  </body>

</html>

View live sample Download as a zip file Explore in the sandbox

Description

Code

View live sample
Download as a zip file
Explore in the sandbox