GEOG 863:
Web Application Development for Geospatial Professionals

5.5.2 Example 2: Media


In addition to simple textual information, popups can also display different forms of media (e.g., images and charts). In this second example showing the United States, I’ve configured the popups to show the state flag and a pie chart of the population by race.

See the Pen Popup Media Demo by Jim Detwiler (@jimdetwiler) on CodePen.

Note that the content property is set to an array of JavaScript objects rather than a string. When specifying the objects in this array, you must define each object’s type. Depending on the type, you’ll then define some other property. In this example, there are two objects in the content array.

Starting with the first object, note that it is of type: "text", which requires following up by setting the text property to your desired string. Here, I’ve set the string to some HTML defining a heading, an image, and another heading. The location of the flag image is constructed by plugging the STATE_NAME value into the URL.

Learn More

There are two small problems with plugging the STATE_NAME value in directly, however: a) the image names are in all lower case (e.g., “ohio” rather than “Ohio”), and b) the two-word names have had the space removed (e.g., “newyork” rather than “new york”).

These problems are solved by setting up a function to convert the string to the required form. The function (called fixState) is defined at the end of the script. It accepts the value from the STATE_NAME field as an input parameter and uses the Javascript replace() Method to replace all of the spaces in the string with an empty string ('').

You might be looking at that code wondering how it translates to what I just described. The first argument to the replace() method is a JavaScript regular expression, which says to look for a whitespace character (\s) throughout the whole string (\g). Now, I don’t work with regular expressions enough to just rattle off that code. I did a search for "javascript replace space" and got the answer to my question from a stackoverflow post.

Getting back to the fixState() function, the expression value.replace(/\s+/g, '') returns the state name with spaces removed. That string is then converted to all lower case using the toLowerCase() Method.

If you’re looking for a way to practice implementing your own popup function, you might try writing a version of the Jen & Barry’s script in which you convert the UNIVERSITY column’s values of 1 and 0 into 'Y' and 'N'.

The second object in the content array is of type: "media", which requires following up by setting the mediaInfos property. This property is itself set to an array of media objects, in this case a 1-object array. This one object is of type: "pie-chart" (other media types allowed are "image", "bar-chart", "column-chart" and "line-chart").

With this type of media, the next step is to set its value to an object that defines the fields that will supply the chart’s numbers. Here I’ve set the fields property to an array of field names defined on Line 19. I knew about these fields from the REST services directory.

The creation of charts like the one in this example uses functionality built into Dojo. An optional step in setting up the pie chart is specifying a theme that overrides the default styling of the chart. I selected "PrimaryColors" from the complete list of options.

Here are a few miscellaneous points to wrap up the discussion of this example:

  • An alternative way to code the popups would be to add the flag with a content type of media rather than text.
  • Each object in the mediaInfos array can be assigned a title and caption. I didn’t set these properties for the pie chart because these bits of text are placed beneath the chart and I preferred having a description above the chart.
  • Hovering the mouse over the pie chart slices displays the associated count in a tooltip. Having this work properly requires linking to a Dojo stylesheet (on Line 11 of the HTML doc).