Show Multiple Image Attachments in InfoWindow/Popup

BrendanDwyer · ‎04-03-2013

I have a feature layer that has attached images. How can you use a popup or InfoWindow to show one or more attachments. Odoe had replied to an earlier thread on how to get a single image in an InfoWindow. I thought about using the mediaInfo object in the popup template and creating an array of images. This works perfectly when you have a link to the image src. But I'd have to set the src up dynamically for each attachment for each record using the queryAttachmentInfos method. Is it possible to dynamically create the mediaInfo and the popup template?

Alternatively, I was thinking about inserting a dojo image gallery into an InfoWindow. Has anyone done that before?

I have a feeling this is a lot simpler that I'm making it out to be.

Thanks,

Brendan

DavidMcGill · ‎04-08-2013

[ATTACH=CONFIG]23294[/ATTACH]What I have is a map application for roadway signs. Each geometry point has an attribute field for each photo ${AA_SIGN1}.${AA_SIGN2}
and the data in the field is /FieldPhotos/AA_Sign1_046S013.jpg

I use an info template to show the images, all the attribute data, and hyper links to the pdf inspection reports.

here is some code.

function executeIdentifyTask(evt) {
            identifyParams.geometry = evt.mapPoint;
            identifyParams.mapExtent = map.extent;
            var deferred = identifyTask.execute(identifyParams);
            deferred.addCallback(function (response) {
                return dojo.map(response, function (result) {
                    var feature = result.feature;
                    feature.attributes.layerName = result.layerName;
                    if (result.layerName === 'signs') {
                        //console.log(feature.attributes.OBJECTID);
                        var template = new esri.InfoTemplate();

                        var contentString = "";
                        contentString += "<tr><font color='blue'><b>Photo:</b><br/><img src=files/${AA_SIGN1} alt='Photo not yet available at this location' width='200' height='200'</tr></td><br>";
                        contentString += "<tr><font color='blue'><b>Photo:</b><br/><img src=files/${AA_SIGN2} alt='Photo not yet available at this location' width='200' height='200'</tr></td><br>";
                        contentString += "<tr><font color='blue'><b>Layer Name:   </b><font color='black'><td>${layerName}</tr></td><br>";
                        contentString += "<tr><font color='blue'><b>AA_SIGN1:   </b><font color='black'><td><a target='_blank' href=files/${AA_SIGN1}>${AA_SIGN1}</a></tr></td><br>";
                        contentString += "<tr><font color='blue'><b>AA_SIGN2:   </b><font color='black'><td><a target='_blank' href=files/${AA_SIGN2}>${AA_SIGN2}</a></tr></td><br>";
                        contentString += "<tr><font color='blue'><b>AB_FOOT1:   </b><font color='black'><td><a target='_blank' href=files/${AB_FOOT1}>${AB_FOOT1}</a></tr></td><br>";
                        contentString += "<tr><font color='blue'><b>AB_FOOT2:   </b><font color='black'><td><a target='_blank' href=files/${AB_FOOT2}>${AB_FOOT2}</a></tr></td><br>";
                        contentString += "<tr><font color='blue'><b>AC_BOLT1:   </b><font color='black'><td><a target='_blank' href=files/${AC_BOLT1}>${AC_BOLT1}</a></tr></td><br>";
                        contentString += "<tr><font color='blue'><b>AC_BOLT2:   </b><font color='black'><td><a target='_blank' href=files/${AC_BOLT2}>${AC_BOLT2}</a></tr></td><br>";
                        contentString += "<tr><font color='blue'><b>InspDoc1:   </b><font color='black'><td><a target='_blank' href=files/${InspDoc1}>${InspDoc1}</a></tr></td><br>";
template.content = contentString;
                        feature.setInfoTemplate(template);
                    }

BrendanDwyer · ‎04-09-2013

Thanks for the reply, but I'm trying to get images that are attachments from ArcGIS Server. I can use queryAttachmentInfos and get an array that includes the url to a page that has the image (example: "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/SanFrancisco/311Incidents/FeatureServer/0...") and the name of the image, but I'm trying to figure out

A) how to get a link that I can use for a src tag
and
B) How to show all the images in a popup.

For B I've been monkeying around with a dojox.image.slideshow, but I'm having trouble populating the slideshow object (actually the itemFileReadStore).

Any help would be appreciated.

-Brendan

JeffJacobson · ‎04-10-2013

Thanks for the reply, but I'm trying to get images that are attachments from ArcGIS Server. I can use queryAttachmentInfos and get an array that includes the url to a page that has the image (example: "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/SanFrancisco/311Incidents/FeatureServer/0...") and the name of the image, but I'm trying to figure out

A) how to get a link that I can use for a src tag
and
B) How to show all the images in a popup.

For B I've been monkeying around with a dojox.image.slideshow, but I'm having trouble populating the slideshow object (actually the itemFileReadStore).

Any help would be appreciated.

-Brendan

A) I looked at the atttachment link. I think the reason you can't link to it directly is that it has "Content-Dispositon: attachment" set in the response header. Also the header does not include the mime-type. You might have to use a proxy to strip out the Content-Disposition info from the header and set the mime-type. You could detect which mime-type to use based on the filename given in the header.

The header response from you're sample attachement link.

HTTP/1.1 200 OK
Content-Disposition: attachment; filename="5366266854_2165ce65f9_z.jpg";
Date: Wed, 10 Apr 2013 17:23:00 GMT
ETag: -817967711
Server: Microsoft-IIS/7.0
X-Powered-By: ASP.NET
Content-Length: 32349
Connection: keep-alive

