Display a blob field in Maptips as an image

[MiriEshel]

Hi,

I have a Feature layer where I show some maptips like this:

<esri:FeatureLayer ID="activityClusterLayer"
                                       Mode="OnDemand"
                                       OnDemandCacheSize="20000"
                                       OutFields="ATT_ID,Program_Code,Partner_Code,Office,Activity_Description,Activity_Status"
                                       Where="1=0">
                        <esri:FeatureLayer.Clusterer>
                            <esri:FlareClusterer FlareBackground="Orange"
                                                 FlareForeground="Black"
                                                 MaximumFlareCount="9" />
                        </esri:FeatureLayer.Clusterer>
                        <esri:FeatureLayer.MapTip>
                            <Border Margin="0,0,15,15"
                                    BorderBrush="#FF222957"
                                    BorderThickness="3"
                                    CornerRadius="10">
                                <Border.Background>
                                    <LinearGradientBrush StartPoint="0.015,0.188" EndPoint="1.038,1.136">
                                        <GradientStop Color="#FFD1DFF2" />
                                        <GradientStop Offset="0.946" Color="#FF0088FF" />
                                    </LinearGradientBrush>
                                </Border.Background>
                                <Border.Effect>
                                    <DropShadowEffect BlurRadius="14"
                                                      Direction="300"
                                                      ShadowDepth="10" />
                                </Border.Effect>
                                <StackPanel Margin="7">
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock FontWeight="Bold"
                                                   Foreground="Black"
                                                   Text="Status: " />
                                        <TextBlock Foreground="Black" Text="{Binding [Activity_Status]}" />
                                    </StackPanel>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock FontWeight="Bold"
                                                   Foreground="Black"
                                                   Text="Description: " />
                                        <TextBlock MaxWidth="250"
                                                   Foreground="Black"
                                                   Text="{Binding [Activity_Description]}"
                                                   TextWrapping="Wrap" />
                                    </StackPanel>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock FontWeight="Bold"
                                                   Foreground="Black"
                                                   Text="Program: " />
                                        <TextBlock Foreground="Black" Text="{Binding [Program_Code]}" />
                                    </StackPanel>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock FontWeight="Bold"
                                                   Foreground="Black"
                                                   Text="Partner: " />
                                        <TextBlock Foreground="Black" Text="{Binding [Partner_Code]}" />
                                    </StackPanel>                                   
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock FontWeight="Bold"
                                                   Foreground="Black"
                                                   Text="Office: " />
                                        <TextBlock Foreground="Black" Text="{Binding [Office]}" />
                                    </StackPanel>
                                    <StackPanel Orientation="Horizontal">
                                            <TextBlock FontWeight="Bold"
                                                   Foreground="Black"
                                                   Text="ATT_ID: " />
                                            <TextBlock Foreground="Black" Text="{Binding [ATT_ID]}" />
                                        </StackPanel>
                                </StackPanel>
                            </Border>
                        </esri:FeatureLayer.MapTip>
                    </esri:FeatureLayer>

One of the fields in this layer is a Blob image that contains a picture.
I want to add this picture to the Maptip.

1. As a start point, I just added the blob field to the outFields and the maptips stopped working at al like this:
OutFields="ATT_ID,Program_Code,Partner_Code,Office,Activity_Description,Activity_Status,Picture_Thumbnail".
The field Picture_Thumbnail was taken from a joined table.
Why does it stop working?
2. How do I display the image in the maptip? I guess I have to do a {Binding [BLOB_FIELD]} and some kind of a converter.

Does any one ever try it before I try to develop it myself?

Thanks a lot,
Miri

[BobNichols]

I don't know if you figured this out yet, but I have a solution for you if you haven't.  Using a converter, like you mentioned, you can bind your thumbnail image to the source of an image control, example:

<Image Source="{Binding [Thumbnail_Image], Converter={StaticResource uriConverter}}"/>

Below is the code for the converter class:

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Shapes;

namespace Converters
{
 public class UriConverter : IValueConverter
       {
           #region IValueConverter Members
   
           public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
           {
               string uri = value as string;
               if (uri != null)
                   return "http://www.YourSite.com/Thumbnails/" + uri;
               else
                   return null;
           }
   
           public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
           {
               throw new NotImplementedException();
           }
   
           #endregion
       }
   }

Hope this helps!

[DominiqueBroux]

ArcGIS REST API doesn't support blob field, so for now there is no way to get a blob content in a Silverlight/WPF application.
The converter provided by rwnichols may be useful if your picture field contains an URL to the image.

A possible workaround is to manage your image as attachment. Sample: http://resources.arcgis.com/en/help/silverlight-api/samples/start.htm#ToolkitAttachmentEditor

[MichaelVolz]

Dominique:

Does your response mean you would need to duplicate the data in an ESRI feature class where attachments are enabled?

If that is the case, that is not desirable as you could be duplicating a large amount of data that is already stored in a different robust RDBMS.

[DominiqueBroux]

Dominique:

Does your response mean you would need to duplicate the data in an ESRI feature class where attachments are enabled?

If that is the case, that is not desirable as you could be duplicating a large amount of data that is already stored in a different robust RDBMS.

No I was just suggesting a way to design the geodatabase to avoid the issue.
But I agree it's not always possible when the design is already done.
I guess it's possible to develop a small SOE for serving these images but I never tried that (though that needs rights to install a SOE on the server)

Note: I also encourage people to vote for your idea: ArcGIS Server REST API Support BLOB Fields 🙂

[DaveOrlando]

Hello,

I just had to tackle this same issue. This solution will work with the blobs in the attachments table that is created from ArcCatalog, Manage, Create Attachments. I noticed in ArcOnline when you hover over the Open Attachment button you can see the simple URL it is calling. it is the MapService original URL with {objectID}/attachment/{attachmentID} tacked on the end

In summary this code will QueryRelatedRecord when the mouse enters the Graphic, and builds a small Pictures class. It then populates the MapTip UI with a HyperlinkButton with the Content being an Image and the Image Source being the extended URL

I've also used similar code to work with the Identify tool and added an Attachments section.

Hope this helps someone out there...

Dave