I'm working on a map that has a neighborhood feature layer. When a user mouses over a neighborhood, I want to have a menu in the corner of the map that displays demographics and other data, like this example. That is in Leaflet, but I'm wondering if something similar is possible with the ArcGIS JavaScript? Should I use the popup content in side panel example? If the user then clicks on a neighborhood, I want a popup to display a link to a page with more in depth data analysis. I've gotten the click to work. However, if I specify an info template for the layer, both the link dialog and and the infoWindow pop up on top of each other when the neighborhood is clicked.
Here is the part that's working:
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 t = "<b>${NAME}</b><hr><a target='_blank' href='http://<theserver>.org/profiles/" + nameLower +
"'><b>Neighborhood Profile</b></a>";
var content = esriLang.substitute(evt.graphic.attributes,t);
var highlightGraphic = new Graphic(evt.graphic.geometry,highlightSymbol);
map.graphics.add(highlightGraphic);
dialog.setContent(content);
domStyle.set(dialog.domNode, "opacity", 0.75);
dijitPopup.open({
popup: dialog,
x: evt.pageX,
y: evt.pageY
});
});
function closeDialog() {
map.graphics.clear();
dijitPopup.close(dialog);
}
I've gotten a mouseover function to work as well, but I can't get it to trigger the infoWindow.
Solved! Go to Solution.
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>
Lloyd,
Maybe I am not understanding, but it sounds as simple as setting the dijitPopup.open to a fixed xy instead of the click xy. So that the popup and and the dialog do not overlap.
I want the dialog with the URL to show up where the click event happened, over the neighborhood. Before the neighborhood is clicked, I want an infowindow to show in a fixed spot in the corner of the map, and the data will change depending on which neighborhood you're hovering over. I can get either scenario to work, mouseover or click, but not both. The code above displays the generic infowindow underneath the dialog popup.
Then I would say your do need to look into using the side panel info window then.
In 3x I used to add a custom renderer and add a mouse-over event handler to it, but I've not been able to figure out how in 4.x yet.
Cool! Do you have an example for version 3?
A sample for 3.x is the only one I am aware of:
Popup content in side panel | ArcGIS API for JavaScript 3.20
I meant the custom renderer, but I'm looking into this too. The map on the side window example is blank. Might be a bug.
Strange the sample has a map for me.
So I'm working on this example with my own server layers and I'm getting some weird behavior. The layers disappear when I zoom in or out. I'm also not getting anything in the side window from a click. I'm not sure where to set the content for the side panel.
<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;
}
</style>
<script src="https://js.arcgis.com/3.20/"></script>
<script>
var map;
require([
"dojo/ready",
"dojo/on",
"dojo/dom",
"dijit/registry",
"dojo/dom-construct",
"dojo/parser",
"dijit/layout/BorderContainer",
"esri/layers/FeatureLayer",
"esri/InfoTemplate",
"dijit/layout/ContentPane",
"esri/map",
"esri/arcgis/utils",
"esri/domUtils",
"esri/dijit/Popup"
], function(
ready,
on,
dom,
registry,
domConstruct,
parser,
BorderContainer,
FeatureLayer,
InfoTemplate,
ContentPane,
Map,
arcgisUtils,
domUtils,
Popup
) {
ready(function() {
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],
maxZoom: 18,
minZoom: 11
});
map.infoWindow.set("popupWindow", false);
initializeSidebar(map);
/* var infoContent = "${NAME}"
"<b>White Population</b>: ${WhiteAlone_not_Hisp}" +
"<br><b>Total Population 2010</b>: ${TotPOP_2010}" +
"<br><b>Neighborhood Coalition</b>: ${LABEL_NAME_COALITION}";
var template = new esri.InfoTemplate(infoContent); */
var neighborhoodsLayer = new FeatureLayer("http://<server>/arcgis/rest/services/IMS_Services/Neighborhoods_Complete_nolabels/MapServer/29");
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) {
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>