Text, photos, links, and HTML in popups

ArcGIS-Explorer-Team — Wed, 07 Oct 2009 23:25:00 GMT

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.

Adding Photos and More to Note Popups

ArcGIS-Explorer-Team — Tue, 08 Apr 2008 00:21:00 GMT

We've recently had a few questions about adding photos, links to Web sites, and more to a note popup window. Here's a primer on how that's done. But before we get to the "photos and more" part, let's start at the beginning...

We've navigated to Mt. Shasta, California, where we'd like to add a note. To create a note, just choose the Create Notes task. We've changed the note title to "Mt. Shasta" and added a short description - "Mt. Shasta, California - 14,179 feet" - as the note text.

When you hover over the note pushpin, you'll see the note title display. When you click the note pushpin, you'll see something like this:

Let's take this one step further and replace the text with a locally stored photo on our C: drive. Right click the Mt. Shasta note in the results panel, or right click the note pushpin on the map, and choose properties.

Below you can see that we've changed the popup content from our original text (Mt. Shasta, California - 14,179 feet) to the pathname to the file: C:\AGX\Photos\shasta_usgs.jpg.

When we click the note pushpin again, we see something like this:

The USGS publishes photos of Mt. Shasta from their Web site, so we can substitute the local photo with one that's available on the Web. The advantage here is that anyone we send the note to can click the pushpin and see the photo since it's a publicly accessible photo rather than one stored on the local C: drive, which nobody else can access.

All we need to do is replace the local file path in the Popup Text property with the URL location of the photo at the USGS Web site: http://vulcan.wr.usgs.gov/Imgs/Jpg/Shasta/Images/Shasta05_aerial_mount_shasta_shastina_from_west_12-10-05_med.jpg

The note popup will look the same as before, but this time the content is Web-based and shareable rather than a local file. To share this with someone, just right click the note and choose export result.

The NMF file you save can be emailed to anyone, and they'll see the same thing you do since the result is linking to publicly available content.

We can extend the popup contents by using HTML. The HTML isn't required if we just want to display text or a single link to a local file or URL like we've done above. But we can use it to add additional content or format the popup contents. Here we're adding a note that will include a title in bold text to our USGS photo:

And now the popup should look something like this:

And now to the "more" part of this post. Here's the HTML you can use to popup a photo of a bird, and also play the sound of its call.

The use of hidden in the embed tag ensures that the program that plays the sound remains invisible.

You can be as creative as you want. For more information visit the HTML markup for notes, results, and files topic found in the ArcGIS Explorer Help.

ArcGIS Explorer Blog : HTML

Text, photos, links, and HTML in popups

Adding Photos and More to Note Popups