-
Notifications
You must be signed in to change notification settings - Fork 0
/
if_presentation.html
107 lines (105 loc) · 4.93 KB
/
if_presentation.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Maptime Utrecht!</title>
<link rel="stylesheet" href="presentatie_maptime/css/reveal.css">
<link rel="stylesheet" href="presentatie_maptime/css/maptime.css">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="presentatie_maptime/lib/css/zenburn.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h1>Interactive Fantasy Maps!</h1>
<p>a small overview of things I found on the web</p>
<p>by NieneB</p>
<p><a href="https://maptime030.github.io/Fantasy-map-workshop/if_presentation.html#/2">maptime030.github.io/Fantasy-map-workshop/if_presentation.html</a></p>
</section>
<section>
<img src="https://github.com/Maptime030/Fantasy-map-workshop/blob/master/presentatie_maptime/img/levels.png?raw=true" height="400px">
</section>
<section>
<h1>A map on the web</h1>
<p><a href="http://ff1maps.com/">map #1. Final Fantasy 1</a></p>
<p><a href="http://www.fantasy-cartography.com/">map #2. Fantasy Cartography by Robin C. Kuprella</a></p>
<p>image</p>
<p>html, css, js interactivity</p>
</section>
<section>
<h1>a Web Map</h1>
<p>Raster tiled map with panning and zooming</p>
<img src="https://raw.githubusercontent.com/Maptime030/Fantasy-map-workshop/master/presentatie_maptime/img/TilePyramid.jpg" height="400px" />
<p><a href="https://www.rijksmuseum.nl/nl/zoeken/objecten?q=kaart&p=2&ps=12&st=OBJECTS&ii=4#/RP-P-OB-78.784-88,16">map #3. Rijksmuseum </a></p>
</section>
<section>
<h1>a Web Map plus vector data</h1>
<p>click-able points, markers, pop-ups</p>
<p><a href="https://www.efteling.com/en/park/map">map #4. Efteling</a></p>
<p><a href="http://lotrproject.com/map/#zoom=3&lat=-1315.5&lon=1500&layers=BTTTTT">map #5. LoTR</a></p>
</section>
<section>
<p>uhm? ...</p>
<p><a href="https://quartermaester.info/">map #6. GoT</a></p>
<p><a href="http://viewers-guide.hbo.com/game-of-thrones/season-2/episode-1/map/location/1/ashemark">map #7. GoT viewers-guide</a></p>
</section>
<section>
<h1>Fantasy Coordinates!</h1>
<p>Distance</p>
<p>Leaflet raster coords</p>
<p><a href="https://loremaps.azurewebsites.net/Maps/Faerun">map #8. Faerun</a></p>
<p><a href="http://leafletjs.com/examples/crs-simple/crs-simple.html">map #9. Leaflet CRS Simple</a></p>
</section>
<section>
<h1>Hard level: Fantasy GeoData</h1>
<p>data driven styling</p>
<p><a href="http://www.swgalaxymap.com/">map #10. Star Wars Galaxy map</a></p>
<p><a href="http://opengeofiction.net/ ">map #11. Open Geo fiction</a></p>
</section>
<section>
<h1>Super hard level: Programming random maps! </h1>
<p><a href="https://bl.ocks.org/Azgaar/b845ce22ea68090d43a4ecfb914f51bd">map #12. D3 random map generator </a></p>
<p><a href="https://twitter.com/unchartedatlas">map #13. Twitter bots @unchartedatlas</a></p>
<p><a href="https://twitter.com/emojiatlas">map #14. Twitter bots @emojiatlas</a></p>
</section>
<section>
<h2>Workshop: Medium</h2>
<p>1. Scan image (or get image online)</p>
<p>2. Make tiles from image (or ask someone to)</p>
<p>3. Put in Leaflet example</p>
<h1><a href="https://github.com/Maptime030/Fantasy-map-workshop/tree/master/workshop-medium-leaflet">github.com/Maptime030/Fantasy-map-workshop/workshop-medium-leaflet</a></h1>
</section>
<section>
<h2>Workshop: Hard</h2>
<p>Get the coordinates right!</p>
<p>Add click event showing the right coordinates.</p>
<p>Add distance measuring tool</p>
<h1><a href="https://github.com/Maptime030/Fantasy-map-workshop/tree/master/workshop-hard-rastercoord">github.com/Maptime030/Fantasy-map-workshop/workshop-hard-rastercoord</a></h1>
</section>
<section>
<h2>Worshop: Super hard</h2>
<p>D3 random maps </p>
<p>On own risk</p>
<h1><a href="https://github.com/Maptime030/Fantasy-map-workshop/tree/master/workshop-super-hard-d3">github.com/Maptime030/Fantasy-map-workshop/workshop-super-hard-d3</a></h1>
</section>
</div>
</div>
<script src="presentatie_maptime/lib/js/head.min.js"></script>
<script src="presentatie_maptime/js/reveal.js"></script>
<script>
// More info https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
history: true,
// More info https://github.com/hakimel/reveal.js#dependencies
dependencies: [
{ src: 'presentatie_maptime/plugin/markdown/marked.js' },
{ src: 'presentatie_maptime/plugin/markdown/markdown.js' },
{ src: 'presentatie_maptime/plugin/notes/notes.js', async: true },
{ src: 'presentatie_maptime/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
]
});
</script>
</body>
</html>