Call function from Popup window

6441
11
Jump to solution
12-08-2015 12:18 PM
RyanSellman
Occasional Contributor II

Hello All,

Does anyone have an example of how to call a function from inside a popup window?  I've been digging around the forums and haven't had much luck in finding a sample of what I am trying implement.  Right now, I have a Popup Template set up that shows basic attributes for the selected feature and also provides links to various resources regarding that selected feature.  See the image attached.

Below the Recorded Documents link, I'd like to add an "Open Old Tax Map Image" link that calls a function instead of opening a link.  I have tried a handful of things including using code from this sample ​but I can't get anything to do exactly what I have described.  Does anyone have an idea as to how I can accomplish this?

Any help is appreciated!

Thanks,

Ryan

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Ryan,

  Then you just hide the link if it is not the layer you want it to show on:

Link will only show for the "KS_FIELD_OUTLINES_SPRING2005_GEONAD27" layer and not the census layers

<!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>Extend Popup</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">

  <style>
    html,
    body,
    #mapDiv {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
  </style>

  <script src="https://js.arcgis.com/3.15/"></script>
  <script>
    var map;
    require([
        "esri/map",
        "esri/dijit/Popup",
        "esri/InfoTemplate",
        "esri/SpatialReference",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",
        "esri/graphic",
        "dojo/dom-construct",
        "dojo/query",
        "dojo/on",
        "dojo/dom-attr",
        "dojo/dom",
        "dojo/dom-style",
        "esri/Color",
        "dojo/domReady!"
      ], function (
      Map,
      Popup,
      InfoTemplate,
      SpatialReference,
      ArcGISDynamicMapServiceLayer,
      SimpleLineSymbol,
      SimpleFillSymbol,
      Graphic,
      domConstruct,
      query,
      on,
      domAttr,
      dom,
      domStyle,
      Color
    ) {
      var sls = new SimpleLineSymbol("solid", new Color("#444444"), 3);
      var sfs = new SimpleFillSymbol("solid", sls, new Color([68, 68, 68, 0.25]));

      var popup = new Popup({
        fillSymbol: sfs,
        lineSymbol: null,
        markerSymbol: null
      }, domConstruct.create("div"));

      map = new Map("mapDiv", {
        basemap: "topo",
        center: [-94.75290067627297, 39.034671990514816], // long, lat
        zoom: 12,
        sliderStyle: "small",
        infoWindow: popup
      });

      var link = domConstruct.create("a", {
        "class": "action mylink",
        "id": "statsLink",
        "innerHTML": "Action Link Test", //text that appears in the popup for the link
        "href": "javascript: void(0);"
      }, query(".actionList", window.map.infoWindow.domNode)[0]);


      //when the link is clicked register a function that will run
      on(link, "click", writeToConsole);

      on(popup, "selection-change", checkLayer);

      function checkLayer() {
        var feat = popup.getSelectedFeature();
        if(feat && feat._layer && feat._layer.name === "KS_FIELD_OUTLINES_SPRING2005_GEONAD27"){
          domStyle.set(query(".actionList > .action.mylink", window.map.infoWindow.domNode)[0], "display", "") ;
        }else{
          domStyle.set(query(".actionList > .action.mylink", window.map.infoWindow.domNode)[0], "display", "none");
        }
      }

      var _countyCensusInfoTemplate = new InfoTemplate();
      _countyCensusInfoTemplate.setTitle("<b>Census Information</b>");

      var _blockGroupInfoTemplate = new InfoTemplate();
      _blockGroupInfoTemplate.setTitle("<b>Census Information</b>");

      var _censusInfoContent =
        "<div class=\"demographicInfoContent\">" +
        "<div class='demographicNumericPadding'>${AGE_5_17:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 5 - 17<br>" +
        "<div class='demographicNumericPadding'>${AGE_40_49:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 40 - 49<br>" +
        "<div class='demographicNumericPadding'>${AGE_65_UP:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 65 and older" +
        "</div>";

      _countyCensusInfoTemplate.setContent("Demographics for:<br>${NAME} ${STATE_NAME:getCounty}, ${STATE_NAME}<br>" + _censusInfoContent);
      _blockGroupInfoTemplate.setContent("Demographics for:<br>Tract: ${TRACT:formatNumber} Blockgroup: ${BLKGRP}<br>" + _censusInfoContent);

      var _oilAndGasInfoTemplate = new InfoTemplate();
      _oilAndGasInfoTemplate.setTitle("<b>Oil and Gas data</b>");

      var _oilAndGasInfoContent =
        "<div class=\"demographicInfoContent\">" +
        "Gas production: ${PROD_GAS}<br>Oil production: ${PROD_OIL:formatNumber}" +
        "</div>";

      _oilAndGasInfoTemplate.setContent("${FIELD_NAME} production field<br>" +
        _oilAndGasInfoContent);

      var demographicsLayerURL = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer";

      var demographicsLayerOptions = {
        "id": "demographicsLayer",
        "opacity": 0.8,
        "showAttribution": false
      };
      var demographicsLayer = new ArcGISDynamicMapServiceLayer(demographicsLayerURL, demographicsLayerOptions);
      demographicsLayer.setInfoTemplates({
        1: { infoTemplate: _blockGroupInfoTemplate },
        2: { infoTemplate: _countyCensusInfoTemplate }
      });
      demographicsLayer.setVisibleLayers([1, 2]);
      map.addLayer(demographicsLayer);

      var oilAndGasLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServ...", {
        "id": "oilAndGasLayer",
        "opacity": 0.75
      });
      oilAndGasLayer.setInfoTemplates({
        0: { infoTemplate: _oilAndGasInfoTemplate }
      });
      map.addLayer(oilAndGasLayer);

      function writeToConsole(evt) {
        console.info("Hello Word");
      }
    });
  </script>
