topic Re: How To Access a Selected Feature on a Web Map and Manipulate in Web AppBuilder Custom Widgets Questions

How To Access a Selected Feature on a Web Map and Manipulate

PatrickMcKinney1 — Wed, 12 Dec 2018 17:02:12 GMT

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.

Re: How To Access a Selected Feature on a Web Map and Manipulate

RobertScheitlin__GISP — Thu, 13 Dec 2018 14:03:57 GMT

Patrick,

User selects a feature on the map

How? Using just a map click and displaying the popup or using the select widget?..

Re: How To Access a Selected Feature on a Web Map and Manipulate

PatrickMcKinney1 — Thu, 13 Dec 2018 18:25:53 GMT

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.

Re: How To Access a Selected Feature on a Web Map and Manipulate

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:10:42 GMT

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));‍‍

Re: How To Access a Selected Feature on a Web Map and Manipulate

PatrickMcKinney1 — Sun, 12 Dec 2021 10:10:45 GMT

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);                        
        });
      }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: How To Access a Selected Feature on a Web Map and Manipulate

RobertScheitlin__GISP — Wed, 19 Dec 2018 17:20:43 GMT

Great, Don't forget to mark this question as answered.