Combine InfoWindow and Dialog Popup from Mouseover and Click Events
by
1 Solution
Accepted Solutions
Lloyd,
I did not notice your other code mistakes. The popup info is now resolved and the mouseover and mouseout are now working. Now you will have to figure out the dialog stuff, as I shouldn't do all the coding for you 
<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>Popup - Sidebar</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="https://js.arcgis.com/3.20/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 {
width: 20%;
margin: 0;
border: none;
}
#map {
padding: 0;
}
.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: 60px;
border-bottom: solid 1px #ccc;
}
.dijitDialogPaneContent {
width: 300px !important;
height: 100px !important;
}
</style>
<script src="https://js.arcgis.com/3.20/"></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",
"dijit/layout/ContentPane",
"esri/map",
"esri/arcgis/utils",
"esri/domUtils",
"esri/dijit/Popup",
"dijit/popup",
"dijit/Dialog",
"dojo/domReady!"
], function(
esriLang,
on,
dom,
registry,
domConstruct,
domStyle,
parser,
BorderContainer,
FeatureLayer,
PopupTemplate,
ContentPane,
Map,
arcgisUtils,
domUtils,
Popup,
dijitPopup,
Dialog
) {
parser.parse();
//setup event handlers for the next/previous buttons
on(dom.byId("previous"), "click", selectPrevious);
on(dom.byId("next"), "click", selectNext);
map = new Map("map", {
showLabels: false,
basemap: "gray",
center: [-122.675, 45.570],
zoom: 11
});
var dialog = new Dialog({
title: "Programmatic Dialog Creation"
});
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: ["*"]
});
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();
}, 1000)
});
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 the selection is cleared remove the popup content from the side panel.
on(popup, "clear-features", function() {
//dom.byId replaces dojo.byId
dom.byId("featureCount").innerHTML = "Click to select feature(s)";
//registry.byId replaces dijit.byId
registry.byId("leftPane").set("content", "");
domUtils.hide(dom.byId("pager"));
});
//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());
dom.byId("featureCount").innerHTML = popup.features.length + " feature(s) selected";
//enable navigation if more than one feature is selected
popup.features.length > 1 ? domUtils.show(dom.byId("pager")) : domUtils.hide(dom.byId("pager"));
});
}
function displayPopupContent(feature) {
if (feature) {
//not sure why you had infoContent in the getContent method
var content = feature.getContent();
registry.byId("leftPane").set("content", content);
}
}
function selectPrevious() {
map.infoWindow.selectPrevious();
}
function selectNext() {
map.infoWindow.selectNext();
}
});
</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: 20%;height:100%;">
<div id="leftPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
<div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'">
<div id="featureCount" style="margin-bottom:5px;">Click to select feature(s)</div>
<div id="pager" style="display:none;">
<a href='javascript:void(0);' id="previous" class='nav' style="text-decoration: none;">
< Prev
</a>
<a href='javascript:void(0);' id="next" class='nav' style="text-decoration: none;">
Next >
</a>
</div>
</div>
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>
by
by
by
by
by
