-
Notifications
You must be signed in to change notification settings - Fork 0
/
popups-and-tooltips.html
182 lines (171 loc) · 10 KB
/
popups-and-tooltips.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1,user-scalable=no,maximum-scale=1,width=device-width">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta property="og:image" content="https://raw.githubusercontent.com/fulcrumapp/fulcrum-styler/gh-pages/assets/img/screenshot.jpg"/>
<meta name="description" content="A responsive web mapping application for viewing Fulcrum Data Shares">
<meta name="keywords" content="Leaflet, CartoDB, MapBox, Bing, Google, collector,forms, data collection, maps, digital, web, mobile, ">
<meta name="msapplication-TileColor" content="#222222">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="author" content="Katrina Engelsted">
<title name="title">Fulcrum Styler</title>
<link rel="stylesheet" type="css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="apple-touch-icon" sizes="76x76" href="assets/img/favicon-76.png">
<link rel="apple-touch-icon" sizes="120x120" href="assets/img/favicon-120.png">
<link rel="apple-touch-icon" sizes="152x152" href="assets/img/favicon-152.png">
<link rel="icon" sizes="196x196" href="assets/img/favicon-196.png">
<link rel="icon" type="image/x-icon" href="assets/img/favicon.ico">
<!--[if lt IE 9]>
<script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-icon-container">
<a href="#" class="navbar-icon pull-right visible-xs" id="nav-btn"><i class="fa fa-bars fa-lg white"></i></a>
</div>
<a class="navbar-brand" href="#" name="title" id="navbar-title"><img src="assets/img/fulcrum-small.png">Fulcrum Styler Popups and Tooltips</a>
</div>
</div>
</div>
<section>
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav affix">
<li class="active"><a href="#global"><i class="icon-chevron-right"></i> Global styles</a></li>
<li><a href="#gridSystem"><i class="icon-chevron-right"></i> Grid system</a></li>
<li><a href="#fluidGridSystem"><i class="icon-chevron-right"></i> Fluid grid system</a></li>
<li><a href="#layouts"><i class="icon-chevron-right"></i> Layouts</a></li>
<li><a href="#responsive"><i class="icon-chevron-right"></i> Responsive design</a></li>
</ul>
</div>
<div class="span9">
<h1>Popups and Tooltips</h1>
<strong>Popups</strong> appear when interactive features on your map are clicked. <strong>Tooltips</strong> are similar, but they are not enabled by default and they only appear when you hover the mouse over an interactive feature.
<strong>Learning Goals:</strong>
<ul>
<li><a href="#handlebars">Understand the Handlebars templating language</a></li>
<li><a href="#html">Learn the basics of HTML</a></li>
</ul>
When you first add an overlay to your map, popups default to showing all of the fields that are available for an overlay.</p>
<img alt="By default, FulcrumStyler displays all of an overlay's available fields." class="img-responsive" src="assets/img/19-default-popups.jpg" style="width:400px;">
By clicking on an interactive feature to view its default popup, you can determine which fields are available to use when configuring your overlay's popups and tooltips. It is a good idea to make note of the exact field names you want to use before you start configuring popups and tooltips for an overlay.
<h2 id="handlebars">Handlebars</h2>
You can use the <a href="http://handlebarsjs.com/">Handlebars</a> templating library to configure your popups and tooltips. To display the value of an overlay's field in a popup or tooltip, type the name of the field surrounded by ``. So if an overlay has two fields, "Name" and "Description", a popup configuration may look something like this:
<img alt="A look at popups" class="img-responsive" src="assets/img/20-popup.jpg" style="width:300px">
A few Handlebars tips:
<ul>
<li>Field names are <strong>case-sensitive</strong>, so make sure you type them in exactly how they are stored in the original dataset.</li>
<li>Attributes that have spaces in the names must be wrapped in square brackets: e.g. <code>{{ [Resource Name] }}</code>.</li>
<li>If you are using HTML, use double quotes for the HTML tags because single quotes will cause errors. For example, do this: <code><img src="https://www.flickr.com/photos/nationalparkservice/{{image}}"></code> and <em>not</em> this: <code><img src='https://www.flickr.com/photos/nationalparkservice/{{image}}'></code>.</li>
</ul>
<h3>Conditionals</h3>
<p>You can use Handlebars to add logic to an overlay's popups and tooltips by using conditional statements, such as:
<code>{{#each}}{{/each}}</code>,
<code>{{#if}}{{/if}}</code> and
<code>{{#unless}}{{/unless}}</code> .</p>
<p>Conditionals are useful if you only want certain attributes to display. For example, if you want to display a string of text if a feature's elevation value is over 1500 meters, you can use the if conditional:</p>
<p><code>{{#if elevation > 1500}}Elevation is greater than 1500 meters!{{/if}}</code></p>
<p>Adding logic to popups and tooltips can be a daunting task. If you are confused or have any questions about how to use Handlebars' helpers, feel free to email the NPMap team (<a href="mailto:npmap@nps.gov">npmap@nps.gov</a>) or get in touch on Twitter (<a href="http://twitter.com/npmap">@npmap</a>).</p>
<h2 id="html">HTML</h2>
<p>You can combine valid HTML with Handlebars templates to customize the display of an overlay's popups and tooltips.</p>
<h3>Headers</h3>
<p>For instance, you can change the semantic importance of fields by using different header tags:</p>
<p><code><h1>{{unit_name}}</h1></code><br>
<code><h2>{{unit_designation}}</h2></code></p>
<h3>Emphasis</h3>
<p>Or you can change the importance and/or strength of a string of text by using bold or italics:</p>
</div>
<table>
<tr>
<td style="width: 300px"> <code><strong>{{unit_name}}</strong></code></td><td><strong>Mt. Rainier</strong></td>
</tr>
<tr>
<td> <code><em>{{unit_designation}}</em></code></td><td><em>Mt. Rainier</em></td>
</tr>
</table>
<h3>Lists</h3>
<p>If you need to add structure to the way your data is displayed, you can add an ordered list, an unordered list, or even a table:</p>
<code><pre><ul>
<li>Name: Acadia</li>
<li>Designation: National Park</li>
</ul></pre></code>
<h3>Links</h3>
<p>If you would like to add links to your popups (they aren't supported for tooltips), you can create an <code><a></code> element:</p>
<code><a src="http" target="_blank">Acadia National Park</a></code>
The <code>target="_blank"</code> property lets the browser know it should open the link in a new tab or window.
<h3>Reference</h3>
<p>Here is a table of the HTML elements you can use when configuring your popups and tooltips.</p>
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th style="width:200px;">Tag</th>
<th style="width:300px">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code><h1></code>, <code><h2></code>, <code><h3></code>, <code><h4></code>, <code><h5></code>, and <code><h6></code></td>
<td>Headings</td>
</tr>
<tr>
<td><code><strong></code></td>
<td>Strong text, displayed as bold text in most browsers</td>
</tr>
<tr>
<td><code><em></code></td>
<td>Emphasis, displayed as italics in most browsers</td>
</tr>
<tr>
<td><code><u></code></td>
<td>Underlined text</td>
</tr>
<tr>
<td><code><sup></code></td>
<td>Superscript text</td>
</tr>
<tr>
<td><code><sub></code></td>
<td>Subscript text</td>
</tr>
<tr>
<td><code><ol><li></li><li></li></ol></code></td>
<td>Ordered list with two list elements</td>
</tr>
<tr>
<td><code><ul><li></li><li></li></ul></code></td>
<td>Unordered list with two list elements</td>
</tr>
<tr>
<td><code><a></code></td>
<td>Links</td>
</tr>
<tr>
<td><code><img></code></td>
<td>Images</td>
</tr>
<tr>
<td><code><iframe></code></td>
<td>Iframes</td>
</tr>
<tr>
<td><code><video></code></td>
<td>Videos</td>
</tr>
<tr>
<td><code><audio></code></td>
<td>Audio files</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</body>
</html>