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.
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.
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”).
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).