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

1391
5
Jump to solution
12-12-2018 09:02 AM
PatrickMcKinney1
Occasional Contributor III

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. 

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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

View solution in original post

5 Replies
RobertScheitlin__GISP
MVP Emeritus

Patrick,

User selects a feature on the map

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

0 Kudos
PatrickMcKinney1
Occasional Contributor III

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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));
PatrickMcKinney1
Occasional Contributor III

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);                        
        });
      }
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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

0 Kudos