The Property Mapper is our most popular web mapping application. It allows users to search for properties and get information for tax records. People might use this website when searching for a new house, or working on a tax assessment appeal (to reduce their property taxes).
While being able to serve our site to more browsers/devices was a big plus, there was one drawback. The Flex Viewer supported printing the map with the contents from the feature pop-up. However, Web AppBuilder does not support this. Esri has an article discussing this issue. They even provide a sample Python script to create your own printing web service to support pop-up information.
We took a different approach. Our solution was to create a custom widget that would call the browser’s window.print() method. And we used a print media query to pull the contents from the pop-up window DOM element and put it on the print out. Developing this widget was a user experience improvement. Earlier, we had created the print media query. But we simply instructed users to run the Ctrl + P command on their keyboards to open up the browsers print dialog window. This wasn’t intuitive, so creating a widget with a “Print Map” button seemed like an improvement.
I wanted to share some of the sample code for this solution. And I recognize this may not be the best solution. But as our goal when migrating platforms was not to lose any functionality, this solution has worked well. At some point in the future, we may create a custom print service that supports printing information from the pop-up. I have always wanted to learn more about Esri’s print services.
Here is the HTML file for the widget:
While developing this solution, we discovered a quirk with Web AppBuilder. The first time a user would search for an address, the property would appear selected. But every other time a user would search for property, the property would not appear selected. But if you were to open the print widget and click the “Print Map” button, the pop-up information would still appear. The property was selected, but the graphic representing it being selected was not shown. If users were to manually select a property, and then open the print widget, the property would always appear selected.
After some back and forth with Esri technical support, we came up with a workaround. As most users would search for a property when using this site, we added a line of code in the Search Widget to open up the Print Widget [openWidgetById(‘the id for the widget’)]. And to make the feature appear selected when opening the Print Widget, we called the map.infoWindow.showHighlight() method.
I wanted users to be able to print the map whether or not a property was selected. I used a conditional statement to execute code if a feature was selected, or just call the window.print() method if not feature was selected.
One issue I ran into was that if someone was searching for an address against our geocodig service instead of the tax parcels feature layer, an error would occur when running the Print Widget. Therefore, I added a second conditional to only run the code if the result of the Search Widget was a tax parcel (property).
Before creating this widget, users would never know quite where the map was going to print. So in addition to providing them with a logical “Print Map” button, I wanted to center the map on the selected feature (in this case, a property). I called the setExtent() method on the map object. You pass an Extent object into this method. I passed in feat.geometry.getExtent() to set the extent based upon the selected feature.
To ensure there was some padding around the selected feature, I called the expand() method. It took some experimentation to find a expand factor that worked for most instances. An improvement would be creating a function that gets the geometry of the selected feature, and then sets the expand factor based on that value. Lastly, I centered the map on the selected feature by calling the map.centerAt() method and passing in feat.geometry.getCentroid().
After centering the map on the selected feature, I call the window.print() method within a setTimeout() function. This is to help ensure the map refreshes for the print out. While the timeout is running, I add text and a graphic to inform the user that the map print-out is being generated. I chose to do this so the user is aware that something is happening. One improvement I would like to make to this solution is the save the print-out to a pdf. I’m not sure how I would approach that, so if you have any tips, please leave a comment.
One final thing to mention is that we are using the Jewelry Box Theme for the Property Mapper. Therefore, many of the styles in the sample style-sheet below apply to that template. If you want to use this print widget solution for a different template, you’ll need to do the heavy lifting of figuring out what styles need modified to get a similar result.
Stylesheet for our widget: