I created a dojox chart using the Info window with chart tutorial.
I am using info window and the Measurement widget but this combination seems not to be working because every time you click to create a measurement the info window appears and covers your region of interest.
One solution would be to dock the popups but that is only available in JavaScript 4.x which does not support the Measurement widget.
So I guess I need to put the popups in a panel.
I used the sample code from the Popup content in side panel tutorial to integrate the popups in my Popup Panel but I am missing something in the code because it's not working.
Any support with the code would be very helpful.
My map in the ESRI Calcite Maps theme is available on JS Bin.
// From tutorial "Popup content in side panel"
function(error){
console.log("Map creation failed: ", dojo.toJson(error));
...
</script>Thank you,
Michelle
Accepted Solutions
Hi Robert,
Disabling the info window does the job really nice, thank you 
As a way for me to learn how to code, is it also possible to integrate the popup in the Popup Panel?
Hi Robert,
Great support and a helpful topic.
I added a new div in Michelle's panel. Can you populate that div with data from that chart, for example to add up those pie slices in order to obtain an area? The data should update each time you select another feature (like the chart does).
Here is the updated JS Bin with the new div.
Thank you,
Andrei.
Thank you Robert
Hi Robert,
I am using the code lines for disabling the chart panel when using the measurement widget:
on(measurement, "tool-change", function(evt){
if(!evt.toolName){
map.setInfoWindowOnClick(true);
} else {
map.setInfoWindowOnClick(false);
}
});but they don't seem to be working anymore.
The panel chart appears when you click the measurement tools on the feature layers:
Am I using incorrectly the code lines above?
Thank you,
Michelle
arcgisUtils.createMap("25bc5a52ccd746c89daefa179cae0036", "mapViewDiv", {
usePopupManager: true
}).then(function (response) {
window.map = response.map;
window.map.infoWindow.set("popupWindow", false);
initializeSidebar(window.map);
var statesLayer = new FeatureLayer("https://services7.arcgis.com/6FZUQ16zBFwjeNsQ/arcgis/rest/services/Feat_Lay_WFL/FeatureServer/0", {
outFields: ["*"]
});
statesLayer.on("click", generatePopup);
window.map.addLayer(statesLayer);
function generatePopup(evt) {
require(["app/CreateChart"], function (CreateChart) {
if (!CreateChart) {
console.log("Module not loaded");
return;
}
var chart = new CreateChart({
graphic: evt.graphic
});
var chartContent = chart.createPieChart();
window.map.infoWindow.setFeatures([evt.graphic]);
if (!domClass.contains(query("#panelPopup")[0], "in")) {
query("#panelPopup").collapse("toggle");
}
registry.byId("chartPanel").set("content", chartContent);
});
}
var measurement = new Measurement({
map: window.map,
}, dojo.byId('measurementDiv'));
measurement.startup();
// ------------ disable chart when using Measurement Widget -----------------------------------
on(measurement, "tool-change", function(evt){
if(!evt.toolName){
map.setInfoWindowOnClick(true);
} else {
map.setInfoWindowOnClick(false);
}
});
// --------------------------------------------------------------------------------------------
},
function(error) {
console.log("Map creation failed: ", dojo.toJson(error));
}
);
function initializeSidebar(map) {
var lp = new ContentPane({
style: "height:235"
}, dom.byId("chartPanel"));
lp.startup();
}
}