Possible to Generate Interactive Image Popup From Clicked Link?

3458
29
Jump to solution
02-07-2017 09:09 AM
LloydBronn
Occasional Contributor II

I have a GP service that creates a chart with matplotlib based on the lat/lon coordinates from a mouse click. The chart is saved to a folder on our web server as a .png. A link to this chart is displayed on the popup. You can right click and save or open it in another browser window. If you just click the link, it leaves the map page and opens the chart in a new browser window. There is a function in matplotlib "plt.show()" that brings up the chart in an interactive popup window with a save-to-disk and other buttons. I'd like to be able to have the chart pop up over the map and have the user be able to save it locally from the popup, if possible. I've tried window.open() but I haven't gotten it to work. 

Here is my code:

var link = domConstruct.create("a",{
                "class": "action", 
                "id": "chartLink",
                "innerHTML": "Three Week Chart", //text that appears in the popup for the link 
                "href": "javascript: void(0);"
              }, query(".actionList", map.infoWindow.domNode)[0]);
          on(link, "click", function(){
            
            domAttr.set(dom.byId("chartLink"), "innerHTML", "Generating Chart...");
            
            window.gp_chart = new Geoprocessor("http://gis.mymetcon.com/arcgis/rest/services/Three_Week_Chart/GPServer/ThreeWeekChart");
               
               var feature = window.map.infoWindow.getSelectedFeature();
               
                var mp = webMercatorUtils.webMercatorToGeographic(feature.geometry);
             var x = mp.x.toFixed(3);
             var y = mp.y.toFixed(3);
                
                var lat,lon = "";
                lat = x.toString();
                lon = y.toString();
                locationStr = prompt("Enter Location Name", "Location", "Location");
                
          
              var taskParams = {
                "Latitude":lat,
                    "Longitude":lon,
                    "Location":locationStr
              };
                 
              window.gp_chart.execute(taskParams,gpChartResultAvailable,gpChartFailure);
                 
                 function gpChartResultAvailable(results, messages){
            domAttr.set(dom.byId("chartLink"),"innerHTML", "Three Week Chart");
            //clear any existing features displayed in the popup 
            window.map.infoWindow.clearFeatures();
               
               var chart = "Three Week Chart"
               var chartResult = chart.link("http:/<ourserver>/Test_Charts/Three_Week_Chart_for_" + locationStr + ".png")
                    
            //display the query results 
            var content = "";
            if(results == 0){
              content = chartResult + "<br> for " + locationStr;
            }else{
              content = " Unable To Generate Chart";
            }
            window.map.infoWindow.setContent(content);
          
               window.map.infoWindow.on(chartResult, "click", function chartpopup(){
               window.open(chartResult,'Chart','height=600,width=600');
               });
               
          }
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Lloyd,

   It would be:

var chartFrame = "<iframe src='http://<ourserver>/Test_Charts/Three_Week_Chart_for_" + locationStr + ".png' height=640 width=960></iframe>"

View solution in original post

0 Kudos
29 Replies
RobertScheitlin__GISP
MVP Emeritus

Lloyd,

   You have:

window.open(chartResult,'Chart','height=600,width=600');

but "chartResult" is this:

var chartResult = chart.link("http:/<ourserver>/Test_Charts/Three_Week_Chart_for_" + locationStr + ".png")

So it makes sense that the window would not open based on "chartResult" not being a simple url string.

LloydBronn
Occasional Contributor II

I tried it with the chart URL as well. It still comes up in a separate browser tab. I also have the popup blocker in Chrome off.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Lloyd,

   Well that is what window.open normally does (open in a separate browser tab). Whether the browser opens a new window or a new tab is not in your control as that is a browser specific setting.

0 Kudos
LloydBronn
Occasional Contributor II

Ah, OK. So in this case, window.open is redundant.

0 Kudos
SteveCole
Frequent Contributor

I think you were close with your first attempt. Try this:

window.open(chartResult, '_blank', 'width=600,height=600');

I think the key is adding the '_blank' option.

0 Kudos
LloydBronn
Occasional Contributor II

I tried this too. It still leaves the map and opens in the same browser window. Is there a way to do this with the Javascript API popup widget?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Steve,

  Actually window.open default to '_blank'.

0 Kudos
SteveCole
Frequent Contributor

Hmm. I have an app which opens a report in a new window and it always opens as a new window, not a tab. Not much different codewise from what Lloyd is attempting:

var center_left = (screen.width / 2) - (1100 / 2);
var center_top = (screen.height / 2) - (600 / 2); 

newWindow = window.open('demographicReport.html','mywindow','width=1100,height=600,menubar=yes,scrollbars=yes,left=' + center_left + ',top=' + center_top); 
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

As I mentioned earlier to Lloyd, opening in a new window or a new tab is not something that can be controlled from code it is a browser specific preference setting.

0 Kudos