</head>

<body>
  <div id="mapDiv"></div>
</body>

</html>

View solution in original post

11 Replies
RobertScheitlin__GISP
MVP Emeritus

Ryan,

  I am not sure why you can not get that sample to work. Here is that sample and the Add two dynamic maps sample put together and the action link calls a function to write to the console just fine.

<!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>Extend Popup</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">

  <style>
    html,
    body,
    #mapDiv {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
  </style>

  <script src="https://js.arcgis.com/3.15/"></script>
  <script>
    var map;
    require([
        "esri/map",
        "esri/dijit/Popup",
        "esri/InfoTemplate",
        "esri/SpatialReference",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",
        "esri/graphic",
        "dojo/dom-construct",
        "dojo/query",
        "dojo/on",
        "dojo/dom-attr",
        "dojo/dom",
        "esri/Color",
        "dojo/domReady!"
      ], function (
      Map,
      Popup,
      InfoTemplate,
      SpatialReference,
      ArcGISDynamicMapServiceLayer,
      SimpleLineSymbol,
      SimpleFillSymbol,
      Graphic,
      domConstruct,
      query,
      on,
      domAttr,
      dom,
      Color
    ) {
      var sls = new SimpleLineSymbol("solid", new Color("#444444"), 3);
      var sfs = new SimpleFillSymbol("solid", sls, new Color([68, 68, 68, 0.25]));

      var popup = new Popup({
        fillSymbol: sfs,
        lineSymbol: null,
        markerSymbol: null
      }, domConstruct.create("div"));

      map = new Map("mapDiv", {
        basemap: "topo",
        center: [-94.75290067627297, 39.034671990514816], // long, lat
        zoom: 12,
        sliderStyle: "small",
        infoWindow: popup
      });

      var link = domConstruct.create("a", {
        "class": "action",
        "id": "statsLink",
        "innerHTML": "Action Link Test", //text that appears in the popup for the link
        "href": "javascript: void(0);"
      }, query(".actionList", window.map.infoWindow.domNode)[0]);


      //when the link is clicked register a function that will run
      on(link, "click", writeToConsole);

      var _countyCensusInfoTemplate = new InfoTemplate();
      _countyCensusInfoTemplate.setTitle("<b>Census Information</b>");

      var _blockGroupInfoTemplate = new InfoTemplate();
      _blockGroupInfoTemplate.setTitle("<b>Census Information</b>");

      var _censusInfoContent =
        "<div class=\"demographicInfoContent\">" +
        "<div class='demographicNumericPadding'>${AGE_5_17:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 5 - 17<br>" +
        "<div class='demographicNumericPadding'>${AGE_40_49:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 40 - 49<br>" +
        "<div class='demographicNumericPadding'>${AGE_65_UP:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 65 and older" +
        "</div>";

      _countyCensusInfoTemplate.setContent("Demographics for:<br>${NAME} ${STATE_NAME:getCounty}, ${STATE_NAME}<br>" + _censusInfoContent);
      _blockGroupInfoTemplate.setContent("Demographics for:<br>Tract: ${TRACT:formatNumber} Blockgroup: ${BLKGRP}<br>" + _censusInfoContent);

      var _oilAndGasInfoTemplate = new InfoTemplate();
      _oilAndGasInfoTemplate.setTitle("<b>Oil and Gas data</b>");

      var _oilAndGasInfoContent =
        "<div class=\"demographicInfoContent\">" +
        "Gas production: ${PROD_GAS}<br>Oil production: ${PROD_OIL:formatNumber}" +
        "</div>";

      _oilAndGasInfoTemplate.setContent("${FIELD_NAME} production field<br>" +
        _oilAndGasInfoContent);

      var demographicsLayerURL = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer";

      var demographicsLayerOptions = {
        "id": "demographicsLayer",
        "opacity": 0.8,
        "showAttribution": false
      };
      var demographicsLayer = new ArcGISDynamicMapServiceLayer(demographicsLayerURL, demographicsLayerOptions);
      demographicsLayer.setInfoTemplates({
        1: { infoTemplate: _blockGroupInfoTemplate },
        2: { infoTemplate: _countyCensusInfoTemplate }
      });
      demographicsLayer.setVisibleLayers([1, 2]);
      map.addLayer(demographicsLayer);

      var oilAndGasLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServ...", {
        "id": "oilAndGasLayer",
        "opacity": 0.75
      });
      oilAndGasLayer.setInfoTemplates({
        0: { infoTemplate: _oilAndGasInfoTemplate }
      });
      map.addLayer(oilAndGasLayer);

      function writeToConsole(evt) {
        console.info("Hello Word");
      }
    });
  </script>
