Possible to Generate Interactive Image Popup From Clicked Link?

[LloydBronn]

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

[SteveCole]

Yeah, I've read that point made by others online but, for whatever reason, my code will still open the window as a new window. I've tested this in my install of Firefox where the option to open new windows in a tab instead is enabled. It will still open as a new window rather than a tab. Strange.

[LloydBronn]

I've tried it in Chrome and IE and it doesn't work. I haven't tried Firefox, but I need this to work across all browsers. It's fine the way it is, but it would be more elegant to have a popup image window. 

[SteveCole]

Lloyd,

FWIW, I tried my code in IE, Chrome, and Firefox and they all opened as a new window instead of tab.

Firefox: 51.0.1

Chrome: 55.0.2883.87 m

Internet Explorer: 11 (11.0.9600.18124)

[RobertScheitlin__GISP]

Steve,

   I wonder if it is the fact that you are specifying a window name. I did this in my StreetView widget to ensure that the SV was opened in a specific window. But there was some browser versions that would still open it in a new tab (I can't remember which versions though).

[LloydBronn]

Still trying to find a solution for this. Shouldn't I be able to the generate a new info window that displays the chart when the link is clicked? Or cut the URL link step out altogether and display the chart in the info window after the tool runs?

[RobertScheitlin__GISP]

Lloyd,

  You can set the info windows content to an HTML string that has an iframe who's href is pointing to your chart URL (can't say I have done this before but it should work).

[LloydBronn]

OK. I almost have this working. The problem is that my source URL includes a variable and I'm trying to figure out how to get the quotes right. It gives me a 404 error in the iFrame because it can't read past "Three_Week_Chart_for"

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

I tried turning this URL into a variable chartUrl and calling "src=chartUrl" but that didn't work either. 

[RobertScheitlin__GISP · Accepted solution]

Lloyd,

   It would be:

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

[LloydBronn]

Thanks! That works. I keep changing the iframe size, but it always pops up too small. The chart is 640 x 960 pixels, but the frame is like 400 x 200. I have the ESRI popup CSS set to relative height and 200px wide, but I want this popup to be the size of the chart. 

[RobertScheitlin__GISP]

So use

map.infoWindow.resize(640, 960);