AnsweredAssumed Answered

Possible to Generate Interactive Image Popup From Clicked Link?

Question asked by lloydbronn on Feb 7, 2017
Latest reply on Feb 8, 2017 by 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');
               });
               
          }

Outcomes