topic Re: Possible to Generate Interactive Image Popup From Clicked Link? in ArcGIS JavaScript Maps SDK Questions

Possible to Generate Interactive Image Popup From Clicked Link?

LloydBronn — Sun, 12 Dec 2021 06:48:53 GMT

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

Re: Possible to Generate Interactive Image Popup From Clicked Link?

RobertScheitlin__GISP — Tue, 07 Feb 2017 17:20:04 GMT

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.

Re: Possible to Generate Interactive Image Popup From Clicked Link?

LloydBronn — Tue, 07 Feb 2017 17:27:22 GMT

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.

Re: Possible to Generate Interactive Image Popup From Clicked Link?

RobertScheitlin__GISP — Tue, 07 Feb 2017 17:36:50 GMT

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.

Re: Possible to Generate Interactive Image Popup From Clicked Link?

LloydBronn — Tue, 07 Feb 2017 17:38:52 GMT

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

Re: Possible to Generate Interactive Image Popup From Clicked Link?

SteveCole — Tue, 07 Feb 2017 17:48:16 GMT

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.

Re: Possible to Generate Interactive Image Popup From Clicked Link?

LloydBronn — Tue, 07 Feb 2017 17:55:33 GMT

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?

Re: Possible to Generate Interactive Image Popup From Clicked Link?

RobertScheitlin__GISP — Tue, 07 Feb 2017 18:02:44 GMT

Steve,

Actually window.open default to '_blank'.

Re: Possible to Generate Interactive Image Popup From Clicked Link?

SteveCole — Sun, 12 Dec 2021 06:48:56 GMT

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

Re: Possible to Generate Interactive Image Popup From Clicked Link?

RobertScheitlin__GISP — Tue, 07 Feb 2017 18:26:11 GMT

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.

Re: Possible to Generate Interactive Image Popup From Clicked Link?

SteveCole — Tue, 07 Feb 2017 18:43:04 GMT

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.

Re: Possible to Generate Interactive Image Popup From Clicked Link?

LloydBronn — Tue, 07 Feb 2017 18:58:32 GMT

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.

Re: Possible to Generate Interactive Image Popup From Clicked Link?

RobertScheitlin__GISP — Tue, 07 Feb 2017 19:05:29 GMT

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

Re: Possible to Generate Interactive Image Popup From Clicked Link?

SteveCole — Tue, 07 Feb 2017 19:24:52 GMT

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)

Re: Possible to Generate Interactive Image Popup From Clicked Link?

LloydBronn — Wed, 08 Feb 2017 16:48:31 GMT

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?

Re: Possible to Generate Interactive Image Popup From Clicked Link?

RobertScheitlin__GISP — Wed, 08 Feb 2017 17:22:47 GMT

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

Re: Possible to Generate Interactive Image Popup From Clicked Link?

SteveCole — Wed, 08 Feb 2017 18:02:52 GMT

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..

Re: Possible to Generate Interactive Image Popup From Clicked Link?

LloydBronn — Wed, 08 Feb 2017 18:07:14 GMT

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.

Re: Possible to Generate Interactive Image Popup From Clicked Link?

RobertScheitlin__GISP — Wed, 08 Feb 2017 18:18:06 GMT

Lloyd,

It would be:

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

Re: Possible to Generate Interactive Image Popup From Clicked Link?

LloydBronn — Wed, 08 Feb 2017 18:27:54 GMT

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.