-
Notifications
You must be signed in to change notification settings - Fork 28
/
Copy pathLesson5-share-on-github.html
399 lines (289 loc) · 21 KB
/
Lesson5-share-on-github.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
<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en" > <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en" > <!--<![endif]-->
<head>
<meta charset="utf-8">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-88382509-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sharing interactive plots on GitHub — GeoPython - AutoGIS 1 documentation</title>
<link rel="stylesheet" href="_static/css/theme.css" type="text/css" />
<link rel="index" title="Index"
href="genindex.html"/>
<link rel="search" title="Search" href="search.html"/>
<link rel="top" title="GeoPython - AutoGIS 1 documentation" href="index.html"/>
<link rel="next" title="Interactive maps on Leaflet" href="Lesson5-interactive-map-folium.html"/>
<link rel="prev" title="Interactive maps with Bokeh" href="Lesson5-interactive-map-bokeh.html"/>
<script src="_static/js/modernizr.min.js"></script>
</head>
<body class="wy-body-for-nav" role="document">
<div class="wy-grid-for-nav">
<nav data-toggle="wy-nav-shift" class="wy-nav-side">
<div class="wy-side-scroll">
<div class="wy-side-nav-search">
<a href="index.html" class="icon icon-home"> GeoPython - AutoGIS
<img src="_static/logo_hy_geo_135.png" class="logo" />
</a>
<div class="version">
2016 Autumn
</div>
<div role="search">
<form id="rtd-search-form" class="wy-form" action="search.html" method="get">
<input type="text" name="q" placeholder="Search docs" />
<input type="hidden" name="check_keywords" value="yes" />
<input type="hidden" name="area" value="default" />
</form>
</div>
</div>
<div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
<p class="caption"><span class="caption-text">Course information</span></p>
<ul>
<li class="toctree-l1"><a class="reference internal" href="course-info.html">General info</a></li>
<li class="toctree-l1"><a class="reference internal" href="Installing_Anacondas_GIS.html">Installing Python + GIS</a></li>
<li class="toctree-l1"><a class="reference internal" href="License-terms.html">License and terms of usage</a></li>
</ul>
<p class="caption"><span class="caption-text">Lesson 1</span></p>
<ul>
<li class="toctree-l1"><a class="reference internal" href="Lesson1-Intro-Python-GIS.html">Introduction to Python GIS</a></li>
<li class="toctree-l1"><a class="reference internal" href="Lesson1-Geometric-Objects.html">Geometric Objects - Spatial Data Model</a></li>
<li class="toctree-l1"><a class="reference internal" href="Exercise-1.html">Exercise 1</a></li>
</ul>
<p class="caption"><span class="caption-text">Lesson 2</span></p>
<ul>
<li class="toctree-l1"><a class="reference internal" href="Lesson2-overview.html">Lesson 2 Overview</a></li>
<li class="toctree-l1"><a class="reference internal" href="Lesson2-download-data.html">Download datasets</a></li>
<li class="toctree-l1"><a class="reference internal" href="Lesson2-overview-pandas-geopandas.html">Pandas and Geopandas -modules</a></li>
<li class="toctree-l1"><a class="reference internal" href="Lesson2-pandas-intro.html">Introduction to Pandas</a></li>
<li class="toctree-l1"><a class="reference internal" href="Lesson2-geopandas-basics.html">Introduction to Geopandas</a></li>
<li class="toctree-l1"><a class="reference internal" href="Exercise-2.html">Exercise 2</a></li>
</ul>
<p class="caption"><span class="caption-text">Lesson 3</span></p>
<ul>
<li class="toctree-l1"><a class="reference internal" href="Lesson3-overview.html">Lesson 3 Overview</a></li>
<li class="toctree-l1"><a class="reference internal" href="Lesson3-geocoding.html">Geocoding</a></li>
<li class="toctree-l1"><a class="reference internal" href="Lesson3-table-join.html">Table join</a></li>
<li class="toctree-l1"><a class="reference internal" href="Lesson3-projections.html">Re-projecting data</a></li>
<li class="toctree-l1"><a class="reference internal" href="Lesson3-point-in-polygon.html">Point in Polygon & Intersect</a></li>
<li class="toctree-l1"><a class="reference internal" href="Lesson3-spatial-join.html">Spatial join</a></li>
<li class="toctree-l1"><a class="reference internal" href="Exercise-3.html">Exercise 3</a></li>
</ul>
<p class="caption"><span class="caption-text">Lesson 4</span></p>
<ul>
<li class="toctree-l1"><a class="reference internal" href="Lesson4-overview.html">Lesson 4 Overview</a></li>
<li class="toctree-l1"><a class="reference internal" href="Lesson4-download-data.html">Download datasets</a></li>
<li class="toctree-l1"><a class="reference internal" href="Lesson4-geometric-operations.html">Geometric operations</a></li>
<li class="toctree-l1"><a class="reference internal" href="Lesson4-reclassify.html">Data reclassification</a></li>
<li class="toctree-l1"><a class="reference internal" href="Lesson4-nearest-neighbour.html">Nearest Neighbour Analysis</a></li>
<li class="toctree-l1"><a class="reference internal" href="Exercise-4.html">Exercise 4</a></li>
</ul>
<p class="caption"><span class="caption-text">Lesson 5</span></p>
<ul class="current">
<li class="toctree-l1"><a class="reference internal" href="Lesson5-overview.html">Lesson 5 Overview</a></li>
<li class="toctree-l1"><a class="reference internal" href="Lesson5-download-data.html">Download datasets</a></li>
<li class="toctree-l1"><a class="reference internal" href="Lesson5-static-maps.html">Static maps</a></li>
<li class="toctree-l1"><a class="reference internal" href="Lesson5-interactive-map-bokeh.html">Interactive maps with Bokeh</a></li>
<li class="toctree-l1 current"><a class="current reference internal" href="#">Sharing interactive plots on GitHub</a><ul>
<li class="toctree-l2"><a class="reference internal" href="#how-the-repository-should-be-organized">How the repository should be organized?</a></li>
<li class="toctree-l2"><a class="reference internal" href="#activating-github-pages">Activating GitHub Pages</a></li>
<li class="toctree-l2"><a class="reference internal" href="#accessing-github-pages">Accessing GitHub Pages</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="Lesson5-interactive-map-folium.html">Interactive maps on Leaflet</a></li>
<li class="toctree-l1"><a class="reference internal" href="Lesson5-World-3D.html">Inspiration: World 3D</a></li>
<li class="toctree-l1"><a class="reference internal" href="Exercise-5.html">Exercise 5</a></li>
</ul>
<p class="caption"><span class="caption-text">Lesson 6</span></p>
<ul>
<li class="toctree-l1"><a class="reference internal" href="Lesson6-overview.html">Lesson 6 Overview</a></li>
<li class="toctree-l1"><a class="reference internal" href="Lesson6-arcpy.html">Python in ArcGIS</a></li>
<li class="toctree-l1"><a class="reference internal" href="Lesson6-toolbox.html">ArcGIS Toolbox</a></li>
<li class="toctree-l1"><a class="reference internal" href="Lesson6-arcpy-script.html">Writing arcpy scripts</a></li>
<li class="toctree-l1"><a class="reference internal" href="Lesson6-run-the-tool.html">Running the Python script from ArcGIS</a></li>
</ul>
<p class="caption"><span class="caption-text">Lesson 7</span></p>
<ul>
<li class="toctree-l1"><a class="reference internal" href="Lesson7-overview.html">Lesson 7 Overview</a></li>
<li class="toctree-l1"><a class="reference internal" href="Lesson7-download.html">Download data</a></li>
<li class="toctree-l1"><a class="reference internal" href="Lesson7-read-raster.html">Reading raster files with GDAL</a></li>
<li class="toctree-l1"><a class="reference internal" href="Lesson7-read-raster-array.html">Reading raster as a numerical array</a></li>
<li class="toctree-l1"><a class="reference internal" href="Lesson7-gdal-utilities.html">GDAL command line tools</a></li>
<li class="toctree-l1"><a class="reference internal" href="Exercise-7.html">Exercise 7</a></li>
</ul>
<p class="caption"><span class="caption-text">Lesson 8</span></p>
<ul>
<li class="toctree-l1"><a class="reference internal" href="Lesson8-network-analysis.html">Network analysis in Python</a></li>
</ul>
<p class="caption"><span class="caption-text">Final Assignment</span></p>
<ul>
<li class="toctree-l1"><a class="reference internal" href="Final-assignment.html">Final assignment</a></li>
</ul>
<p class="caption"><span class="caption-text">Map Challenge 2016</span></p>
<ul>
<li class="toctree-l1"><a class="reference internal" href="map-challenge.html">Map Challenge 2016</a></li>
</ul>
</div>
</div>
</nav>
<section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">
<nav class="wy-nav-top" role="navigation" aria-label="top navigation">
<i data-toggle="wy-nav-top" class="fa fa-bars"></i>
<a href="index.html">GeoPython - AutoGIS</a>
</nav>
<div class="wy-nav-content">
<div class="rst-content">
<div role="navigation" aria-label="breadcrumbs navigation">
<ul class="wy-breadcrumbs">
<li><a href="index.html">Docs</a> »</li>
<li>Sharing interactive plots on GitHub</li>
<li class="wy-breadcrumbs-aside">
<a href="https://github.com/Automating-GIS-processes/2016/blob/master/source/Lesson5-share-on-github.rst" class="fa fa-github"> Edit on GitHub</a>
</li>
</ul>
<hr/>
</div>
<div role="main" class="document" itemscope="itemscope" itemtype="http://schema.org/Article">
<div itemprop="articleBody">
<div class="section" id="sharing-interactive-plots-on-github">
<h1>Sharing interactive plots on GitHub<a class="headerlink" href="#sharing-interactive-plots-on-github" title="Permalink to this headline">¶</a></h1>
<p>Interactive plots are really nice but of course it would be nice to be able to show them to your friend also, wouldn’t it?</p>
<p>Luckily, there is a really easy way of doing this using GitHub and their specific feature called <a class="reference external" href="https://pages.github.com/">GitHub Pages</a> which you can easily combine into your
GitHub repositories.</p>
<p>Here is a short video demonstrating what all you can do with GitHub pages:</p>
<iframe width="560" height="315" src="https://www.youtube.com/embed/2MsN8gpT6jY" frameborder="0" allowfullscreen></iframe><div class="line-block">
<div class="line"><br /></div>
</div>
<div class="section" id="how-the-repository-should-be-organized">
<h2>How the repository should be organized?<a class="headerlink" href="#how-the-repository-should-be-organized" title="Permalink to this headline">¶</a></h2>
<p>For the purpose of sharing our maps on GitHub, we will use the Exercise 5 repository where we will upload our maps. Thus, let’s already now start with our <strong>Exercise 5</strong> by
<a class="reference external" href="https://classroom.github.com/assignment-invitations/89827a0c6532a4910690c43c821445da">accepting the GitHub classroom assignment</a>.</p>
<p>In the following examples I have accepted the Exercise 5 and what you will see are based on my personal Exercise-5 repository. You will see yours in a similar manner but under your
GitHub account.</p>
<p>When you want to publish something on GitHub Pages, it is generally a good idea to store your html files (such as the ones we made earlier) under a single folder called <code class="docutils literal"><span class="pre">docs</span></code>
which should be located on the root of your repository. In the Exercise 5 I have created such a folder for you, thus my Exercise 5 repository looks like following where I have
the folder <code class="docutils literal"><span class="pre">docs</span></code>:</p>
<a class="reference internal image-reference" href="_images/Github-pages-repo-root.PNG"><img alt="_images/Github-pages-repo-root.PNG" src="_images/Github-pages-repo-root.PNG" style="width: 750.0px; height: 320.5px;" /></a>
<div class="line-block">
<div class="line"><br /></div>
</div>
<p>Thus, <strong>all your html maps and plots should be stored there!</strong> Why? Because we can set up GitHub to search our html files from there by default and storing those files under a separate folder
keeps things nicely organized.</p>
<p>What is currently located there are following files:</p>
<a class="reference internal image-reference" href="_images/docs-contents.PNG"><img alt="_images/docs-contents.PNG" src="_images/docs-contents.PNG" style="width: 750.0px; height: 179.0px;" /></a>
<div class="line-block">
<div class="line"><br /></div>
</div>
<p>Thus, there is already a single map that I have made called <em>test_map.html</em>, a html file called <em>index.html</em> and the most important file for us called <code class="docutils literal"><span class="pre">index.md</span></code>.</p>
<p>Let’s see how does the <code class="docutils literal"><span class="pre">index.md</span></code> file look like (here is a <a class="reference external" href="https://github.com/Automating-GIS-processes/Exercise-5/blob/master/docs/index.md">link</a> to the actual page on our public repository):</p>
<a class="reference internal image-reference" href="_images/index-md.PNG"><img alt="_images/index-md.PNG" src="_images/index-md.PNG" style="width: 750.0px; height: 354.0px;" /></a>
<div class="line-block">
<div class="line"><br /></div>
</div>
<p>Okey, so we can see that this is a familiar looking page with some Markdown text and links. What is the purpose of this page is to serve as an <strong>entrance page</strong> for you interactive plots.
Thus as the page say, you should add links to your personal Exercise 5 page such as mine which is located at <code class="docutils literal"><span class="pre">http://automating-gis-processes.github.io/exercise-5-HTenkanen</span></code>.</p>
<p><strong>Okey but how does that work, how do I get a page with such an address?</strong></p>
<p>The magic here is something where <strong>GitHub Pages</strong> comes into a picture. That address is going to be created when I
<strong>activate the GitHub Pages</strong> for my Exercise 5 repository.</p>
<p>Let’s see how that can be done. Luckily <strong>it’s easy</strong>.</p>
</div>
<div class="section" id="activating-github-pages">
<h2>Activating GitHub Pages<a class="headerlink" href="#activating-github-pages" title="Permalink to this headline">¶</a></h2>
<p>First, you should navigate into the <strong>Settings</strong> of your Exercise 5 repository by clicking following tab on the right side of the upper panel:</p>
<a class="reference internal image-reference" href="_images/github-settings.PNG"><img alt="_images/github-settings.PNG" src="_images/github-settings.PNG" style="width: 750.0px; height: 58.5px;" /></a>
<div class="line-block">
<div class="line"><br /></div>
</div>
<p>In there you can adjust different Setting regarding your repository but what we are interested in is a section called <strong>GitHub Pages</strong> which can be found when you scroll down a little bit.
It looks like following:</p>
<a class="reference internal image-reference" href="_images/Github-pages-settings.PNG"><img alt="_images/Github-pages-settings.PNG" src="_images/Github-pages-settings.PNG" style="width: 750.0px; height: 325.5px;" /></a>
<div class="line-block">
<div class="line"><br /></div>
</div>
<p>From there you should choose the <strong>source for your pages</strong>, i.e. the place where those html files are searched from. You should choose the <code class="docutils literal"><span class="pre">master</span> <span class="pre">branch</span> <span class="pre">/docs</span> <span class="pre">folder</span></code> which is the location
that we just visited earlier and where we should store our html files:</p>
<a class="reference internal image-reference" href="_images/github-pages-docs-folder.PNG"><img alt="_images/github-pages-docs-folder.PNG" src="_images/github-pages-docs-folder.PNG" style="width: 750.0px; height: 262.5px;" /></a>
<div class="line-block">
<div class="line"><br /></div>
</div>
<p>Finally, you should press the <strong>Save</strong> button and after that GitHub Pages are activated for you!</p>
<a class="reference internal image-reference" href="_images/Github-pages-activated.PNG"><img alt="_images/Github-pages-activated.PNG" src="_images/Github-pages-activated.PNG" style="width: 750.0px; height: 155.0px;" /></a>
<div class="line-block">
<div class="line"><br /></div>
</div>
</div>
<div class="section" id="accessing-github-pages">
<h2>Accessing GitHub Pages<a class="headerlink" href="#accessing-github-pages" title="Permalink to this headline">¶</a></h2>
<p>Now if I press the link that is shown above I will arrive into a following page:</p>
<a class="reference internal image-reference" href="_images/index_HTML.PNG"><img alt="_images/index_HTML.PNG" src="_images/index_HTML.PNG" style="width: 750.0px; height: 524.5px;" /></a>
<div class="line-block">
<div class="line"><br /></div>
</div>
<p>This page is showing the contents of the <code class="docutils literal"><span class="pre">index.html</span></code> file that was also located in our <code class="docutils literal"><span class="pre">docs</span></code> folder.</p>
<p>We can now <strong>navigate to whatever file that is located under that folder.</strong> Thus, we can for example access the test_map.html by typing:
<a class="reference external" href="https://automating-gis-processes.github.io/exercise-5-HTenkanen/test_map.html">https://automating-gis-processes.github.io/exercise-5-HTenkanen/test_map.html</a></p>
<p><strong>Ahaa!</strong> So this means that if you upload e.g. an interactive map that you have prepared into that folder you are able to access it also from anywhere. And also share it with your
friends! You just need to change the name of the html file according the filename that you have uploaded. So this is how we can easily share interactive maps on GitHub for anyone.</p>
<div class="admonition note">
<p class="first admonition-title">Note</p>
<p class="last">Notice that even though your personal Exercise 5 repository in GitHub is private and no-one else can access it, <strong>all the files that you store under the docs folder CAN BE ACCESSED by anyone</strong>.
So keep this in mind when using GitHub Pages.</p>
</div>
<div class="admonition hint">
<p class="first admonition-title">Hint</p>
<p class="last">Notice that now you can also do your personal GitHub Pages where you can store and share all sorts of cool stuff that you have created yourself! You just need to
<a class="reference external" href="https://help.github.com/articles/create-a-repo/">create your own repository</a> and follow exactly the same steps that were mentioned here.</p>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="rst-footer-buttons" role="navigation" aria-label="footer navigation">
<a href="Lesson5-interactive-map-folium.html" class="btn btn-neutral float-right" title="Interactive maps on Leaflet" accesskey="n">Next <span class="fa fa-arrow-circle-right"></span></a>
<a href="Lesson5-interactive-map-bokeh.html" class="btn btn-neutral" title="Interactive maps with Bokeh" accesskey="p"><span class="fa fa-arrow-circle-left"></span> Previous</a>
</div>
<hr/>
<div role="contentinfo">
<p>
© Copyright 2016, Henrikki Tenkanen.
Last updated on Feb 20, 2017.
</p>
</div>
Built with <a href="http://sphinx-doc.org/">Sphinx</a> using a <a href="https://github.com/snide/sphinx_rtd_theme">theme</a> provided by <a href="https://readthedocs.org">Read the Docs</a>.
</footer>
</div>
</div>
</section>
</div>
<script type="text/javascript">
var DOCUMENTATION_OPTIONS = {
URL_ROOT:'./',
VERSION:'1',
COLLAPSE_INDEX:false,
FILE_SUFFIX:'.html',
HAS_SOURCE: true
};
</script>
<script type="text/javascript" src="_static/jquery.js"></script>
<script type="text/javascript" src="_static/underscore.js"></script>
<script type="text/javascript" src="_static/doctools.js"></script>
<script type="text/javascript" src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/javascript" src="_static/js/theme.js"></script>
<script type="text/javascript">
jQuery(function () {
SphinxRtdTheme.StickyNav.enable();
});
</script>
<li><a href="http://project.invalid/">Project Homepage</a> »</li>
<div class="footer">
<img src="../img/GPLv3_Logo.svg">
</div>
</body>
</html>