Configuring Data Layer Popups
This way of displaying information is problematic in a couple ways. It shows unnecessary detail (FID and Shape Type), and it does nothing to explain what is being measured in and how that value can be put into perspective with the entire dataset. To improve this popup, an administrator will need to customize it's content.
From any given popup window, click "Configure popups" to open the popup configuration window from the administrative dashboard. This window contains an editor where you can define a template used to render new popup windows. Whenever you save changes to this template, the popup window within SeaSketch will immediately update with the new content.
The editor starts with the default template used to render all attributes. The template uses the Handlebars Template Language. To create the best popups, you should become familiar with the documentation for Handlebars.
The simplest template possible would be to just reference one or more feature attributes using a "Handlebars expression".
<p><b>{{Count_}} Blue Whales</b> were seen at this location</p>
The above template would be populated with the Count_ attribute since it is within curly braces. A listing of available attributes that can be included can be found at the bottom of the editor. Any number of attributes can be included, as well as simple HTML. Potentially unsafe HTML content, like SCRIPT, STYLE, A, or IFRAME tags will automatically be stripped out. To add links you will need to use a helper function.The default template for popups uses a slightly more advanced concept for rendering a list using the {{#attributes}} syntax.
<table> {{#attributes}} <tr> <td class="attribute-name">{{name}}</td> <td class="attribute-value">{{value}}</td> </tr> {{/attributes}} </table>Use this method if you want to display all attributes. You can change the content within {{#attributes}} to any style needed.
Going back to the first example, our simplistic template will be grammatically incorrect if only a single whale was sighted at a location. To change "1 Blue Whales" to "1 Blue Whale", it's possible to make use of a Handlebars "helper" named pluralize.
<p><b>{{Count_}} Blue {{pluralize Count_ "Whales" "Whale"}}</b> were seen at this location</p>The pluralize helper function looks at attribute Count_. If the value plural, it uses the first argument ("Whales"). If singular, it displays the second ("Whale"). A listing of all helper functions in SeaSketch can be found at the bottom of this page.Here is an advanced example that uses helper functions to put counts in context with a low/moderate/high rating, and even includes a Youtube video.
<p>
This area saw <b>{{Count_}}
Blue {{pluralize Count_ "Whale" "Whales"}}
</b>
during the sampling period, a
<b>
{{#lte Count_ 3}}
<font color="goldenrod">low</font>
{{/lte}}
{{#between Count_ 3 11}}
<font color="orange">moderate</font>
{{/between}}
{{#gte Count_ 11}}
<font color="red">high</font>
{{/gte}}
</b>
level of activity.
</p>
{{youtube "https://www.youtube.com/watch?v=CP1skOsYBOs"}}
Helper Function Reference
SeaSketch includes all helper functions included in the Swag Library. Check it's documentation to learn about equality operators, string capitalization and concatenation, and other useful tools. Below are additional custom helpers included in SeaSketch.
pluralize ( attribute, plural, singular )
Given an attribute value of 1 this function displays the singular text, otherwise the plural.
Example
{{pluralize Count_ "Whales" "Whale"}}Count_ = 1 -> Whale
Count_ = 4 -> Whalesyoutube ( youtube_video_url )
Given the public link for a youtube video (e.g. https://www.youtube.com/watch?v=FPxOXHxotIw), embeds a miniature version inside the popup window.
Example
{{youtube "https://www.youtube.com/watch?v=FPxOXHxotIw"}}vimeo ( vimeo_video_url )
Example
{{vimeo "http://vimeo.com/52713267"}}link ( url, link_text )
Given a url and link text, constructs a link that will open in a new window.
Example
{{link "http://www.seasketch.org" "SeaSketch Homepage"}}
<a href="http://www.seasketch.org" target="_blank">SeaSketch Homepage</a>
{{link URL "Click here for the website"}}
imagesearch ( attributeOrString, link_text )
Given an attribute or string and link text, constructs a link to a Google image search for that attribute.
Example
{{imagesearch "Architeuthis" "Search for Giant Squid"}}
{{imagesearch MY_ATTR "Search for value of MY_ATTR"}}img ( src )
Add an image to your popup.
Example
{{img "http://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Anim1754_-_Flickr_-_NOAA_Photo_Library.jpg/220px-Anim1754_-_Flickr_-_NOAA_Photo_Library.jpg"}}
{{img MY_IMAGE_ATTR }}between ( attribute, low, high )
This is a Block Helper. Content within this block will be displayed if the value of attribute is less than the low value, and higher than the given high value.
Example
{{#between Count_ 3 6}}
Moderate
{{/lt}}Count_ = 4 -> "Moderate"
Count_ = 6 -> ""
splitFirst ( attribute, delimiter="," )
Splits the given string by the delimiter and returns the first value.
Example
{{splitFirst "Burt, Chad" }} -> "Burt"
Or use to create a link using a subexpression
regulation_url = "MPA Regulations|http://example.com/regulations.html"
{{link (splitLast regulation_url "|") (splitFirst regulation_url "|")}} -> <a href="http://example.com/regulations">MPA Regulations</a>splitLast ( attribute, delimiter="," )
Splits the given string by the delimiter and returns the last value.
splitN ( attribute, delimiter=",", n )
Splits the given string by the delimiter and returns the n-th value.
concat (stringA, stringB)
Adds stringB to the end of stringA. Useful for joining attributes or a static string to an attribute value.