Step 13: Declare sources and show instructions again

In this step, we are going to declare the sources we used for the map and add the possibility to return to the instructions after showing the details of a feature.

Return to instructions

Right now the instructions are only visible when the page is first loaded. After clicking on a feature the instructions are hidden and there is no way to bring them back.

We will now add a button to close the details and bring back the initial instructions.

First, we create a button as part of the Mustache template for the details of a feature. To do this, we reduce the number of columns the table is using up from 6 to 5. This makes room for one single column after the table which contains the button. Notice the column class name for single column (as opposed to columns for multiple columns).

index.html - close button in template
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
    <!-- ... -->

    <!-- Mustache template, rendered later to show the details of a feature -->
    <script id="template" type="x-tmpl-mustache">
      <h3 class="six columns">{{ name }}</h3>
      <table class="five columns">
        <tr>
          <th>Total area:</th>
          <td>{{ area }} km&sup2;</td>
        </tr>
        <tr>
          <th>Urban area:</th>
          <td>{{ urban }} %</td>
        </tr>
        <tr>
          <th>Agricultural area:</th>
          <td>{{ agriculture }} %</td>
        </tr>
        <tr>
          <th>Forest area:</th>
          <td>{{ forest }} %</td>
        </tr>
        <tr>
          <th>Unproductive area:</th>
          <td>{{ unproductive }} %</td>
        </tr>
      </table>
      <a href="#" id="close-details" class="one column" onclick="hideDetails(); return false;">&#x274c;</a>
    </script>

    <!-- ... -->

Now we need to define the function hideDetails() which will hide the details container and show the initial instructions container again.

map.js - function to hide the details
158
159
160
161
162
163
164
165
166
167
168
169
170
// ...

/**
 * Hide the details <div> container and show the initial content instead.
 */
function hideDetails() {
  // Hide the details
  d3.select('#details').classed("hidden", true);
  // Show the initial content
  d3.select('#initial').classed("hidden", false);
}

// ...

Lastly, we apply some styling to the button.

style.css - close button style
47
48
49
50
51
52
53
54
55
56
57
58
59
60
/* ... */

#close-details {
  color: #FA5858;
  text-decoration: none;
  font-size: 4rem;
  text-align: right;
  line-height: 4.5rem;
}
#close-details:hover {
  color: red;
}

/* ... */

Next

Proceed to Step 14: Map legend.

Code