infoWindow.clearFeatures() Not Working

939
9
04-05-2018 10:53 AM
deleted-user-1_r2dgYuILKY
Occasional Contributor III

I'm trying to get a popup to close once a hyperlink is clicked inside the popup. The hyperlink is working, but the popup just changes to display "no information available" after the click and doesn't close. This is part of an event listener in a PhoneGap app. 

img.addEventListener("click", function () {window.location = chartPath; map.infoWindow.clearFeatures();});
0 Kudos
9 Replies
RobertScheitlin__GISP
MVP Emeritus

Levi,

   I am not sure you have a proper reference to map in the scope of this function but if you do then you more likely want map.infoWindow.hide();

0 Kudos
deleted-user-1_r2dgYuILKY
Occasional Contributor III

Robert, 

Map is a global variable defined at the start of the script. I tried map.infoWindow.hide(); and that didn't work either. I can't see any errors in the debugger. 

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Levi,

   It does not sound like you have access to your global var map then. If I need to add event listeners to elements in the popup I use domConstruct to create the html element so I can attach event listeners to them before they are added to the popup using the setContent method. Another route is to give your html element an ID that you can use dojo query to get a reference to and then add the event listener on the popup show event (making sure not to add it more than once).

0 Kudos
deleted-user-1_r2dgYuILKY
Occasional Contributor III

Here's more of the script. I set content in the next line. Chartpath is an URL

var img = document.createElement("img");

img.src=chartPath;
img.width=240;
img.height=160;
img.addEventListener("click", function () {map.infoWindow.clearFeatures(); window.location = chartPath;} );
map.infoWindow.setContent(img);     ‍‍‍‍‍‍‍
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Levi,

   Here is a sample that has a green placemark image in the popup that when clicked with clear the map infoWindows and hide it.

<!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>Formatter Function</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.23/dijit/themes/soria/soria.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/dojox/layout/resources/ExpandoPane.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.23/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    </style>

    <script src="https://js.arcgis.com/3.23/"></script>
    <script>
      // infotemplate formatting functions need to be in the global scope to work
      var map, compare, compare2;

      require([
        "esri/map",
        "esri/InfoTemplate",
        "esri/layers/FeatureLayer",
        "esri/renderers/SimpleRenderer",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "dojo/dom",
        "dojo/number",
        "dojo/on",
        "dojo/parser",
        "esri/Color",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dojox/layout/ExpandoPane",
        "dojo/domReady!"
      ],
        function (
          Map, InfoTemplate, FeatureLayer, SimpleRenderer, SimpleFillSymbol,
          SimpleLineSymbol, dom, number, on, parser, Color
      ) {

          parser.parse();

          map = new Map("mapDiv", {
            basemap: "streets",
            center: [-86.796, 47.13],
            zoom: 7
          });

          var infoTemplate = new InfoTemplate();
          infoTemplate.setTitle("Population in ${NAME}");
          infoTemplate.setContent("<b>2007 :D: </b>${POP2007:compare}<br/>" +
                                  "<b>2007 density: </b>${POP07_SQMI:compare}<br/><br/>" +
                                  "<b>2000: </b>${POP2000:NumberFormat}<br/>" +
                                  "<b>2000 density: </b>${POP00_SQMI:NumberFormat}<br/>" +
                                  "<img class='iwImgClick' src='https://js.arcgis.com/3.23/esri/dijit/images/Directions/greenPoint.png' />");

          on(document.getElementById('mapDiv'), '.iwImgClick:click', function() {
            map.infoWindow.clearFeatures();
            map.infoWindow.hide();
          });

          var counties = new FeatureLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3", {
            mode: FeatureLayer.MODE_SNAPSHOT,
            infoTemplate: infoTemplate,
            outFields: [
              "NAME", "POP2000", "POP2007", "POP00_SQMI",
              "POP07_SQMI"
            ]
          });

          counties.setDefinitionExpression("STATE_NAME = 'Michigan'");

          //apply a renderer
          var symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
              new Color([255, 255, 255, 0.35]), 1),
            new Color([109, 146, 155, 0.35]));
          counties.setRenderer(new SimpleRenderer(symbol));

          map.addLayer(counties);


          compare = function (value, key, data) {
            var result = "", diff, pctChange;

            switch (key) {
              case "POP2007":
                result = value > data.POP2000 ? "images/up.png" : "images/down.png";
                diff = data.POP2007 - data.POP2000;
                pctChange = (diff * 100) / data.POP2000;
                break;

              case "POP07_SQMI":
                result = value > data.POP00_SQMI ? "images/up.png" : "images/down.png";
                diff = data.POP07_SQMI - data.POP00_SQMI;
                pctChange = (diff * 100) / data.POP00_SQMI;
                break;
            }

            return number.format(value) +
                   "   <img src='" + result + "'/>" +
                   "  <span style='color: " +
                   (pctChange < 0 ? "red" : "green") + ";'>"
                     + number.format(pctChange, { places: 3 }) +
                   "%</span>";
          };

          compare2 = function (value, key, data) {
            var diff = data.POP2007 - data.POP2000;
            var result = diff > 0 ? "images/up.png" : "images/down.png";
            var pctChange = (diff * 100) / data.POP2000;

            return "<img src='" + result + "'/>" +
                   "  <span style='color: " +
                   (pctChange < 0 ? "red" : "green") + ";'>"
                     + number.format(pctChange, { places: 3 }) +
                   "%</span>";
          };
        });
    </script>
  </head>
  <body class="soria">
    <div data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="design:'headline', gutters:true"
         style="width: 100%; height: 100%; margin: 0;">

      <div data-dojo-type="dojox/layout/ExpandoPane"
           data-dojo-props="duration:300, title:'Details', region:'left', maxWidth:'220px', easeIn:'easing.linear', easeOut:'easing.linear'"
           style="width:220px;">
      </div>
      <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
    </div>
  </body>

</html>
deleted-user-1_r2dgYuILKY
Occasional Contributor III

OK. I tried this, since my img element has an ID. I got this from the debugger: TypeError: null is not an object (evaluating 'a.on')

var img = document.createElement("img");

img.src=chartPath;
img.width=240;
img.height=160;
img.addEventListener("click", function () {window.location = chartPath;});
on(document.getElementById("img"), '.iwImgClick:click', function() {
    map.infoWindow.clearFeatures();
    map.infoWindow.hide();
    });
map.infoWindow.setContent(img);     
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Levi,

   You should not change the getElementById the way you have. The code is depending on getting the map class not your image. Also The sample I provided is expecting a img element with a "class" of iwImgClick.

0 Kudos
deleted-user-1_r2dgYuILKY
Occasional Contributor III

OK. I tried this, but nothing happened. 

on(document.getElementById("map"), '.iwImgClick:click', function() {
                    map.infoWindow.clearFeatures();
                    map.infoWindow.hide();
                    });
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Levi,

   So is your div that the map created in have an id of "map"? Did you add the class of "iwImgClick" to the img element? Maybe you should make you code look more like the working sample that I provided.

0 Kudos