-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
433 lines (385 loc) · 23 KB
/
index.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
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
<html>
<head>
<title>maptimeLEX - Leaflet + Squirrel States of America</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<link rel="stylesheet" href="L.Control.Sidebar.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="L.Control.Sidebar.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
#map {
height: 100%
}
</style>
</head>
<body>
<style>
.leaflet-sidebar > .leaflet-control h1 {
font-size: 24pt;
font-family: 'Comic Sans MS', monospace;
}
.leaflet-sidebar > .leaflet-control h2 {
font-size: 16pt;
font-family: 'Comic Sans MS', monospace;
}
.leaflet-sidebar > .leaflet-control h3 {
font-size: 10pt;
font-family: 'Comic Sans MS', monospace;
}
.leaflet-sidebar > .leaflet-control a {
color: #2980b9;
}
.leaflet-sidebar > .leaflet-control hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid rgba(151, 219, 182, 0.4);
margin: 1em 0;
padding: 0;
}
/*Pop-up*/
.custom-popup .leaflet-popup-content-wrapper {
background: rgba(70, 145, 158, 0.7);
color: #fff;
font-size: 12px;
font-family: 'Comic Sans MS', monospace;
line-height: 18px;
}
.custom-popup .leaflet-popup-content-wrapper a {
color: rgba(255, 255, 255, 0.1);
}
.custom-popup .leaflet-popup-tip-container {
margin: 0 auto;
width: 40px;
height: 20px;
position: relative;
overflow: hidden;
}
.custom-popup .leaflet-popup-tip {
width: 15px;
height: 15px;
padding: 1px;
margin: -8px auto 0;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background: rgba(70, 145, 158, 0.7);
}
#squeekout, .lst-none{
list-style-type: none;
}
.lst-lowalph{
list-style-type: lower-alpha;
}
.examples, #squeeklaugh{
text-align: center;
}
#squeeklaugh{
font-family: 'Comic Sans MS', monospace;
}
.img-center{
margin-right: auto;
margin-left:auto;
display: block;
}
</style>
<div id="sidebar">
<h1>Going Nuts with Leaflet</h1>
<hr>
<h2>Table of Contents</h2>
<ol>
<li><a href="#intro">Introduction</a></li>
<li><a href="#acknowledge">Acknowledgements</a></li>
<li><a href="#tech">Tech We'll Use</a></li>
<li><a href="#back">Step -1: Set-up > Back End</a></li>
<li><a href="#front">Step 0: Set-up > Front End</a></li>
<li><a href="#data">Data: You can get it!</a></li>
<li><a href="#base">Tile Basemap</a></li>
<!-- <li><a href="#gh-pages">Hosting with GitHub Pages</a></li> -->
<li><a href="#leaflet">Step 1: Leaflet...at last!</a></li>
<li><a href="#ssa-capitals">Step 2: Adding Feature Data > SSA Capitals</a></li>
<li><a href="#custom-icon">Step 3: Custom Icon</a></li>
<li><a href="#popup">Step 4: Pop-up Window</a></li>
<li><a href="#ssa-states">Step 5: Adding Feature Data > SSA States</a></li>
<li><a href="#custom-area">Step 6: Custom Area Fill</a></li>
<!-- <li><a href="#"></a></li> -->
</ol>
<hr>
<h2 id="intro">Introduction</h2>
<a href="https://twitter.com/maptimelex" target="_blank">@maptimelex</a> & <a href="https://twitter.com/rmcooper4" target="_blank">@rmcooper4</a>
<p>
These are amazing times we live in. Just pat your mouse and keyboard with your paws a few times and you can have an informative, interactive map up on the tubez in no time! Certainly much easier than finding those acorns in the park you were hiding from Jerry!
</p>
<img src="jerry_comicsans.gif" class="img-center" />
<p>
Alas, using open source components, the following instructions will get you flying into web-mapping. This exercise assumes a knowledge of HTML and Javascript - but not at all required. This will step through each phase of what you see to the right. Just keep on scrolling down in this panel. If you get lost at anytime just ask for help. Someone will be there to scrape you off the road and get you back on your feet again!
</p>
<p>
Enough chatter! Let's go nuts with Leaflet!
</p>
<hr>
<h2 id="acknowledge">Acknowledgements</h2>
<h3>- or - <em>"You didn't build that" - Ryan Cooper <small>- Barack Obama</small></em></h3>
<p>
When you're a squirrel, pretty much everyone is a giant. And it is on the backs of giants that this tutorial was built. Special squeek outs to:
</p>
<ul id="squeekout">
<li><a href="https://twitter.com/jonahadkins" target="_blank">Jonah Adkins</a> (maptimeHRVA)
<ul class="lst-none">
<li>The majority of this tutorial is an adaptation of what Jonah put together for <a href="http://maptime.io/hrva/ghosts/hauntedHRVA.html" target="_blank">maptimeHRVA's October meetup</a>.</li>
</ul>
</li>
<li><a href="https://twitter.com/awoodruff" target="_blank">Andy Woodruff</a> (maptimeBoston)
<ul class="lst-none">
<li>maptimeLEX and maptimeBoston have an unlikely yet indelible bond. Andy Woodruff's tutorial involving rat mapping not only inspired me to carry on the mapping of rodent friends, but it also offered a lot of inspiration for the general flow of this tutorial.</li>
</ul>
</li>
<li><a href="https://twitter.com/ungoldman" target="_blank">Nate Goldman</a>
<ul class="lst-none">
<li>Nate's layout for his hamburger map inspired Jonah whose layout inspired me. As such, Nate gets a squeek out. <a href="http://ngoldman.github.io/burger-week-challenge-2014/" target="_blank">Check out his mouth-watering map!</a></li>
</ul>
</li>
</ul>
<p>More generally, I have to give a high-paw to the maptime community for being a great network of people commmitted to opening up the tools for creating maps to a broader audience</p>
<br>
<a href="http://www.maptime.io/" target="_blank"><img src="https://raw.githubusercontent.com/maptime/maptime.github.io/master/img/xmaptime-logo-web-header-rainbonly.png.pagespeed.ic.sUvy41gYSf.png" style="width:300px;height:150px" class="img-center"></a>
<p>Finally, Awesome Inc. They rule because they have been so generous in giving maptimeLEX a space and time to come together and do mappy things. They are a great partner to have!</p>
<br>
<img src="https://raw.githubusercontent.com/maptimelex/leaflet-squirrels/master/awesomeinc_horizontal.png" style="width:75%" class="img-center"/>
<hr>
<h2 id="tech">Tech We'll Use</h2>
<ul>
<li><a href="http://leafletjs.com" target="_blank">Leaflet</a></li>
<li><a href="http://geojson.io/" target="_blank">GeoJSON.io</a></li>
<li><a href="http://mapstack.stamen.com/" target="_blank">MapStack</a></li>
<li>Text Editor</li>
<li>Python SimpleHTTPServer</li>
</ul>
<hr>
<h2 id="back">Step -1: Set-up > Backend</h2>
<p>
Before we get to mapping, we need to ensure that our project is organized and that we can check our progress in the browser as we add new features.
</p>
<p>
First, create a directory somewhere on you computer where you'll store your project. Perhaps give the folder a descriptive name like "leaflet-squirrels".
</p>
<p>
Next, you'll want to start a local server using the Python module SimpleHTTPServer. If you don't have Python, grab it <a href="https://www.python.org/downloads/" target="_blank">here</a>. Version 2.7.x is the one you want. <a href="http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/" target="_blank"><em>Python for Beginners</em></a> has a nice walk-through for starting your server, but you really just need to open Terminal(OSX/Linux)/Command Prompt(Windows), navigate to your project's directory, and input the following command:
</p>
<!-- HTML generated using hilite.me -->
<div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;">
<pre style="margin: 0; line-height: 125%">python -m SimpleHTTPServer</pre>
</div>
<p>
Just add the URL below into your browser and you'll be able to see your project as if it were online!
</p>
<!-- HTML generated using hilite.me -->
<div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;">
<pre style="margin: 0; line-height: 125%">http://127.0.0.1:8000</pre>
</div>
<p>
If you don't like this approach, no worries. You might be interested in using something like <a href="https://pages.github.com/" target="_blank">GitHub Pages</a> or <a href="https://neocities.org/" target="blank">Neocities</a> to host your project. The upshot is that your project will be online while you're making it.
</p>
<hr>
<h2 id="front">Step 0: Set-up > Front End</h2>
<p>
Using your text editor, set up a simple HTML file. Call it "index.html." We'll also add the container and some basic styling for our map
</p>
<p class="examples">
<a href="http://bl.ocks.org/maptastik/be990b397fcfa82612cf" target="_blank">Example</a> | <a href="https://gist.githubusercontent.com/maptastik/be990b397fcfa82612cf/raw/b51def0e548e4463ca1cd2cca316e57b42033dc7/index.html" target="_blank">Code</a>
</p>
<hr>
<h2 id="data">Data: You can get it!</h2>
<p>
When trying to learn a new mapping technology, it can sometimes be easy to get hung up on what to map as an example. Lots of things exist on this planet and that means there are a lot of things that can be mapped. To deal with the data hangup, I've taken the liberty of providing some prepared data for you.
</p>
<p>
January 21st is Squirrel Appreciation Day. This is <a href="http://www.holidayinsights.com/moreholidays/January/squirrelappreciation.htm" target="_blank">according to the internet</a>, so you know it's true! As such, we're going to be doing some mapping with a squirrel them (Take that maptimeBoston rats!). Now, Lexington doesn't collect data about squirrels. In fact, there's not a lot of publicly available data about squirrels. They can be a very withholding species, so I had to get creative. I really enjoy speculative cartography like Andrew Shears' map of the US broken into breakaway states.
</p>
<a href="http://andrewshears.com/2011/12/08/the-united-states-that-couldve-been/" target="_blank"><img src="USNeverWasBig.png" class="img-center" style="width: 90%"/></a>
<p>
I wondered "What if the squirrels took over? What would the newly drawn boundaries of the Squirrel States of America look like?"
</p>
<p>
It's difficult to understand the political psychology of squirrels. If you've ever seen them battle over who gets to be on what side of a tree, you know that territorial demarcation is generally a fluid concept. However, let's suspend reality for a bit and assume that squirrels deal in a post-Westphalian notion of territory (whatever that means!). Using data from the Geographic Name Information System (GNIS), a part of the USGS I found 21 settlements (census designated areas, locales, and populated places) that included the term "squirrel". This data includes latitude and longitude so it can be mapped with minimal clean-up.
</p>
<p>
There are two main datasets we'll be working with that are derived from this GNIS data. The first one is called ssa-capitals.geojson. This is a point dataset that shows the location of the 21 squirrelly places filtered from that full GNIS dataset. We'll be using them as capitals for our Squirrel States of America (SSA). Check it out <a href="https://github.com/maptimelex/leaflet-squirrels/blob/master/ssa-capitals.geojson" target="_blannk">here</a>.
</p>
<p>
The second dataset is ssa-states.geojson. This is polygon dataset showing the extent of each squirrel state in the SSA. They are simply Voronoi polygons created in QGIS that were clipped by the boundaries of the the USA.
</p>
<a class="embedly-card" href="http://en.wikipedia.org/wiki/Voronoi_diagram">Voronoi diagram - Wikipedia, the free encyclopedia</a>
<script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script>
<p>
Check it out <a href="https://github.com/maptimelex/leaflet-squirrels/blob/master/ssa-states.geojson" target="_blank">here</a>.Surely there are other more creative methods for drawing these boundaries. Feel free to create your own. I suggest using a cool tool called <a href="http://geojson.io/" target="_blank">GeoJSON.io</a>.
</p>
<p>Download the following files to your project directory</p>
<ul>
<li><a href="https://raw.githubusercontent.com/maptimelex/leaflet-squirrels/gh-pages/ssa-capitals.geojson" target="_blank">ssa-capitals.geojson</a></li>
<li><a href="https://raw.githubusercontent.com/maptimelex/leaflet-squirrels/gh-pages/ssa-states.geojson" target="_blank">ssa-states.geojson</a></li>
<li><a href="https://raw.githubusercontent.com/maptimelex/leaflet-squirrels/gh-pages/squirrel-king-icon.png">squirrel-king-icon.png</a> (more on this later)</li>
</ul>
<hr>
<h2 id="base">Tile Basemap</h2>
<p>
The second element of this project is the basemap. To keep it simple, we are going to use a service provider rather than build our own server stack. We'll learn more about that in the future, but let's make things easier on ourselves with the help of our friends out west at Stamen Design.
</p>
<p>
<a href="http://mapstack.stamen.com/" target="_blank">MapStack</a> is an awesome project that will allow us to create some free map tiles using OpenStreetMap. The image filters and effects offer a wide variety of customization. When you're happy with what you've came up with copy/paste the tile url of the image. It's rather long, but required for inserting into our code. For this example our url is
<!-- HTML generated using hilite.me -->
<div style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;">
<pre style="margin: 0; line-height: 125%">http://{s}.sm.mapstack.stamen.com/((naip,$fff[difference],$fff[@60],$fff[hsl-saturation@90])[multiply],(mapbox-water,$fff[difference],$000[@60],$090d11[hsl-color]))/{z}/{x}/{y}.png</pre>
</div>
</p>
<hr>
<!-- <h2 id="gh-pages">Hosting with GitHub Pages</h2>
<p>
GitHub is great resource for code-sharing, development, and storage. An added bonus is the automatic page generator for any repository you create. We will use this for hosting our web-app and storing all of the necessary components. Think of it as your personal set of chubby squirrel cheeks!
</p>
<img src="https://raw.githubusercontent.com/maptimelex/leaflet-squirrels/master/squirrel-cheeks.jpg" style="width: 75%" class="img-center">
<p>
When you store your project there will a be total of 5 files in your repository that that run your app. Once you have enabled your github pages branch, you can delete everything except for the index.html file. It will keep all the code for your app, you can rename it if you like as well. Our <a href="https://github.com/maptimelex/leaflet-squirrels" target="_blank">sample repository</a> demonstrates the set-up for this project.
</p> -->
<hr>
<h2 id="leaflet">Step 1: Leaflet...at last!</h2>
<p>
Leaflet is the magic behind many of today's web-mapping applications. It provides an extensive library of functions supported by a dedicated team of contributors. We are going to use the <a href="http://leafletjs.com" target="_blank">Leaflet.js</a> library to create our map. Using the documentation from the Leaflet.js website, we are going to start with the most basic components needed for a map. We are going to:
</p>
<ol class="lst-lowalph">
<li>Add Leaflet starter code</li>
<li>Specify the center lat/long of our starting view</li>
<li>Add our tile layer URL from MapStack</li>
</ol>
<p class="examples">
<a href="http://bl.ocks.org/maptastik/52aa10fde029aa42e8cd" target="_blank">Example</a> | <a href="https://gist.githubusercontent.com/maptastik/52aa10fde029aa42e8cd/raw/0fc5764f5dbeabaa357ec8e9ae4a83f1cc4a2d20/index.html" target="_blank">Code</a>
</p>
<hr>
<h2 id="ssa-capitals">Step 2: Adding Feature Data > SSA Capitals</h2>
<p>
It's cool that we hae our basemap down, but the squirrels want more! Let's add some of the .geojson file we looked at earlier. An added step is using a <a href="http://code.jquery.com/jquery-2.1.3.min.js" target="_blank">jQuery</a> library to handle the interaction of our data.
</p>
<p>
We are going to:
</p>
<ol class="lst-lowalph">
<li>Reference jQuery in the html file's <em>head</em></li>
<li>Load our data</li>
<li>Add it to the map</li>
</ol>
<p class="examples">
<a href="http://bl.ocks.org/maptastik/0687ec03edeeca0b26c0" target="_blank">Example</a> | <a href="https://gist.githubusercontent.com/maptastik/0687ec03edeeca0b26c0/raw/c6d2c8d2003dff057e3e1e23dcc3ab2fab3dde97/index.html" target="_blank">Code</a>
</p>
<hr>
<h2 id="custom-icon">Step 3: Custom Icon</h2>
<p>
Our country has been taken over by egomaniacal squirrels. Would they really be satisfied with DEFAULT icons? We must keep them pleased! Fortunately, Leaflet allows us to use our own icons. <a href="https://github.com/maptimelex/leaflet-squirrels/blob/gh-pages/squirrel-king-icon.png" target="_blank">Here's one that will remind our squirrel overlords that they indeed are the rulers of us all</a>!
</p>
<img src="https://raw.githubusercontent.com/maptimelex/leaflet-squirrels/gh-pages/squirrel-king-icon.png" class="img-center"/>
<p id="squeeklaugh">
<em><strong>Mwahsqueeksqueeksqueeksqueek!!!!</strong></em>
</p>
<p>
Only one step here lets:
</p>
<ol class="lst-lowalph">
<li>Add a new icon</li>
</ol>
<p class="examples">
<a href="http://bl.ocks.org/maptastik/d7ef82e4b362c544a559" target="_blank">Example</a> | <a href="https://gist.githubusercontent.com/maptastik/d7ef82e4b362c544a559/raw/6a199a1c4b42ee0bda32fa97bf7b934a12360ffb/index.html" target="_blank">Code</a>
<hr>
<h2 id="popup">Step 4: Pop-up Window</h2>
<p>
The squirrels' eyes gaze on their underlings, but it'd be nice to know more about these squirrel capitals. Let's add some pop-ups from our data's attributes:
</p>
<ol class="lst-lowalph">
<li>Create the pop-up</li>
<li>Format the text</li>
<li>Optionally style with css</li>
</ol>
<p class="examples">
<a href="http://bl.ocks.org/maptastik/a89c715ef78c15889fc5" target="_blank">Example</a> | <a href="https://gist.githubusercontent.com/maptastik/a89c715ef78c15889fc5/raw/ba2e154a72c55c71856aeccb4fee39454d45804c/index.html" target="_blank">Code</a>
</p>
<hr>
<h2 id="ssa-states">Step 5: Adding Feature Data > SSA States</h2>
<p>
We have a map of our squirrel capitals, but what about the states? Let's see what areas are under the dominion of each squirrel capital. Adding the states polygons is a similar process to when we added the capitals. We don't have to reference jQuery again. We only have to do that once!
</p>
<p>
We have to:
</p>
<ol class="lst-lowalph">
<li>Load our data</li>
<li>Add it to the map</li>
</ol>
<p class="examples">
<a href="http://bl.ocks.org/maptastik/01daf587e5be7a6d3b1e" target="_blank">Example</a> | <a href="https://gist.githubusercontent.com/maptastik/01daf587e5be7a6d3b1e/raw/d00e4a99c301cf32356fb52d1fe7038eec97b3fa/index.html" target="_blank">Code</a>
</p>
<hr>
<h2 id="custom-area">Step 6: Custom Area Fill</h2>
<p>
Our squirrels look so posh in wearing their crowns and ontop of their simple, yet elegant basemap. They deserve better than that garish blue area fill for their respective states. Luckily, it takes just a little extra code to get our map styled. We're going to keep it simple, keeping the fill of the a transparent black and showing where their boundaries would be.
<p>
We've got two steps:
</p>
<ol class="lst-lowalph">
<li>Create style object (styleStates)</li>
<li>Toss that style object into our call for ssa-states.geojson</li>
</ol>
<p class="examples">
<a href="http://bl.ocks.org/maptastik/42aa0216a39e4c0b0c24" target="_blank">Example</a> | <a href="https://gist.githubusercontent.com/maptastik/42aa0216a39e4c0b0c24/raw/ec532bd19125f7f386f01d5bc45a041268729d48/index.html" target="_blank">Code</a>
</div>
<div class='custom-popup' id="map"></div>
<script>
// initialize the map
var map = L.map('map').setView([39.833, -98.35], 4);
L.tileLayer(
'http://{s}.sm.mapstack.stamen.com/((naip,$fff[difference],$fff[@60],$fff[hsl-saturation@90])[multiply],(mapbox-water,$fff[difference],$000[@60],$090d11[hsl-color]))/{z}/{x}/{y}.png', {
attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>',
maxZoom: 18,
minZoom: 4,
}).addTo(map);
var sidebar = L.control.sidebar('sidebar', {
closeButton: false,
position: 'left'
});
map.addControl(sidebar);
setTimeout(function() {
sidebar.show();
}, 500);
var statesStyle = {
"color":"#000000",
"weight": 2,
"fillColor": "#000000",
"fillOpacity":0.25
};
//load GeoJSON polygons from external file
$.getJSON("ssa-states.geojson", function(stateData){
L.geoJson(stateData, {
style: statesStyle
}).addTo(map);
});
// load GeoJSON from an external file
$.getJSON("ssa-capitals.geojson", function(data) {
var squirrelIcon = L.icon({
iconUrl: 'squirrel-king-icon.png',
iconSize: [48, 48],
popupAnchor: [0, -18]
});
// add GeoJSON layer to the map once the file is loaded
L.geoJson(data, {
pointToLayer: function(feature, latlng) {
var marker = L.marker(latlng, {
icon: squirrelIcon
});
marker.bindPopup('<b>Name: </b>' + feature.properties.FeatureNa + '<br/>' + '<b>Elevation: </b>' + feature.properties.elev);
return marker;
}
}).addTo(map);
});
</script>
<!-- <a href="https://github.com/maptime/hrva/tree/gh-pages/ghosts"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"></a> -->
</body>
</html>