I have the below code that is returning a popup window via a map click. The data I have is getting to large for a popup and want to move this to an HTML DIV in a side window.
Anyone have any examples of how to push this to an html div tag instead of a popup?
var infoTemplateHazmat = new InfoTemplate();
infoTemplateHazmat.setTitle("Hazmat Incidents");
infoTemplateHazmat.setContent("<table>" +
"<tr><td>Status</td><td>${status}</td></tr>" +
"<tr><td>Datetime</td><td><i>${UTC_DATETIME}</i></td></tr>" +
"</table><hr>");
var hazmat = new FeatureLayer("https://arcgis.vdem.virginia.gov/ArcGIS/rest/services/Traffic/VATraffic_IncidentPoints/MapServer/4", {
mode: FeatureLayer.MODE_ONDEMAND,
visible: false,
outFields:["*"],
infoTemplate: infoTemplateHazmat
});
legendLayers.push({ layer: hazmat, title: 'Hazmat Incidents' });
Solved! Go to Solution.
This code works, although it does through an error (Cannot read property 'call' of undefined) I haven't been able to diagnose.
<!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>Popup - Sidebar</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.25/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="https://js.arcgis.com/3.25/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;
border: solid 1px grey;
}
#header {
text-align: center;
height: 60px;
border-bottom: solid 1px #ccc;
}
</style>
<script src="https://js.arcgis.com/3.25/"></script>
<script>
require([
"dojo/ready", "dojo/on", "dojo/dom", "dijit/registry", "dojo/dom-construct", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "esri/map", "esri/arcgis/utils", "esri/domUtils", "esri/dijit/Popup", "esri/layers/FeatureLayer", "esri/InfoTemplate"
], function (
ready, on, dom, registry, domConstruct, parser, BorderContainer, ContentPane, Map, arcgisUtils, domUtils, Popup, FeatureLayer, InfoTemplate
) {
ready(function () {
parser.parse();
//setup event handlers for the next/previous buttons
on(dom.byId("previous"), "click", selectPrevious);
on(dom.byId("next"), "click", selectNext);
/*
//Create a map based on an ArcGIS Online web map id
arcgisUtils.createMap("f7df9e05c12e4c6588a9c09831e1c898", "map")
.then(function(response) {
window.map = response.map;
//set the popup's popupWindow property to false. This prevents the popup from displaying
map.infoWindow.set("popupWindow", false);
initializeSidebar(window.map);
}, function(error) {
console.log("Map creation failed: ", dojo.toJson(error));
});
*/
var map;
map = new Map("map", {
basemap: "gray",
center: [-79.665, 37.629],
zoom: 8
});
//window.map = response.map;
//set the popup's popupWindow property to false. This prevents the popup from displaying
map.infoWindow.set("popupWindow", false);
var infoTemplateWMA = new InfoTemplate();
infoTemplateWMA.setTitle("WMA - ");
infoTemplateWMA.setContent("<table>" +
"<tr><td>Acres</td><td>${Acres}</td></tr>" +
"<tr><td>County_Nam</td><td>${County_Nam}</td></tr>" +
"<tr><td>City_Numbe</td><td>${City_Numbe}</td></tr>" +
"</table><hr>");
var WMA = new FeatureLayer("https://vafwisdev.dgif.virginia.gov/arcgis/rest/services/Public/VirginiaBoundary_UTMZone17N/MapServe...", {
mode: FeatureLayer.MODE_SNAPSHOT,
id: "DGIFWMAs",
opacity: .5,
visible: true,
outFields: ["*"],
infoTemplate: infoTemplateWMA
});
map.addLayer(WMA);
map.on('load', initializeSidebar());
function initializeSidebar() {
//alert("in side bar");
var popup = map.infoWindow;
//when the selection changes update the side panel to display the popup info for the
//currently selected feature.
popup.on("selection-change", function () {
displayPopupContent(popup.getSelectedFeature());
});
//when the selection is cleared remove the popup content from the side panel.
popup.on("clear-features", function () {
//dom.byId replaces dojo.byId
dom.byId("featureCount").innerHTML = "Click to select feature";
//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.
popup.on("set-features", function () {
displayPopupContent(popup.getSelectedFeature());
if (popup.features.length > 1) {
dom.byId("featureCount").innerHTML = popup.features.length + " features selected";
//enable navigation if more than one feature is selected
domUtils.show(dom.byId("pager"))
} else {
dom.byId("featureCount").innerHTML = popup.features.length + " feature selected";
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</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>
I am trying the code below...but the example uses a webmap...I have a feature service...trying to modify it to use the Feature Layer...
ArcGIS API for JavaScript Sandbox
I am missing something as I cannot get it to show up in the side bar...ANY thoughts????
<!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>Popup - Sidebar</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.25/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="https://js.arcgis.com/3.25/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;
border: solid 1px grey;
}
#header {
text-align: center;
height: 60px;
border-bottom: solid 1px #ccc;
}
</style>
<script src="https://js.arcgis.com/3.25/"></script>
<script>
require([
"dojo/ready","dojo/on","dojo/_base/connect","dojo/dom","dijit/registry","dojo/dom-construct","dojo/parser","dijit/layout/BorderContainer","dijit/layout/ContentPane","esri/map","esri/arcgis/utils","esri/domUtils","esri/dijit/Popup","esri/layers/FeatureLayer","esri/InfoTemplate"
], function(
ready,on,connect,dom,registry,domConstruct,parser,BorderContainer,ContentPane,Map,arcgisUtils,domUtils,Popup,FeatureLayer,InfoTemplate
) {
ready(function() {
parser.parse();
//setup event handlers for the next/previous buttons
on(dom.byId("previous"), "click", selectPrevious);
on(dom.byId("next"), "click", selectNext);
/*
//Create a map based on an ArcGIS Online web map id
arcgisUtils.createMap("f7df9e05c12e4c6588a9c09831e1c898", "map")
.then(function(response) {
window.map = response.map;
//set the popup's popupWindow property to false. This prevents the popup from displaying
map.infoWindow.set("popupWindow", false);
initializeSidebar(window.map);
}, function(error) {
console.log("Map creation failed: ", dojo.toJson(error));
});
*/
var map;
map = new Map("map", {
basemap: "gray",
center: [-79.665, 37.629],
zoom: 8
});
//window.map = response.map;
//set the popup's popupWindow property to false. This prevents the popup from displaying
map.infoWindow.set("popupWindow", false);
var infoTemplateWMA = new InfoTemplate();
infoTemplateWMA.setTitle("WMA - ");
infoTemplateWMA.setContent("<table>" +
"<tr><td>Acres</td><td>${Acres}</td></tr>" +
"<tr><td>County_Nam</td><td>${County_Nam}</td></tr>" +
"<tr><td>City_Numbe</td><td>${City_Numbe}</td></tr>" +
"</table><hr>");
var WMA = new FeatureLayer("https://vafwisdev.dgif.virginia.gov/arcgis/rest/services/Public/VirginiaBoundary_UTMZone17N/MapServe...", {
mode: FeatureLayer.MODE_SNAPSHOT,
id: "DGIFWMAs",
opacity: .5,
visible: true,
outFields:["*"],
infoTemplate: infoTemplateWMA
});
map.addLayer(WMA);
map.on(initializeSidebar(window.map));
function initializeSidebar(map) {
alert("in side bar");
var popup = map.infoWindow;
//when the selection changes update the side panel to display the popup info for the
//currently selected feature.
connect.connect(popup, "onSelectionChange", function() {
displayPopupContent(popup.getSelectedFeature());
});
//when the selection is cleared remove the popup content from the side panel.
connect.connect(popup, "onClearFeatures", function() {
//dom.byId replaces dojo.byId
dom.byId("featureCount").innerHTML = "Click to select feature";
//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.
connect.connect(popup, "onSetFeatures", function() {
displayPopupContent(popup.getSelectedFeature());
if (popup.features.length > 1) {
dom.byId("featureCount").innerHTML = popup.features.length + " features selected";
//enable navigation if more than one feature is selected
domUtils.show(dom.byId("pager"))
} else {
dom.byId("featureCount").innerHTML = popup.features.length + " feature selected";
domUtils.hide(dom.byId("pager"));
}
});
}
function displayPopupContent(feature) {
if (feature) {
var content = feature.getContent();
registry.byId("leftPane").set("content", content);
}
}
function selectPrevious() {
window.map.infoWindow.selectPrevious();
}
function selectNext() {
window.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</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>
This code works, although it does through an error (Cannot read property 'call' of undefined) I haven't been able to diagnose.
<!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>Popup - Sidebar</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.25/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="https://js.arcgis.com/3.25/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;
border: solid 1px grey;
}
#header {
text-align: center;
height: 60px;
border-bottom: solid 1px #ccc;
}
</style>
<script src="https://js.arcgis.com/3.25/"></script>
<script>
require([
"dojo/ready", "dojo/on", "dojo/dom", "dijit/registry", "dojo/dom-construct", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "esri/map", "esri/arcgis/utils", "esri/domUtils", "esri/dijit/Popup", "esri/layers/FeatureLayer", "esri/InfoTemplate"
], function (
ready, on, dom, registry, domConstruct, parser, BorderContainer, ContentPane, Map, arcgisUtils, domUtils, Popup, FeatureLayer, InfoTemplate
) {
ready(function () {
parser.parse();
//setup event handlers for the next/previous buttons
on(dom.byId("previous"), "click", selectPrevious);
on(dom.byId("next"), "click", selectNext);
/*
//Create a map based on an ArcGIS Online web map id
arcgisUtils.createMap("f7df9e05c12e4c6588a9c09831e1c898", "map")
.then(function(response) {
window.map = response.map;
//set the popup's popupWindow property to false. This prevents the popup from displaying
map.infoWindow.set("popupWindow", false);
initializeSidebar(window.map);
}, function(error) {
console.log("Map creation failed: ", dojo.toJson(error));
});
*/
var map;
map = new Map("map", {
basemap: "gray",
center: [-79.665, 37.629],
zoom: 8
});
//window.map = response.map;
//set the popup's popupWindow property to false. This prevents the popup from displaying
map.infoWindow.set("popupWindow", false);
var infoTemplateWMA = new InfoTemplate();
infoTemplateWMA.setTitle("WMA - ");
infoTemplateWMA.setContent("<table>" +
"<tr><td>Acres</td><td>${Acres}</td></tr>" +
"<tr><td>County_Nam</td><td>${County_Nam}</td></tr>" +
"<tr><td>City_Numbe</td><td>${City_Numbe}</td></tr>" +
"</table><hr>");
var WMA = new FeatureLayer("https://vafwisdev.dgif.virginia.gov/arcgis/rest/services/Public/VirginiaBoundary_UTMZone17N/MapServe...", {
mode: FeatureLayer.MODE_SNAPSHOT,
id: "DGIFWMAs",
opacity: .5,
visible: true,
outFields: ["*"],
infoTemplate: infoTemplateWMA
});
map.addLayer(WMA);
map.on('load', initializeSidebar());
function initializeSidebar() {
//alert("in side bar");
var popup = map.infoWindow;
//when the selection changes update the side panel to display the popup info for the
//currently selected feature.
popup.on("selection-change", function () {
displayPopupContent(popup.getSelectedFeature());
});
//when the selection is cleared remove the popup content from the side panel.
popup.on("clear-features", function () {
//dom.byId replaces dojo.byId
dom.byId("featureCount").innerHTML = "Click to select feature";
//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.
popup.on("set-features", function () {
displayPopupContent(popup.getSelectedFeature());
if (popup.features.length > 1) {
dom.byId("featureCount").innerHTML = popup.features.length + " features selected";
//enable navigation if more than one feature is selected
domUtils.show(dom.byId("pager"))
} else {
dom.byId("featureCount").innerHTML = popup.features.length + " feature selected";
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</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>
Did you simply modify this line: I cant see any other changes on quick glance
map.on('load', initializeSidebar());
I also removed the variable from the initializeSidebar function, since you have already defined the map variable. I changed "windows.map" to "map" in a couple of places. I also removed the dojo/_base_/connect and changed connect/connect to on, just to make the code up-to-date.
Last question....How do I deactivate the click to bring up the popup in the side bar...I start to use my other tools and its still selecting in the map and returning information to the side bar.
Right now I am firing the Function with a button...confused on how to pause the specific button function
on(dom.byId("ClickButton"), "click", initializeSidebar);
on(dom.byId("PauseButton"), "click", TestingPause);
function TestingPause() {
//HOW DO I PAUSE IT?
}
function initializeSidebar() {
// SNIPPED OUT CODE
}
var clickEvent = on.pausable(dom.byId("ClickButton"), "click", initializeSidebar);
on(dom.byId("PauseButton"), "click", TestingPause);
on(dom.byId("ResumeButton"), "click", TestingResume);
function TestingPause() {
clickEvent.pause();
}
function TestingResume() {
clickEvent.resume();
}
function initializeSidebar() {
// SNIPPED OUT CODE
}
Thanks....I have the below. When I click the ClickButton I can start selecting features and it returns values to the side bar
When I click the PauseButton I am still able to select and return values.
Am I missing something
var clickEvent = on.pausable(dom.byId("ClickButton"), "click", initializeSidebar);
on(dom.byId("ResumeButton"), "click", initializeSidebarResume);
on(dom.byId("PauseButton"), "click", initializeSidebarPause);
function initializeSidebarPause() {
clickEvent.pause();
}
function initializeSidebarResume() {
clickEvent.resume();
}
function initializeSidebar() {
var popup = map.infoWindow;
//when the selection changes update the side panel to display the popup info for the
//currently selected feature.
popup.on("selection-change", function () {
displayPopupContent(popup.getSelectedFeature());
});
//when the selection is cleared remove the popup content from the side panel.
popup.on("clear-features", function () {
//dom.byId replaces dojo.byId
dom.byId("featureCount").innerHTML = "Click to select feature";
//registry.byId replaces dijit.byId
registry.byId("leftPaneInfo").set("content", "");
domUtils.hide(dom.byId("pager"));
});
//When features are associated with the map's info window update the sidebar with the new content.
popup.on("set-features", function () {
displayPopupContent(popup.getSelectedFeature());
if (popup.features.length > 1) {
dom.byId("featureCount").innerHTML = popup.features.length + " features selected";
//enable navigation if more than one feature is selected
domUtils.show(dom.byId("pager"))
} else {
dom.byId("featureCount").innerHTML = popup.features.length + " feature selected";
domUtils.hide(dom.byId("pager"));
}
});
}
function displayPopupContent(feature) {
if (feature) {
var content = feature.getContent();
registry.byId("leftPaneInfo").set("content", content);
}
}
function selectPrevious() {
map.infoWindow.selectPrevious();
}
function selectNext() {
map.infoWindow.selectNext();
}