topic Re: Display thumbnail photo image in an attribute inspector... in ArcGIS JavaScript Maps SDK Questions

Display thumbnail photo image in an attribute inspector...

GISAdmin1 — Wed, 20 Feb 2013 17:46:28 GMT

I have a feature class that stores the location of geo-tagged photos. I have built an editing page allowing users the ability to move features and edit attributes with regards to their photos. The problem I have is, I have no way to show the end user which photo they are editing. Is there a way I can embed a thumbnail image in an attribute inspector? The image file-name is stored as an attribute of the feature. The photo is also shared via a URL.

Or, is it possible to symbolize the actual points/markers with a thumbnail of the photo similar to google maps photo layer, etc.?

Thanks in advance,

Mark

Re: Display thumbnail photo image in an attribute inspector...

KellyHutchins — Wed, 20 Feb 2013 23:39:08 GMT

Depending on the number of locations you have the simplest approach would probably be the 'photo layer' option. Here's a jsfiddle that shows this approach:

http://jsfiddle.net/BR5mD/

Re: Display thumbnail photo image in an attribute inspector...

GISAdmin1 — Thu, 21 Feb 2013 13:36:34 GMT

That's an awesome solution. Just a quick question. What are the dimensions of the thumbnails you are using?

Thanks!

M

Re: Display thumbnail photo image in an attribute inspector...

KellyHutchins — Thu, 21 Feb 2013 14:31:28 GMT

The images being used are actually all different sizes but mostly around 200x150. Ideally you'd size them properly yourself but for demo purposes I just set the width,height in the PMS constructor to force the images to 24x24.
f.symbol = new esri.symbol.PictureMarkerSymbol(f.attributes.Buckle,24,24);

Re: Display thumbnail photo image in an attribute inspector...

KenMorefield — Thu, 21 Feb 2013 15:48:37 GMT

Depending on the number of locations you have the simplest approach would probably be the 'photo layer' option. Here's a jsfiddle that shows this approach:

http://jsfiddle.net/BR5mD/

Hi Kelly,
I tried out your sample, but it didn't appear to do anything. It just displays the basemap. I'm not sure that your feature layer is rendering properly... am I missing something?

Thanks,
Ken

Re: Display thumbnail photo image in an attribute inspector...

KellyHutchins — Thu, 21 Feb 2013 15:52:30 GMT

Hi Ken,

I just tested the code on jsfiddle and its working for me. Should display the basemap and a thumbnail for each race location. Are you running this locally?

Re: Display thumbnail photo image in an attribute inspector...

KenMorefield — Thu, 21 Feb 2013 16:17:14 GMT

Hey Kelly,
I'm not running it locally - I just clicked your fiddle link. I've tried it in IE8, and nothing renders at all. I tried it in Firefox 18.0.2 and only the basemap renders. It does seem to work in Google Chrome 24.0.1312.57, showing a generic icon, but it doesn't seem to show any real image. Should all points have the same generic green hill, blue sky, white cloud icon?

Ken

Re: Display thumbnail photo image in an attribute inspector...

KenMorefield — Thu, 21 Feb 2013 23:24:24 GMT

Hey Kelly,
I'm not running it locally - I just clicked your fiddle link. I've tried it in IE8, and nothing renders at all. I tried it in Firefox 18.0.2 and only the basemap renders. It does seem to work in Google Chrome 24.0.1312.57, showing a generic icon, but it doesn't seem to show any real image. Should all points have the same generic green hill, blue sky, white cloud icon?

Ken

Hey Kelly -
I think I found part of my problem as to why your sample doesn't render quite right for me... My employer has blocked "dropbox" content on our network - inspecting your service, it looks like all of your images are stored on dropbox - so all I see is a generic image symbol...

Ken