How to add popups with mediaInfos images to ArcGIS Dynamic Map Service Layer?

MihkelMänna · ‎05-11-2018

Hi all,

I am unable to add popups with an image gallery to an ArcGISDynamicMapServiceLayer using the mediaInfos property in popupTemplate. There are no problems with FeatureLayers but I need to use ArcGISDynamicMapServiceLayer. Could someone post a working sample please?

Mihkel

RobertScheitlin__GISP · ‎05-11-2018

Mihkel,

Here is a sample for that:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--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>Popup</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.24/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.24/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="http://js.arcgis.com/3.24/"></script>
    <script>
      var map;
      require([
        "esri/map",
        "esri/dijit/Popup", "esri/dijit/PopupTemplate",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "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,
        ArcGISDynamicMapServiceLayer,
        SimpleFillSymbol, Color,
        domClass, domConstruct, on,
        Chart, theme
      ) {

        var fill = new SimpleFillSymbol("solid", null, new Color("#A4CE67"));
        var popup = new Popup({
            fillSymbol: fill,
            titleInBody: false
        }, domConstruct.create("div"));


        map = new Map("map", {
          basemap: "gray",
          center: [-85.66381103515516, 38.206750029023354],
          zoom: 12,
          infoWindow: popup
        });

        var template = new PopupTemplate({
          title: "{DESCRIPTION}",
          fieldInfos: [
            {
              fieldName: "URL",
              label: "URL",
              visible: true
            },
            {
              fieldName: "ONLINE",
              label: "ONLINE",
              visible: true
            },
            {
              fieldName: "DESCRIPTION",
              label: "DESCRIPTION",
              visible: true
            },
            {
              fieldName: "LAST_UPDATED",
              label: "LAST_UPDATED",
              visible: true
            }
          ],
          mediaInfos: [{
            "title": "",
            "caption": "",
            "type": "image",
            "value": {
              "sourceURL": "{URL}",
              "linkURL": "{URL}"
            }
          }]
        });

        var infoTemplates = {
          2: {
            infoTemplate: template,
            layerUrl: "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_PublicSafety_Louisville/..."
          }
        };

        var Layer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_PublicSafety_Louisville/...",{
          infoTemplates: infoTemplates,
          outFields: ["*"]
        });
        map.addLayer(Layer);
      });
    </script>
  </head>

  <body class="claro">
    <div id="map"></div>
  </body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎05-11-2018

Mihkel,

Here is a sample for that:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--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>Popup</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.24/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.24/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="http://js.arcgis.com/3.24/"></script>
    <script>
      var map;
      require([
        "esri/map",
        "esri/dijit/Popup", "esri/dijit/PopupTemplate",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "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,
        ArcGISDynamicMapServiceLayer,
        SimpleFillSymbol, Color,
        domClass, domConstruct, on,
        Chart, theme
      ) {

        var fill = new SimpleFillSymbol("solid", null, new Color("#A4CE67"));
        var popup = new Popup({
            fillSymbol: fill,
            titleInBody: false
        }, domConstruct.create("div"));


        map = new Map("map", {
          basemap: "gray",
          center: [-85.66381103515516, 38.206750029023354],
          zoom: 12,
          infoWindow: popup
        });

        var template = new PopupTemplate({
          title: "{DESCRIPTION}",
          fieldInfos: [
            {
              fieldName: "URL",
              label: "URL",
              visible: true
            },
            {
              fieldName: "ONLINE",
              label: "ONLINE",
              visible: true
            },
            {
              fieldName: "DESCRIPTION",
              label: "DESCRIPTION",
              visible: true
            },
            {
              fieldName: "LAST_UPDATED",
              label: "LAST_UPDATED",
              visible: true
            }
          ],
          mediaInfos: [{
            "title": "",
            "caption": "",
            "type": "image",
            "value": {
              "sourceURL": "{URL}",
              "linkURL": "{URL}"
            }
          }]
        });

        var infoTemplates = {
          2: {
            infoTemplate: template,
            layerUrl: "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_PublicSafety_Louisville/..."
          }
        };

        var Layer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_PublicSafety_Louisville/...",{
          infoTemplates: infoTemplates,
          outFields: ["*"]
        });
        map.addLayer(Layer);
      });
    </script>
  </head>

  <body class="claro">
    <div id="map"></div>
  </body>

</html>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

MihkelMänna · ‎05-11-2018

Perfect as always! Thank you, Robert!

MihkelMänna · ‎05-11-2018

Okay, so as it turns out, my problem was not including the fields with URLs to my images in the fieldInfos. I added my image fields to fieldInfos and changed the "visible" property to false and everything worked just fine. Hopefully it's useful for someone else as well.