Tag Archives: HTML
Making Your Pop-up Pop!
Want to make a beautiful pop-up to match your map or website? With a little elbow grease, CSS, and a keen eye for design, it’s easy. Here’s how you can skin the ArcGIS API for JavaScript pop-up widget. The pop-up … Continue reading
Create a great home page for your organization
As the administrator of your organization, you can create a compelling and attractive home page using easy-to-configure settings. And with a little bit of HTML know-how you can do even more. In this post we’ll take a closer look at how to enhance your organization’s home both visually and functionally.
Adding charts and graphs to note popups with HTML
As mentioned in previous posts popups are an excellent and easy way to add content to your map. Popups are found on notes as well as views and can be used to display a variety of information such as text, photos, web sites, videos, and more.
Using HTML you can display formatted and non-formatted text strings, as well as more advanced things such as images and even graphs. Suppose I’ve highlighted a section of my map with an area note that overlaps some of my own data or data coming from ArcGIS Online (census information, for example). You may want to display a summary of that information in the note popup using HTML and a chart API. Here we’re using the Google chart API to accomplish that.
The HTML to make this note is relatively simple and looks like this:
In the first line we add the title “Gender” in bold. After adding a blank line we create our chart popup image by calling the Google chart API using the following parameters:
cht – chart type (p3 for pie chart)
chd – chart data (t is for text encoding, followed by the data to be used as percentages)
chs – chart size in pixels
chl – chart labels
Then we add a few more blank lines followed by a similar syntax for charting age.
It can be tedious to enter this information by hand, so you may find it easier to add this type of content via an Add-In. The Query Demographics sample in the SDK Help demonstrates how to programmatically query census information from ArcGIS Online and create the chart content above.
(Submitted by: Larry Young, 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.
Adding Photos and More to Note Popups
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:AGXPhotosshasta_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.