</head>

<body>
  <div id="mapDiv"></div>
</body>

</html>
0 Kudos
RyanSellman
Occasional Contributor II

Robert,

Thank you for the response.  In my project, I was able to get the GP population sample to work but I don't want the link to appear in the actions list section of the popup, rather it should be right under the Recorded Documents link, only in the Parcel popup template  My map click event queries a handful of services all with separate popup templates.  This link/function needs to be available only in the Parcel popup template, not in the actions list section for all templates.

Ryan

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Ryan,

  Then you just hide the link if it is not the layer you want it to show on:

Link will only show for the "KS_FIELD_OUTLINES_SPRING2005_GEONAD27" layer and not the census layers

<!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>Extend Popup</title>
  <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css">

  <style>
    html,
    body,
    #mapDiv {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }
  </style>

  <script src="https://js.arcgis.com/3.15/"></script>
  <script>
    var map;
    require([
        "esri/map",
        "esri/dijit/Popup",
        "esri/InfoTemplate",
        "esri/SpatialReference",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",
        "esri/graphic",
        "dojo/dom-construct",
        "dojo/query",
        "dojo/on",
        "dojo/dom-attr",
        "dojo/dom",
        "dojo/dom-style",
        "esri/Color",
        "dojo/domReady!"
      ], function (
      Map,
      Popup,
      InfoTemplate,
      SpatialReference,
      ArcGISDynamicMapServiceLayer,
      SimpleLineSymbol,
      SimpleFillSymbol,
      Graphic,
      domConstruct,
      query,
      on,
      domAttr,
      dom,
      domStyle,
      Color
    ) {
      var sls = new SimpleLineSymbol("solid", new Color("#444444"), 3);
      var sfs = new SimpleFillSymbol("solid", sls, new Color([68, 68, 68, 0.25]));

      var popup = new Popup({
        fillSymbol: sfs,
        lineSymbol: null,
        markerSymbol: null
      }, domConstruct.create("div"));

      map = new Map("mapDiv", {
        basemap: "topo",
        center: [-94.75290067627297, 39.034671990514816], // long, lat
        zoom: 12,
        sliderStyle: "small",
        infoWindow: popup
      });

      var link = domConstruct.create("a", {
        "class": "action mylink",
        "id": "statsLink",
        "innerHTML": "Action Link Test", //text that appears in the popup for the link
        "href": "javascript: void(0);"
      }, query(".actionList", window.map.infoWindow.domNode)[0]);


      //when the link is clicked register a function that will run
      on(link, "click", writeToConsole);

      on(popup, "selection-change", checkLayer);

      function checkLayer() {
        var feat = popup.getSelectedFeature();
        if(feat && feat._layer && feat._layer.name === "KS_FIELD_OUTLINES_SPRING2005_GEONAD27"){
          domStyle.set(query(".actionList > .action.mylink", window.map.infoWindow.domNode)[0], "display", "") ;
        }else{
          domStyle.set(query(".actionList > .action.mylink", window.map.infoWindow.domNode)[0], "display", "none");
        }
      }

      var _countyCensusInfoTemplate = new InfoTemplate();
      _countyCensusInfoTemplate.setTitle("<b>Census Information</b>");

      var _blockGroupInfoTemplate = new InfoTemplate();
      _blockGroupInfoTemplate.setTitle("<b>Census Information</b>");

      var _censusInfoContent =
        "<div class=\"demographicInfoContent\">" +
        "<div class='demographicNumericPadding'>${AGE_5_17:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 5 - 17<br>" +
        "<div class='demographicNumericPadding'>${AGE_40_49:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 40 - 49<br>" +
        "<div class='demographicNumericPadding'>${AGE_65_UP:formatNumber}</div><div class=\"demographicInnerSpacing\"></div>people ages 65 and older" +
        "</div>";

      _countyCensusInfoTemplate.setContent("Demographics for:<br>${NAME} ${STATE_NAME:getCounty}, ${STATE_NAME}<br>" + _censusInfoContent);
      _blockGroupInfoTemplate.setContent("Demographics for:<br>Tract: ${TRACT:formatNumber} Blockgroup: ${BLKGRP}<br>" + _censusInfoContent);

      var _oilAndGasInfoTemplate = new InfoTemplate();
      _oilAndGasInfoTemplate.setTitle("<b>Oil and Gas data</b>");

      var _oilAndGasInfoContent =
        "<div class=\"demographicInfoContent\">" +
        "Gas production: ${PROD_GAS}<br>Oil production: ${PROD_OIL:formatNumber}" +
        "</div>";

      _oilAndGasInfoTemplate.setContent("${FIELD_NAME} production field<br>" +
        _oilAndGasInfoContent);

      var demographicsLayerURL = "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer";

      var demographicsLayerOptions = {
        "id": "demographicsLayer",
        "opacity": 0.8,
        "showAttribution": false
      };
      var demographicsLayer = new ArcGISDynamicMapServiceLayer(demographicsLayerURL, demographicsLayerOptions);
      demographicsLayer.setInfoTemplates({
        1: { infoTemplate: _blockGroupInfoTemplate },
        2: { infoTemplate: _countyCensusInfoTemplate }
      });
      demographicsLayer.setVisibleLayers([1, 2]);
      map.addLayer(demographicsLayer);

      var oilAndGasLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServ...", {
        "id": "oilAndGasLayer",
        "opacity": 0.75
      });
      oilAndGasLayer.setInfoTemplates({
        0: { infoTemplate: _oilAndGasInfoTemplate }
      });
      map.addLayer(oilAndGasLayer);

      function writeToConsole(evt) {
        console.info("Hello Word");
      }
    });
  </script>
