Time for action – displaying photo information

We need a programmatic way to display the information about our photos in the web page. This means taking data about the selected features and creating HTML elements for them. For the purpose of this chapter, we'll create an HTML template and populate it with data from the feature. While there are many different approaches and libraries for implementing HTML templates, our needs are simple; so, we'll do it without depending on another library.

We'll need several HTML elements to display each piece of information, and a way to specify where in the elements we want to put what information. We could write the template as a JavaScript string, but then we couldn't put line breaks into the HTML and it will be difficult to read in the code. Instead, we'll use the same technique that most templating libraries use—a <script> tag with the id and type attributes set to something other than text/javascript. We'll explain how it works later. We'll use brace brackets { and } around key words to indicate where we want to place specific information.

The first step is to create a template. We can add it anywhere inside the <body> tag, by convention, they are usually added after everything else and just before the </body> tag at the end:

<script type="text/html" id="photo-template">
  <a href="{link}" target="_blank" title="Click to open photo in new tab" style="float:left; "><img src="{url}"></a><br>
  <p>Ta	ken by <a href="http://www.flickr.com/people/{author_id}" target="_blank" title="Click to view author details in new tab">{author}</a> on {date_taken} at lat: {latitude} lon: {longitude}</p><br>
  <p>Tagged in <b>{tags}</b></p>
</script>

Next, we need a function that takes a feature and creates an HTML representation of it by combining the feature's properties with our template. Add the following function anywhere in our main script tag, preferably just before we create the select interaction:

function photoContent(feature) {
  var content = $('#photo-template').html();
  var keys = ['author','author_id','date_taken','latitude','longitude','link',
                    'url','tags','title'];
  for (var i=0; i<keys.length; i++) {
    var key = keys[i];
    var value = feature.get(key);
    content = content.replace('{'+key+'}',value);
 }
 return content;
}

Now, we can update our select interaction's event handler and use our templating function to get HTML content for each selected photo:

selectedFeatures.on('add', function(event) {
  var feature = event.target.item(0);
  var content = photoContent(feature);
$('#photo-info').append(content);
});

And that's it, now we should see some useful information about each photo when it's selected. Go ahead and try it out.

What just happened?

We just built a simple templating system that lets us put feature properties into an HTML template and injected the results into the page to show information about each feature in the selected cluster. Let's review each step in detail.

In the first step, we created our HTML template by putting the HTML code we want to display for each photograph into a <script> tag. This probably sounds strange, but it is a technique used by many template libraries. The <script> tag has a type attribute that tells the browser how to interpret its content. When we are writing JavaScript, the value of the type attribute is text/javascript. If the type attribute is not specified, all browsers will assume that the type is just this—text/javascript. However, if the type is set to something else that the browser does not recognize, such as text/html, then the browser will ignore both the tag and its contents. It is still in the DOM, however, and we can retrieve its content using jQuery's html() method, just as we will with any other HTML element. This allows us to write readable HTML that can be accessed programmatically, without having to worry about it showing up in the web page.

The template content is self-explanatory. We used an anchor tag around the image and some <p> tags for extra information about the author and keywords that the photo was tagged with. We placed brace brackets around a keyword in each place we wanted to insert some information dynamically from a feature property. To keep it simple, the keywords will match the feature property names. Thus, the following line in the template will get replacements for {link} and {url} from the current feature:

<a href="{link}" target="_blank" title="Click to open photo in new tab"><img src="{url}"></a><br>

In the second step, we added a function that generates HTML content for a given feature by replacing placeholders in the template with actual values. The first step is to get the content of the template as a string, for which we use jQuery's html() method:

var content = $('#photo-template').html();

Next, we have an array of the property names we want to process replacements for.

var keys = ['author','author_id','date_taken','latitude','longitude','link','url','tags','title'];

For each of these, we get the value of the previous property from the feature:

for (var i=0; i<keys.length; i++) {
  var key = keys[i];
  var value = feature.get(key);

Finally, we replaced the placeholder (the key wrapped in brace brackets) with the value and when all replacements were done, we returned the resulting string:

  content = content.replace('{'+key+'}',value);
}
return content;

In the last step, we made use of our function to get HTML for the selected feature and added it to the page:

$('$photo_info').append(content);

Previous Chapter

Time for action – handling selection events

Next Chapter

Using real time data

Table of Contents for OpenLayers 3 : Beginner's Guide

Time for action – displaying photo information

What just happened?

Table of Contents for
OpenLayers 3 : Beginner's Guide