B) You might also want to look into the dojox.image.Lightbox or dojox.image.LightboxNano.

CraigMcDade · ‎04-10-2013

If you have your attachments saved in a folder on your server and the file names are somehow tied to a field in your database you could do something like what I did for a previous app in your popup code:

"<b>Control Station:</b> <a target='_blank' href=http://pathto/attachments/scans/${Corner Point Identifier}.pdf>${Corner Point Identifier}</a>"

where {Corner Point Identifier} was the name field in my data and also the name of my attachment.

We've since changed to use something similar to the sample that was given to you in the posts above. We created a relationship table with attachments. The popup supports multiple attachments, however, they are given as a link and not as a slideshow of images, as I think you are requesting.

BrendanDwyer · ‎04-10-2013

Thanks for responding. The requirement I have is to be able to page through each image attachment in the infowindow (or popup). I think a lightbox is it's own popup, but I'll see if I can embed it somehow. It seems like it is easier to load.

When you use the queryAttachmentInfos function, it returns an array with the content type (for example "image/jpeg", the name of the image and the url to the attachemnt (ex: "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/SanFrancisco/311Incidents/FeatureServer/0...").

My code is below. You can see where I'm trying different approaches. This is the function that will return the infoWindow content. I commented out the lines with the slideshow b/c I couldn't get it to work. It's frustrating because I think I'm really close.

function getWindowContent(graphic) {
    //make a tab container
    var tc = new dijit.layout.TabContainer({
      style: "width:100%;height:100%;"
    }, dojo.create("div"));

    objectId = graphic.attributes[featureLayer.objectIdField];
    featureLayer.queryAttachmentInfos(objectId, function (infos) {

      if (infos.length>0) {

       map.infoWindow.resize(400,400);
       tc.resize();
       var itemJson = [];
       var imgArray = new Array();
       var len = infos.length;
       for (var i = 0; i < len;i++)
       {
        itemJson.push({url: infos.url, type: infos.contentType, name: infos.name});
        imgArray = new Image();
        imgArray.src = infos.url;


       }
       var imageData = { identifier: 'name',
         items: itemJson};
       var itmFileReadStore = new dojo.data.ItemFileReadStore({data:itemJson});

                            //el.setAttribute('src', infos[0].url);
                            //map.infoWindow.setContent(e.graphic);
       var slideShow = new dojox.image.SlideShow();
       //var request= {query:4, start:0};
       //var itemNameMap = {imageLargeAttr: "thumb"};
       slideShow.setDataStore(itmFileReadStore,{query:{},count:5},{url:"url",name:"name",type:"type"});
       //slideShow.imageHeight=200;
       //slideShow.imageWidth=200;
       //slideShow.fixedHeight.true;

       //map.infoWindow.setContent(slideShow.domNode);
                            //map.infoWindow.show(e.screenPoint, map.getInfoWindowAnchor(e.screenPoint));

       //display attribute information
       var cp1 = new dijit.layout.ContentPane({
       title: "Details",
       content: "<a target='_blank' href='http://en.wikipedia.org/wiki/" + graphic.attributes.req_type + "'>Wikipedia Entry</a><br /><br />Address: " + graphic.attributes.address + "<br />District: " + graphic.attributes.district + "<br />Status: " + graphic.attributes.status + "<br /><img src=\"" + imgArray[0].src +"\">"
       });

       tc.addChild(cp1);
                        }
      else
      {
       //display attribute information
       var cp1 = new dijit.layout.ContentPane({
       title: "Details",
       content: "<a target='_blank' href='http://en.wikipedia.org/wiki/" + graphic.attributes.req_type + "'>Wikipedia Entry</a><br /><br />Address: " + graphic.attributes.address + "<br />District: " + graphic.attributes.district + "<br />Status: " + graphic.attributes.status
       });

       tc.addChild(cp1);
      }

                    });

    return tc.domNode;
}

BrianLord1 · ‎04-23-2013

Brenden,

I was running into the same problem while trying to implement a dojo photo gallery (combines the slideshow with the thumbnail picker). Thanks to the code you provided above I was able to figure this out!

Here is my code...

map.getLayer(devPlanLayerID).queryAttachmentInfos(objectId, function (infos) {
                    if (infos.length > 0) {
                        var itemJson = [];
                        var len = infos.length;

                        for (var i = 0; i < len; i++) {
                            itemJson.push({ url: infos.url, type: infos.contentType, name: infos.name });
                        }

                        var data = {
                            identifier: "name",
                            items: itemJson
                        };

                        var itemNameMap = { imageLargeAttr: "url", imageThumbAttr: "url", titleAttr: "name" };
                        var itmFileReadStore = new dojo.data.ItemFileReadStore({ data: data });
                        dijit.byId('gallery1').setDataStore(itmFileReadStore, { query: {}, count: 1 }, itemNameMap);
                    }
                })

[HTML] <div id="gallery1" data-dojo-type="dojox.image.Gallery"></div>[/HTML]

Thanks again, your code really did help push me in the right direction and from there it was just trial and error until I got it to work. I plan on having the gallery open up when a user clicks on the button "See Photos" (or something like that) instead of having it always being visible and taking up room.

Good luck, hope this helps you.

Thanks,
Mark

BrendanDwyer · ‎04-26-2013

Mark,
Glad I could help. Thanks for posting your code.

-Brendan