</head>

<body>
  <div id="mapDiv"></div>
</body>

</html>
RyanSellman
Occasional Contributor II

Robert,

That's great!  I never thought of hiding the link in the templates it does not need to be in.  However, given the nature of the function I am calling, it would be ideal have the link below the two others already present (Property Record Card & Recorded Documents) and not in the actions list section next to "Zoom to".  Do you know of a way to get the link in the same area as the others?  If not, no biggie.  I can certainly make the sample you provided me with work.

Thank you again for all your help!

Ryan

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Ryan,

   I currently have not tried to call a function from the popup content section, so I don't have a sample for that.

0 Kudos
RyanSellman
Occasional Contributor II

No worries at all!  I will make your sample work.  Thanks for answering my initial question.

Ryan

0 Kudos
RyanSellman
Occasional Contributor II

Hi Robert,

I know I marked this thread as answered, but I am still having some issues implementing the code you supplied.  Creating a link and calling a function when that link is clicked is no longer the issue.  Rather, my problem now occurs after the pop up is shown and set (after the map click event).  When I try to click the map again, with the popup window still open, I get a message in the console saying "Cannot read property '_layer' of undefined".  The same is happening with the sample you posted above.  Any ideas why this is happening?

Ryan

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Ryan,

   Sure just use this updated function:

      function checkLayer() {
        var feat = popup.getSelectedFeature();
        if(feat && feat._layer && feat._layer.name === "KS_FIELD_OUTLINES_SPRING2005_GEONAD27"){
          domStyle.set(query(".actionList > .action.mylink", window.map.infoWindow.domNode)[0], "display", "") ;
        }else{
          domStyle.set(query(".actionList > .action.mylink", window.map.infoWindow.domNode)[0], "display", "none");
        }
      }
RyanSellman
Occasional Contributor II

That's it!  Thank you so much!  If you get a chance, could you describe what was happening?

Thank you again!

Ryan

0 Kudos