Wednesday, October 07, 2009 4:25 PM -
ArcGIS-Explorer-Team
Text, photos, links, and HTML in popups
Popups are an easy way to add lots of different content to your map, and are found with notes as well as views. Here we'll cover the basics of popups, and how you can display text, photos, Web sites, and more.
First, we'll start with a very basic example. Here we've added a note, and typed a string into the popup (in popup edit mode).

Now when we show the popup, the results are pretty obvious and exactly as you'd expect.

Now let's spruce things up a bit and add some inline HTML to add some bold and italic text.
And here's how the popup looks now. A nice little improvement.

Want to show a photo in the popup? It's easy. Just enter the path to the photo.

And here's the photo displayed in the poup.

But remember that local paths are not accessible to others if you want to share your note or map. You could put the photo on a common location that's accessible to others within your company, but a Web location that anybody can access might be a better approach. Here's the same photo, but now it's been published from the ESRI Web site. Instead of a pathname we're using the URL to display the photo in the popup. Since the URL is public, everyone will see the same popup contents if we share our note or map.

And here's how it looks. It's a large photo, and one taken of the new ESRI HQ building here on campus.

Likewise we can enter a URL if we want to open a Web site in the popup. Here we've entered the URL to the ESRI home page.

And here's the Web page opened in the popup.

Now, let's put all these together. When you enter a string in the popup ArcGIS Explorer does its best to figure out what to do with it. If just text, it will display the text. If a path or URL, it will display the target. But to create a popup that includes a little bit of everything, we'll need to use a little HTML.
Here's the HTML to display both formatted and non-formatted text strings (like in our first two examples above), a picture from a local source (the third example), and links to a Web site and photo on the Web (the last two examples).

Here's how our popup looks now:

Doing interesting things in popups is easy. Just experiment with a little HTML.
For more information see the HTML markup for notes Help topic.