Tag Archives: Pop-ups
Smart quotes vs. plain quotes in text and CSV files
When importing .txt or .csv file in your ArcGIS Online web map something to consider is the use of smart quotes and apostrophes (also called “curly” or “book”) vs. plain ones. For example, if smart apostrophes are used, you will … Continue reading
Using URL parameters in pop-ups
URL variables are a handy way to pass information from one web page to another. The ArcGIS Online map viewer takes the ID of the web map to open as a URL parameter, and ArcGIS Online web maps can make … Continue reading
Adding color to your pop-ups
Color in your pop-ups can add more meaning and make your pop-ups more appealing. An example that we recently ran into is from the Press-Enterprise blog. An embedded map shows election results, and from the pop-up you can easily see … Continue reading
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
Designing web map pop-ups
Web maps can communicate a wealth of information through their cartographic design. They can deliver even more when combined with well-designed pop-ups that appear when users touch the map. Poorly designed pop-ups, however, can quickly confuse and frustrate your audience. … Continue reading
Add Pinterest photos to ArcGIS Online web maps
Pinterest is a social photo sharing site that lets you create and manage “boards” of photos, usually organized around some theme. Pinterest users can browse other pinboards and ‘re-pin’ images in their own collections, or ‘like’ photos. Pinterest’s mission is to “connect everyone in the world through the things they find interesting.”
Editable features and pop-ups using the ArcGIS.com map viewer
We’ve covered how you can configure pop-ups with map service layers in previous posts. In this post we’ll continue our pop-up thread by covering pop-ups for features that you can add directly to your map. Features are found in feature layers, and editable features come in two flavors. One kind is an editable layer that you connect to as a service, published via ArcGIS Server. The other kind are features that you can edit and save directly in your map. The latter is what we’ll focus on here.
We’ll start by opening a new map by clicking Make a Map at the ArcGIS.com website. This opens the ArcGIS.com map viewer with the default map. Click Add and you’ll notice a dropdown with two choices; one lets you add layers to your map, the other lets you create a new editable layer – that’s the one we’ll choose:
We’ll be prompted to pick a template and a name for it (this is what appears in our map contents). We’ll accept the defaults in the next dialog and click Create:
After clicking Create, you’ll see a feature template gallery containing points, lines, and areas that you can add to your map. You’ll also notice an Edit button has now appeared:
Below we’ve zoomed to the Esri campus, and chosen a pushpin from the template and added it to our map right in the middle of Building Q, our corporate headquarters. We’ve also changed the symbol to a blue pushpin and increased its size. We’ve also made some changes so more information about the Redlands Campus headquarters will be displayed when the pushpin is clicked; we’ve changed the title and added a brief description:
If we click the Edit buttom again we’ll leave edit mode and return to our map. Click the pushpin to see the changes we’ve made in the steps above:
We can improve the pop-up by adding a photo and a link to visit when the photo is clicked. Click Edit on the feature pop-up to return to edit mode.
Here is a URL from the Esri website that displays a photo of Building Q.
http://www.esri.com/about-esri/graphics/building-q.jpg
We’ve pasted the URL above into the pop-up Image URL property below, and also added a Related Link to visit when the photo is clicked.
Now we have a very nice pop-up, and have learned an easy way to add photos to our map.
Once the map is saved, you can use the map in a custom app or embedded in a website and the pop-up works exactly the same way. Here’s an example of the Esri campus map emdedded in a blog post:
For more information see the configuring pop-up windows and creating editable layers help topics.
Configuring Layer Pop-ups – Adding Charts
Before reading this post you may want to check out the previous posts we’ve done on configuring pop-ups:
Configuring Layer Pop-ups – The Basics
Configuring Layer Pop-ups – Beyond the Basics
Here in our next post on this topic we’ll show you how to add charts to pop-ups.
ArcGIS.com Map Viewer
We’ll start by using the ArcGIS.com map viewer and adding the USA Diversity Index layer to our map. Once added, click the map details button (or Done Adding Layers) and click the layer name to view its sublayers, and then click the arrow on a sublayer to configure its pop-up. Here we’ve chosen the counties sublayer:
At the bottom of the Pop-up Properties you’ll see a section for Pop-up Media:
Click Add and choose Pie Chart:
We’ll leave the default title for now, and check the fields that contain the values we want to include in our chart, as shown below:
Click OK, then remember to save your configuration.
Now when any county is clicked a pop-up with the pie chart is displayed:
Using the configuration options we can change the display of other attributes, change the chart title, add other charts (like bar or column charts), and more.
ArcGIS Explorer Online
Configuring chart pop-ups works in a very similar way using ArcGIS Explorer Online. First we’ll add the same USA Diversity Index layer to our map as we did above, and view its details and click Configure Pop-ups:
Click Add then Configure to show the pop-up properties for the counties sublayer:
Click the Media tab:
And then click Add and choose Pie Charts:
Now we can choose the fields that we want to use for the chart, just like we did in the map viewer section above:
Here’s our completed pop-up in Explorer Online:
We can continue to refine the pop-up using any of the other options. Note that in the lower right corner you can hover to view a legend:
And click to view an enlargement:
And the enlarged chart includes a scrollable legend:
It’s All In The Webmap
Once we’ve saved our map, the pop-up configurations are also saved and can be used in many different ways – in custom applications or embedded in websites. Here’s an example of a map configured with pie charts embedded in a blog post:
For more information:
Configuring pop-up windows (ArcGIS.com help topic)
Add media to a pop-up window (Explorer Online help topic)
Configuring Layer Pop-ups – Beyond the Basics
In an earlier post we covered the basics of how to enable a pop-up for layers in your map. In this post we’ll take you beyond the basic pop-up.
First, let’s review…
For this example we’ll use an ArcGIS service of marine mammals in the Gulf. First we’ll add the layer and then click the layer name to view the sublayers, then enable the pop-up for each sublayer just like we did in our previous post:
By default our pop-up displays all the information for the feature in a pleasing style:
Turning attributes into information
Though our pop-up is useful, with a few simple changes we can improve it, and turn attributes into information. We’ll begin by omitting several unwanted fields and creating an alias for the field named “obsDate” to make it more understandable. Let’s go back to our layer and choose Configure Pop-up:
You’ll see a panel appear with three main sections. We’ll focus on the middle section under the Pop-up Contents heading and click Configure Attributes, as shown below:
In this dialog you can see that we’ve turned off several fields, and have changed the field named “obsDate” to “Date.” The curly braces enclose field names.
Click Save Pop-up to save any changes you have made.
Now our pop-up is improved, with only the information we want to display and better field names too.
Notice the two link fields, ImageURL and LinkURL. The first field contains a URL that displays a photograph of the turtle, the second is a link to website with more information about the turtle. We can improve our pop-up experience by using the contents of these two fields.
Once again we’ll configure the layer pop-up:
And this time we’ll go to the last section titled Pop-up Media and click Add, then choose Image:
What we want to do is use the contents of the fields {imageURL} and {linkURL} in our pop-up. Click the + to display a list of fields to choose from:
Below we’ve left the Title and Caption blank, but have selected the fields ImageURL and LinkURL as image URL and Link respectively. What this means is that the URL string stored in the ImageURL field will be used to add a photo to our pop-up, and when the photo is clicked the URL string stored in the LinkURL field will be opened in our browser.
Now we’ve got a great pop-up that displays not only attributes, but information, and leverages the URLs stored in the attributes to display a photo in our pop-up and link to a website with details.
Once a pop-up, always a pop-up
When we save our map the configured pop-up will be displayed whenever the layer is clicked, whether the map is opened again in the map viewer, opened using Explorer Online, or embedded in a website.
Shown below is a website with our embedded map and the configured pop-ups. Just click to view the pop-up – in any app, anywhere*.
*Note: the next update to ArcGIS for iOS will also support the same pop-up experience when configured and saved in a map, and so will ArcGIS Desktop after the next service pack update, making ArcGIS Online webmaps very powerful. Pop-ups to the people!
