Possible to Generate Interactive Image Popup From Clicked Link?

3387
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');
               });
               
          }
29 Replies
LloydBronn
Occasional Contributor II

That changes the width, but the height stays the same. 

0 Kudos
LloydBronn
Occasional Contributor II

Oh, it needed to be window.map.infoWindow.resize. Is there a way to just show a smaller thumbnail of the chart image? It's pretty huge, but I still want the user to be able to right click and download the full sized chart. 

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Lloyd,

   Have no idea, I have never used mapplotlib.

0 Kudos
LloydBronn
Occasional Contributor II

I meant in the Javascript. I want to keep the matplotlib output as is, so the user can download it full size. I just want the iFrame to display the image at 1/4 size or so.

0 Kudos
SteveCole
Frequent Contributor

Have you considered something like using a JQuery lightbox like Colorbox or something similar?

They essentially work by displaying a hidden HTML div as a modal dialog. You could have your div with an IMG element and then update the source for the IMG & then display it using the JQuery lightbox..

0 Kudos
SteveCole
Frequent Contributor

At this point, I'm totally lost at what code you're using and how you're doing it, but, based on your last response....

I would just now use a custom function to set the infoWindow content and display the image using the HTML IMG tag with a size parameter:

var theTemplate = new InfoTemplate();
theTemplate.setContent(customPopup);
theTemplate.setTitle('Output Chart');

function customPopup(graphic) {
     var theImgPath = <whatever>;
     //Substitute actual pixel dimensions for x & y in the next line
     content = '<IMG SRC="' + theImgPath + '" width="x" height="y"/><br/><br/>';
     content = content + '<a target="_blank" href="' + theImgPath + '">Open Fullsize in new window</a><br/>';
     return content;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
LloydBronn
Occasional Contributor II

I've got the iFrame all worked out with the chart image displayed. The problem is, the chart is really big. I want to keep it that way so that a user can download it full size. Now what I'm trying to figure out is how to make a thumbnail or smaller version of the chart to display in the popup. Here's my code. I've played around with the height and width in the iframe and the inforwindow, but it only seems to affect the size of the frame, not the image itself. 

function gpResultAvailable(results, messages){
            domAttr.set(dom.byId("statsLink"),"innerHTML", "Three Week Chart");
            //clear any existing features displayed in the popup 
            window.map.infoWindow.clearFeatures();
               
               var chart = "Right Click to Download Chart"
               var chartURL = "http://<ourserver>/Test_Charts/Three_Week_Chart_for_" + locationStr + ".png"
     
               var chartLink = chart.link("http://<ourserver>/Test_Charts/Three_Week_Chart_for_" + locationStr + ".png")
               var chartFrame = "<iframe src='http://<ourserver>/Test_Charts/Three_Week_Chart_for_" + locationStr + ".png' height=100% width=100%></iframe>";
     

            //display the query results 
            var content = "";
            if(results == 0){
              content = chartFrame  + chartLink + "<br> for " + locationStr;
            }else{
              content = " Unable To Generate Chart";
            }
            window.map.infoWindow.setContent(content);
         window.map.infoWindow.resize(640, 960);
               
               
          }
0 Kudos
SteveCole
Frequent Contributor

Here's a merge of your code plus my idea:

function gpResultAvailable(results, messages){
     domAttr.set(dom.byId("statsLink"),"innerHTML", "Three Week Chart");
     //clear any existing features displayed in the popup 
     window.map.infoWindow.clearFeatures();
 
     var chart = "Right Click to Download Chart"
     var chartURL = "http://<ourserver>/Test_Charts/Three_Week_Chart_for_" + locationStr + ".png"
 
     var chartLink = chart.link("http://<ourserver>/Test_Charts/Three_Week_Chart_for_" + locationStr + ".png")
     var chartFrame = "<iframe src='http://<ourserver>/Test_Charts/Three_Week_Chart_for_" + locationStr + ".png' height=100% width=100%></iframe>";
     //display the query results 
     var content = "";
     if(results == 0){
          var chartPath = "http://<ourserver>/Test_Charts/Three_Week_Chart_for_" + locationStr + ".png";
          content = '<IMG SRC="' + chartPath + '" width="320" height="480"/><br/><br/>';
          content = content + '<a target="_blank" href="' + chartPath + '">Open Fullsize in new window</a><br/>';
     }else{
          content = " Unable To Generate Chart";
     }
     window.map.infoWindow.setContent(content);
     window.map.infoWindow.resize(640, 960);
}
LloydBronn
Occasional Contributor II

Perfect, thanks!