I have a dialog popup with a hyperlink. I want the popup to close when the link is clicked. I've tried "nboLink.on("click", closeDialog);" but the console says that this is not a function. Here is my code:
Layer.on("click", function(evt){
var name = evt.graphic.attributes.NAME;
var nameNoDot = name.replace(/\./g,"");
var nameDash = nameNoDot.replace(/_/g, "-");
var nameLower = nameDash.toLowerCase();
var nboLink = "<b>${NAME}</b><hr><a target='_blank' href='http://website/profiles/" + nameLower +
"'><b>Profile</b></a>";
var popupContent = esriLang.substitute(evt.graphic.attributes,nboLink);
dialog.setContent(popupContent);
domStyle.set(dialog.domNode, "opacity", 0.70);
dijitPopup.open({
popup: dialog,
x: evt.pageX,
y: evt.pageY,
});
function closeDialog(){
map.graphics.clear();
dijitPopup.close(dialog);
};
});
Solved! Go to Solution.
Levi,
Here is your code working. Your issue was you were recreating the TooltipDialog digit multiple time based on its placement in your code and the on function had to be after the TooltipDialog was opened so that the dom.byId could find the anchor tag:
dialog<!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>Neighborhood Pulse</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.21/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
margin: 0;
font-family: "Open Sans";
}
#leftPane {
background-color: whitesmoke;
width: 20%;
border: solid 1px #000;
}
#photoPane {
background-color: whitesmoke;
width: 20%;
border: solid 1px #000; //bottom: 700px;
height: 65%;
}
#map {
padding: 0;
border: solid 1px #000;
}
.nav {
padding: 5px 10px;
background: #4479BA;
color: #FFF;
border-radius: 5px;
border: solid 1px #20538D;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
#header {
text-align: center;
height: 8%;
border: solid 1px #000;
background-color: whitesmoke;
font-size: 19;
}
#HomeButton {
position: absolute;
top: 95px;
left: 245px;
z-index: 50;
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 20px;
left: 290px;
}
.dijitDialogPaneContent {
width: 200px !important;
height: 100px !important;
}
</style>
<script src="https://js.arcgis.com/3.21/"></script>
<script>
var map, timer;
require([
"esri/lang",
"dojo/on",
"dojo/dom",
"dijit/registry",
"dojo/dom-construct",
"dojo/dom-style",
"dojo/parser",
"dijit/layout/BorderContainer",
"esri/layers/FeatureLayer",
"esri/dijit/PopupTemplate",
"esri/dijit/HomeButton",
"esri/dijit/Search",
"esri/dijit/BasemapGallery",
"esri/graphic",
"dijit/layout/ContentPane",
"esri/map",
"esri/arcgis/utils",
"esri/domUtils",
"dijit/TooltipDialog",
"esri/dijit/Popup",
"dijit/popup",
"dijit/Dialog",
"dojo/domReady!"
], function(
esriLang,
on,
dom,
registry,
domConstruct,
domStyle,
parser,
BorderContainer,
FeatureLayer,
PopupTemplate,
HomeButton,
Search,
BasemapGallery,
Graphic,
ContentPane,
Map,
arcgisUtils,
domUtils,
TooltipDialog,
Popup,
dijitPopup,
Dialog
) {
parser.parse();
map = new Map("map", {
showLabels: false,
basemap: "gray",
center: [-122.650, 45.52],
zoom: 11
});
var home = new HomeButton({
map: map
}, "HomeButton");
home.startup();
var search = new Search({
map: map,
showInfoWindowOnSelect: false,
enableLabel: false,
enableHighlight: false
}, "search");
search.startup();
var template = new PopupTemplate({
title: "{NAME}",
description: "<b>White Population</b>: {WhiteAlone_not_Hisp}" +
"<br><b>Total Population 2010</b>: {TotPOP_2010}" +
"<br><b>Neighborhood Coalition</b>: {LABEL_NAME_COALITION}"
});
var neighborhoodsLayer = new FeatureLayer(
"http://arcgis.research.pdx.edu/arcgis/rest/services/IMS_Services/Neighborhoods_Complete_nolabels/Map...", {
infoTemplate: template,
outFields: ["*"],
maxScale: 0,
minScale: 0,
opacity: .60
});
map.addLayer(neighborhoodsLayer);
on(neighborhoodsLayer, "mouse-over", function(evt) {
clearTimeout(timer);
displayPopupContent(evt.graphic);
});
on(neighborhoodsLayer, "mouse-out", function(evt) {
timer = setTimeout(function() {
map.infoWindow.clearFeatures();
}, 100)
});
map.infoWindow.set("popupWindow", false);
initializeSidebar(map);
dialog = new TooltipDialog({
style: "position: absolute; width: 200px; font: normal normal normal 10pt Arial;z-index:100"
});
function initializeSidebar(map) {
var popup = map.infoWindow;
//when the selection changes update the side panel to display the popup info for the
//currently selected feature.
on(popup, "selection-change", function() {
displayPopupContent(popup.getSelectedFeature());
});
//When features are associated with the map's info window update the sidebar with the new content.
on(popup, "set-features", function() {
displayPopupContent(popup.getSelectedFeature());
});
}
function displayPopupContent(feature) {
if (feature) {
var photoSRC = "https://images.trvl-media.com/media/content/shared/images/travelguides/destination/178299/Portland-2...";
var photo = '<a><IMG SRC="' + photoSRC + '"width=200 height=125/></a>';
var content = feature.getContent();
registry.byId("leftPane").set("content", content, photo);
registry.byId("photoPane").set("content", photo);
}
neighborhoodsLayer.on("click", function(evt) {
var name = evt.graphic.attributes.NAME;
var nameNoDot = name.replace(/\./g, "");
var nameDash = nameNoDot.replace(/_/g, "-");
var nameLower = nameDash.toLowerCase();
var nboLink = "<b>${NAME}</b><hr><a id='myLink' target='_blank' href='http://neighborhoodpulsepdx.org/profiles/" + nameLower +
"'><b>Profile</b></a>";
var popupContent = esriLang.substitute(evt.graphic.attributes, nboLink);
dialog .setContent(popupContent);
domStyle.set(dialog .domNode, "opacity", 0.70);
dijitPopup.open({
popup: dialog,
x: evt.pageX,
y: evt.pageY
});
on(dom.byId("myLink"),"click", closeDialog);
function closeDialog () {
map.graphics.clear();
dijitPopup.close(dialog);
};
});
}
});
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:false" region="left" style="width:225px;height:100%;font-size:13;">
<div id="leftPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
<div id="photoPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'"></div>
<div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="width:200px;height:10%;">
<div id="featureCount" style="margin-bottom:10px;"><b>Portland<br>Neighborhoods</b></div>
</div>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
<div id="search"></div>
<span id="info" style="font-family:arial;position:absolute;left:250px; bottom:5px; background-color:lightgray; opacity: 0.70; z-index:50;"></span>
<div id="HomeButton"></div>
<div style="position:absolute; left:250px; bottom:40px; z-Index:999;">
</div>
</body>
</html>
Levi,
Have you tried just adding an onClick to your anchor element?
var nboLink = "<b>${NAME}</b><hr><a target='_blank' onClick='closeDialog' href='http://website/profiles/" + nameLower +
"'><b>Profile</b></a>";
I added that and got this error in the console: "closeDialog is not defined at HTMLAnchorElement.onclick." I tried moving the closeDialog() function definition before the nboLink and got the same error.
Levi,
That sounds like a scope issue then. Try this:
Layer.on("click", function(evt){
var name = evt.graphic.attributes.NAME;
var nameNoDot = name.replace(/\./g,"");
var nameDash = nameNoDot.replace(/_/g, "-");
var nameLower = nameDash.toLowerCase();
var nboLink = "<b>${NAME}</b><hr><a id='myLink' target='_blank' href='http://website/profiles/" + nameLower +
"'><b>Profile</b></a>";
var popupContent = esriLang.substitute(evt.graphic.attributes,nboLink);
dialog.setContent(popupContent);
on(dom.byId("myLink"),"click", closeDialog);
domStyle.set(dialog.domNode, "opacity", 0.70);
dijitPopup.open({
popup: dialog,
x: evt.pageX,
y: evt.pageY,
});
function closeDialog(){
map.graphics.clear();
dijitPopup.close(dialog);
};
});
OK. I tired that and got this error: Cannot read property 'on' of null.
Levi can you provide a complete sample of this issue?
Here's the whole script:
<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>Neighborhood Pulse</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.21/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
margin: 0;
font-family: "Open Sans";
}
#leftPane {
background-color: whitesmoke;
width: 20%;
border: solid 1px #000;
}
#photoPane {
background-color: whitesmoke;
width: 20%;
border: solid 1px #000;
//bottom: 700px;
height: 65%;
}
#map {
padding: 0;
border: solid 1px #000;
}
.nav {
padding: 5px 10px;
background: #4479BA;
color: #FFF;
border-radius: 5px;
border: solid 1px #20538D;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
#header {
text-align: center;
height: 8%;
border: solid 1px #000;
background-color: whitesmoke;
font-size: 19;
}
#HomeButton {
position: absolute;
top: 95px;
left: 245px;
z-index: 50;
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 20px;
left: 290px;
}
.dijitDialogPaneContent {
width: 200px !important;
height: 100px !important;
}
</style>
<script src="https://js.arcgis.com/3.21/"></script>
<script>
var map, timer;
require([
"esri/lang",
"dojo/on",
"dojo/dom",
"dijit/registry",
"dojo/dom-construct",
"dojo/dom-style",
"dojo/parser",
"dijit/layout/BorderContainer",
"esri/layers/FeatureLayer",
"esri/dijit/PopupTemplate",
"esri/dijit/HomeButton",
"esri/dijit/Search",
"esri/dijit/BasemapGallery",
"esri/graphic",
"dijit/layout/ContentPane",
"esri/map",
"esri/arcgis/utils",
"esri/domUtils",
"dijit/TooltipDialog",
"esri/dijit/Popup",
"dijit/popup",
"dijit/Dialog",
"dojo/domReady!"
], function(
esriLang,
on,
dom,
registry,
domConstruct,
domStyle,
parser,
BorderContainer,
FeatureLayer,
PopupTemplate,
HomeButton,
Search,
BasemapGallery,
Graphic,
ContentPane,
Map,
arcgisUtils,
domUtils,
TooltipDialog,
Popup,
dijitPopup,
Dialog
) {
parser.parse();
map = new Map("map", {
showLabels: false,
basemap: "gray",
center: [-122.650, 45.52],
zoom: 11
});
var home = new HomeButton({
map: map
}, "HomeButton");
home.startup();
var search = new Search({
map: map,
showInfoWindowOnSelect: false,
enableLabel: false,
enableHighlight: false
}, "search");
search.startup();
var template = new PopupTemplate({
title: "{NAME}",
description: "<b>White Population</b>: {WhiteAlone_not_Hisp}" +
"<br><b>Total Population 2010</b>: {TotPOP_2010}" +
"<br><b>Neighborhood Coalition</b>: {LABEL_NAME_COALITION}"
});
var neighborhoodsLayer = new FeatureLayer(
"http://arcgis.research.pdx.edu/arcgis/rest/services/IMS_Services/Neighborhoods_Complete_nolabels/Map...", {
infoTemplate: template,
outFields: ["*"],
maxScale: 0,
minScale: 0,
opacity: .60
});
map.addLayer(neighborhoodsLayer);
on(neighborhoodsLayer, "mouse-over", function(evt) {
clearTimeout(timer);
displayPopupContent(evt.graphic);
});
on(neighborhoodsLayer, "mouse-out", function(evt) {
timer = setTimeout(function() {
map.infoWindow.clearFeatures();
}, 100)
});
map.infoWindow.set("popupWindow", false);
initializeSidebar(map);
function initializeSidebar(map) {
var popup = map.infoWindow;
//when the selection changes update the side panel to display the popup info for the
//currently selected feature.
on(popup, "selection-change", function() {
displayPopupContent(popup.getSelectedFeature());
});
//When features are associated with the map's info window update the sidebar with the new content.
on(popup, "set-features", function() {
displayPopupContent(popup.getSelectedFeature());
});
}
function displayPopupContent(feature){
if (feature) {
var photoSRC = "https://images.trvl-media.com/media/content/shared/images/travelguides/destination/178299/Portland-2...";
var photo = '<a><IMG SRC="' + photoSRC + '"width=200 height=125/></a>';
var content = feature.getContent();
registry.byId("leftPane").set("content",content,photo);
registry.byId("photoPane").set("content",photo);
}
dialog = new TooltipDialog({
style: "position: absolute; width: 200px; font: normal normal normal 10pt Arial;z-index:100"
});
neighborhoodsLayer.on("click", function(evt){
var name = evt.graphic.attributes.NAME;
var nameNoDot = name.replace(/\./g,"");
var nameDash = nameNoDot.replace(/_/g, "-");
var nameLower = nameDash.toLowerCase();
var nboLink = "<b>${NAME}</b><hr><a id='myLink' target='_blank' href='http://neighborhoodpulsepdx.org/profiles/" + nameLower +
"'><b>Profile</b></a>";
var popupContent = esriLang.substitute(evt.graphic.attributes,nboLink);
dialog.setContent(popupContent);
//on(dom.byId("myLink"),"click", closeDialog);
domStyle.set(dialog.domNode, "opacity", 0.70);
dijitPopup.open({
popup: dialog,
x: evt.pageX,
y: evt.pageY,
});
function closeDialog(){
map.graphics.clear();
dijitPopup.close(dialog);
};
});
}
});
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:false" region="left" style="width:225px;height:100%;font-size:13;">
<div id="leftPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
<div id="photoPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'"></div>
<div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style= "width:200px;height:10%;">
<div id="featureCount" style="margin-bottom:10px;"><b>Portland<br>Neighborhoods</b></div>
</div>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
<div id="search"></div>
<span id="info" style="font-family:arial;position:absolute;left:250px; bottom:5px; background-color:lightgray; opacity: 0.70; z-index:50;"></span>
<div id="HomeButton"></div>
<div style="position:absolute; left:250px; bottom:40px; z-Index:999;">
</div>
</body>
</html>
Levi,
Here is your code working. Your issue was you were recreating the TooltipDialog digit multiple time based on its placement in your code and the on function had to be after the TooltipDialog was opened so that the dom.byId could find the anchor tag:
dialog<!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>Neighborhood Pulse</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.21/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans">
<style>
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
margin: 0;
font-family: "Open Sans";
}
#leftPane {
background-color: whitesmoke;
width: 20%;
border: solid 1px #000;
}
#photoPane {
background-color: whitesmoke;
width: 20%;
border: solid 1px #000; //bottom: 700px;
height: 65%;
}
#map {
padding: 0;
border: solid 1px #000;
}
.nav {
padding: 5px 10px;
background: #4479BA;
color: #FFF;
border-radius: 5px;
border: solid 1px #20538D;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
}
#header {
text-align: center;
height: 8%;
border: solid 1px #000;
background-color: whitesmoke;
font-size: 19;
}
#HomeButton {
position: absolute;
top: 95px;
left: 245px;
z-index: 50;
}
#search {
display: block;
position: absolute;
z-index: 2;
top: 20px;
left: 290px;
}
.dijitDialogPaneContent {
width: 200px !important;
height: 100px !important;
}
</style>
<script src="https://js.arcgis.com/3.21/"></script>
<script>
var map, timer;
require([
"esri/lang",
"dojo/on",
"dojo/dom",
"dijit/registry",
"dojo/dom-construct",
"dojo/dom-style",
"dojo/parser",
"dijit/layout/BorderContainer",
"esri/layers/FeatureLayer",
"esri/dijit/PopupTemplate",
"esri/dijit/HomeButton",
"esri/dijit/Search",
"esri/dijit/BasemapGallery",
"esri/graphic",
"dijit/layout/ContentPane",
"esri/map",
"esri/arcgis/utils",
"esri/domUtils",
"dijit/TooltipDialog",
"esri/dijit/Popup",
"dijit/popup",
"dijit/Dialog",
"dojo/domReady!"
], function(
esriLang,
on,
dom,
registry,
domConstruct,
domStyle,
parser,
BorderContainer,
FeatureLayer,
PopupTemplate,
HomeButton,
Search,
BasemapGallery,
Graphic,
ContentPane,
Map,
arcgisUtils,
domUtils,
TooltipDialog,
Popup,
dijitPopup,
Dialog
) {
parser.parse();
map = new Map("map", {
showLabels: false,
basemap: "gray",
center: [-122.650, 45.52],
zoom: 11
});
var home = new HomeButton({
map: map
}, "HomeButton");
home.startup();
var search = new Search({
map: map,
showInfoWindowOnSelect: false,
enableLabel: false,
enableHighlight: false
}, "search");
search.startup();
var template = new PopupTemplate({
title: "{NAME}",
description: "<b>White Population</b>: {WhiteAlone_not_Hisp}" +
"<br><b>Total Population 2010</b>: {TotPOP_2010}" +
"<br><b>Neighborhood Coalition</b>: {LABEL_NAME_COALITION}"
});
var neighborhoodsLayer = new FeatureLayer(
"http://arcgis.research.pdx.edu/arcgis/rest/services/IMS_Services/Neighborhoods_Complete_nolabels/Map...", {
infoTemplate: template,
outFields: ["*"],
maxScale: 0,
minScale: 0,
opacity: .60
});
map.addLayer(neighborhoodsLayer);
on(neighborhoodsLayer, "mouse-over", function(evt) {
clearTimeout(timer);
displayPopupContent(evt.graphic);
});
on(neighborhoodsLayer, "mouse-out", function(evt) {
timer = setTimeout(function() {
map.infoWindow.clearFeatures();
}, 100)
});
map.infoWindow.set("popupWindow", false);
initializeSidebar(map);
dialog = new TooltipDialog({
style: "position: absolute; width: 200px; font: normal normal normal 10pt Arial;z-index:100"
});
function initializeSidebar(map) {
var popup = map.infoWindow;
//when the selection changes update the side panel to display the popup info for the
//currently selected feature.
on(popup, "selection-change", function() {
displayPopupContent(popup.getSelectedFeature());
});
//When features are associated with the map's info window update the sidebar with the new content.
on(popup, "set-features", function() {
displayPopupContent(popup.getSelectedFeature());
});
}
function displayPopupContent(feature) {
if (feature) {
var photoSRC = "https://images.trvl-media.com/media/content/shared/images/travelguides/destination/178299/Portland-2...";
var photo = '<a><IMG SRC="' + photoSRC + '"width=200 height=125/></a>';
var content = feature.getContent();
registry.byId("leftPane").set("content", content, photo);
registry.byId("photoPane").set("content", photo);
}
neighborhoodsLayer.on("click", function(evt) {
var name = evt.graphic.attributes.NAME;
var nameNoDot = name.replace(/\./g, "");
var nameDash = nameNoDot.replace(/_/g, "-");
var nameLower = nameDash.toLowerCase();
var nboLink = "<b>${NAME}</b><hr><a id='myLink' target='_blank' href='http://neighborhoodpulsepdx.org/profiles/" + nameLower +
"'><b>Profile</b></a>";
var popupContent = esriLang.substitute(evt.graphic.attributes, nboLink);
dialog .setContent(popupContent);
domStyle.set(dialog .domNode, "opacity", 0.70);
dijitPopup.open({
popup: dialog,
x: evt.pageX,
y: evt.pageY
});
on(dom.byId("myLink"),"click", closeDialog);
function closeDialog () {
map.graphics.clear();
dijitPopup.close(dialog);
};
});
}
});
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:false" region="left" style="width:225px;height:100%;font-size:13;">
<div id="leftPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
<div id="photoPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'"></div>
<div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="width:200px;height:10%;">
<div id="featureCount" style="margin-bottom:10px;"><b>Portland<br>Neighborhoods</b></div>
</div>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
<div id="search"></div>
<span id="info" style="font-family:arial;position:absolute;left:250px; bottom:5px; background-color:lightgray; opacity: 0.70; z-index:50;"></span>
<div id="HomeButton"></div>
<div style="position:absolute; left:250px; bottom:40px; z-Index:999;">
</div>
</body>
</html>
Thanks Robert!
Nice reply, Robert.
I have one question about adding the event. Since you're adding this event every time the layer is clicked, would this be a potential memory leak? Would it be better to fire that event just once?
on.once(dom.byId("myLink"),"click", closeDialog);