GEOG 863:
Web Application Development for Geospatial Professionals

6.5.2 Example 2: Media

PrintPrint

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, license plate, 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 and a horizontal rule.

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 mediaInfo objects, in this case a 3-object array. The first two objects in the array are of type: "image", while the third is of type: "pie-chart" (other media types allowed are "bar-chart", "column-chart" and "line-chart").

Note that each of the media objects has its caption and value properties set.  With ImageMediaInfo objects, the value must be set to an object with a sourceUrl setting.  With PieChartMediaInfo objects, the value must be set to an object with a fields setting.  Here I've set the fields property to an array of field names defined on Line 32. I knew about these fields from the REST services directory.