.. _step_13:
Step 13: Declare sources and show instructions again
====================================================
.. comments
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.
.. contents:: Contents
:depth: 2
:local:
Add a footer
------------
It is very important to declare the data sources used to create the map and we will do so by adding a footer at the bottom of the page.
.. code-block:: html
:caption: index.html - footer with data sources
:linenos:
:lineno-start: 24
:emphasize-lines: 12-14
Instructions
- Change the key using the dropdown above the map.
- Select a municipality to show the details.
- Scroll in the map to zoom in and out.
And we style it with CSS
.. code-block:: css
:caption: style.css - footer style
:linenos:
:lineno-start: 38
:emphasize-lines: 3-10
/* ... */
.footer {
border-top: 1px solid silver;
color: #888888;
font-size: 1.25rem;
text-align: center;
margin-top: 1rem;
padding: 0.5rem;
}
/* ... */
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).
.. code-block:: guess
:caption: index.html - close button in template
:linenos:
:lineno-start: 38
:emphasize-lines: 6,28
Now we need to define the function ``hideDetails()`` which will hide the details container and show the initial instructions container again.
.. code-block:: js
:caption: map.js - function to hide the details
:linenos:
:lineno-start: 158
:emphasize-lines: 3-11
// ...
/**
* Hide the details 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.
.. code-block:: css
:caption: style.css - close button style
:linenos:
:lineno-start: 47
:emphasize-lines: 3-12
/* ... */
#close-details {
color: #FA5858;
text-decoration: none;
font-size: 4rem;
text-align: right;
line-height: 4.5rem;
}
#close-details:hover {
color: red;
}
/* ... */
.. rubric:: Next
Proceed to :ref:`step_14`.
Code
----
* For reference, the file ``index.html`` after step 13:
https://github.com/lvonlanthen/data-map-d3/blob/step-13/index.html
* For reference, the file ``style.css`` after step 13:
https://github.com/lvonlanthen/data-map-d3/blob/step-13/style.css
* For reference, the file ``map.js`` after step 13:
https://github.com/lvonlanthen/data-map-d3/blob/step-13/map.js
* The diff view of step 12 and step 13:
https://github.com/lvonlanthen/data-map-d3/compare/step-12...step-13?diff=split