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();});
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();
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.
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).
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);
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>
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);
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.
OK. I tried this, but nothing happened.
on(document.getElementById("map"), '.iwImgClick:click', function() {
map.infoWindow.clearFeatures();
map.infoWindow.hide();
});
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.