topic Re: infoWindow.clearFeatures() Not Working in ArcGIS JavaScript Maps SDK Questions

infoWindow.clearFeatures() Not Working

deleted-user-1_r2dgYuILKY — Thu, 05 Apr 2018 17:53:58 GMT

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();});‍

Re: infoWindow.clearFeatures() Not Working

RobertScheitlin__GISP — Thu, 05 Apr 2018 18:53:01 GMT

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();

Re: infoWindow.clearFeatures() Not Working

deleted-user-1_r2dgYuILKY — Thu, 05 Apr 2018 19:01:40 GMT

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.

Re: infoWindow.clearFeatures() Not Working

RobertScheitlin__GISP — Fri, 06 Apr 2018 02:40:36 GMT

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).

Re: infoWindow.clearFeatures() Not Working

deleted-user-1_r2dgYuILKY — Sat, 11 Dec 2021 12:05:08 GMT

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);     ‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: infoWindow.clearFeatures() Not Working

RobertScheitlin__GISP — Sat, 11 Dec 2021 12:05:12 GMT

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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: infoWindow.clearFeatures() Not Working

deleted-user-1_r2dgYuILKY — Sat, 11 Dec 2021 12:05:14 GMT

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);     ‍‍‍‍‍‍‍‍‍‍‍

Re: infoWindow.clearFeatures() Not Working

RobertScheitlin__GISP — Tue, 10 Apr 2018 18:01:39 GMT

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.

Re: infoWindow.clearFeatures() Not Working

deleted-user-1_r2dgYuILKY — Sat, 11 Dec 2021 12:05:17 GMT

OK. I tried this, but nothing happened.

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

Re: infoWindow.clearFeatures() Not Working

RobertScheitlin__GISP — Tue, 10 Apr 2018 19:40:08 GMT

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.