Learn How to Configure Pop-up in ArcGIS Online: Arranging multiple Images/Attributes in HTML Table, <table></table>

Many of GIS users leave the configure pup-up option in his own map with default displaying of attributes or just turn off unwanted fields from display. What I am welling to show in this article some of useful tips for better identification features on the map and show some of Esri blogs that enable the user integrate the map with several published information in another websites, I will show this in another article.

The Objective

In this example we’ll take a look at how to organize your configured pop-up to use images symbol to display specific information from attribute.

The How

Step 1: A custom icon you can design if you are a graphic designer, if not you can search for the needed icon. In this example you can search for COVID-19 icon +.PNG; It is recommended to use PNG or GIF files as its transparent background.

Step 2: Then you will copy the image address and be sure it is in public domain or you can download the image and add it as item in your ArcGIS online as below to assure that it won't be deleted or misused

Now you have your image URL as the below link for the icon of COVID-19 confirmed cases: https://i.imgur.com/NA6zhOP.png

Note: Tip:

For the best display, you should create images symbol that are 40 * 40 pixels for multiple images symbol in the same pop-up. you should take inconsideration image resolution size to optimize map performance. To learn more about adding images to pop-ups, see the Pop-ups: tips for adding photos Esri blog article.

Step 3: Optional if you have your image from public images store: In the content tap in your ArcGIS online click add item, and choose the image and share it for public.

Step 4: Click the layer options, then choose Configure Pop-Up: 

Step 5: From the drop-down options under Pop-up Contents, choose A custom attribute display, then click Configure.

Step 6: Choose in Insert Image to insert image URL, But wait; if you have good knowledge with HTML you can insert table and organize images, fields, text and any items and if not simply you can do this step in word file, create table contains images with fixed size and style the table appearance paste this this box in Custom Attribute Display

For the HTML friendly expert here are part of code for the above embedded table:

Step 7: You are ready now to paste the table and then insert image URL for each image that you determine its position in the table

The next article I'll show another example on how to integrate data from URL and link it with values from field in a feature layer.

Output:

By the end, I volunteer with this map to make it one of the available resource in easy way for map reader who need simple info about current status.

I hope you enjoyed reading.

Thank you, stay home, be safe and pray for people who are infected with Coronavirus COVID-19 or facing quarantine.

More information

For more information about Configuring Custom Pop-up with Arcade expressions and integration with different websites or data source and parsing it in Custom display attribute:

Configure pop-ups

Pop-ups: the essentials

Pop-ups: tips for adding photos

Pop-ups: custom attribute display

Use attribute-based URL parameters in pop-up links