I'm working on some custom functionality within WebApp Builder Developer Edition 2.10. I am developing a simple widget that has a button that, when clicked, executes the window.print() method.
Here is the process I would like to occur:
1. User selects a feature on the map
2. User opens the custom widget
3. User presses the button within the custom widget
4. The map is centered on the selected feature on the map
5. The window.print() method executes
Any leads are appreciated.
Solved! Go to Solution.
Patrick,
In that case in your widget you would use code like this:
var feat = this.map.infoWindow.getSelectedFeature();
this.map.setExtent(feat.geometry.getExtent().expand(1.1));
Patrick,
User selects a feature on the map
How? Using just a map click and displaying the popup or using the select widget?..
In this case, they select a feature on a map and then the pop-up opens (in this case using you're popup panel widget). We've created a print CSS media query so that the map is on one page, and the content from the popup is on the second page. My widget is just calling window.print(). This is our current solution to the JS API's lack of support for printing maps with popups.
The problem we're trying to solve is to always have the selected featured centered on the map when the map is printed. It would probably also be a good idea to set the map extent to the bounding box for the selected feature.
Patrick,
In that case in your widget you would use code like this:
var feat = this.map.infoWindow.getSelectedFeature();
this.map.setExtent(feat.geometry.getExtent().expand(1.1));
Thanks for the help Robert. Below is the code that appears to be providing the solution I desire:
// widget open event
onOpen: function(){
// web app object
var wab = this;
// print map button
var printMapEl = document.getElementById('printMapButton');
// add event listener to print map button
printMapEl.addEventListener('click', function() {
// selected feature
var feat = wab.map.infoWindow.getSelectedFeature();
// set map extent to selected feature
// adjust value in expand() to fit around features
wab.map.setExtent(feat.geometry.getExtent().expand(2.5));
// center map on selected featured
wab.map.centerAt(feat.geometry.getCentroid());
// show print loading message
var printLoadingMessage = document.getElementById('print-prep-msg');
printLoadingMessage.style.display = 'block';
// use timeout function to give map time to refresh tiles
window.setTimeout(function() {
// open browser print dialog window
window.print();
// hide print loading message
printLoadingMessage.style.display = 'none';
}, 4000);
});
}
Great, Don't forget to mark this question as answered.