How to store images in your feature layer

ArcGIS Online and FME Tips

Photo by Tobias Fischer on Unsplash

The Issue

In ArcGIS Online, the most common way to display image thumbnails in the pop-ups is done by adding the image URL in the pop-up configuration.

The disadvantages of doing it:

• The images are stored on a different web server.
• Your feature layer and the image thumbnails are stored in two different places.
• If the image is removed from that server, you thumbnail link is broken.

So where is the best place to store those images? The answer is:

In the feature layer itself!

Today I will show you how to use FME to convert images to byte arrays and store them with your feature layer.

The Solution

The modern web browsers are capable of rendering images from byte arrays.

Instead of using an actual jpeg image url:

<img src="http://myimagesite.com/myPhoto.jpg" >

The web browsers are able to translate something like this:

<img src="data:image/jpeg;base64, /9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCALuA+gDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE10KxwRVS0fAkM2JyggkK"

to an actual photo:

I use FME to convert jpegs to byte arrays and add the byte array field to my feature layer.

First I use RasterExtractor to extract the image values. The _rasterBlob field is the one we need.

I then use the BinaryEncoder to translate the image values to byte arrays.

In order for the web browser to render our image, I need to add the flowing code in front of the values of _rasterBlob we just extracted.

data:image/jpeg;base64,

I use AttributeManager to create a new field called thumbnail.

Now I can add the Thumbnail field to my feature layer.

Instead of an external URL, my thumbnail images are stored in my feature layer.

One thing to notice:

Because the byte array is really long, you need to make sure the thumbnail field is long enough to include all characters.

You can download the template HERE.

Thanks for reading!