-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
234 lines (206 loc) · 11.4 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
<!doctype html>
<html>
<head>
<title>Mariana Danielová</title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="Mariana Danielová, Mariana Danielova, cartographer, mariana danielova, cartography">
<!-- <link rel="stylesheet" type="text/css" href="portfolio.css" media="screen,projection" /> -->
<link rel="stylesheet" type="text/css" href="style.css" media="screen,projection" />
<!--Bootstrap links-->
<link href="//netdna.bootstrapcdn.com/bootswatch/3.1.1/yeti/bootstrap.min.css" rel="stylesheet">
<!-- favicon - it is displayed in tab, in browser -->
<link rel="icon" type="image/png" href="images/favicon.png" />
<!-- favicon - it is displayed in tab, in browser -->
<link rel="icon" type="image/png" href="images/favicon.png" />
<!-- Mapbox links -->
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.34.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.0.1/mapbox.css' rel='stylesheet' />
</head>
<body>
<!--navigation bar-->
<nav class="navbar navbar-inverse" id="navbar" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">MariDani</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id="navigation">
<li><a href="#projects">Projects</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<!-- Main body -->
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="row">
<!-- Map -->
<div class="col-sm-12 col-md-9">
<div id='map' class='map'></div>
</div>
<!-- Header -->
<div class="page-header col-sm-12 col-md-3" >
<h1>Mariana Danielová</h1>
<p class="lead">CARTOGRAPHER</p>
<blockquote>
<p>Cartography is the discipline dealing with the art, science and technology of making and using maps.</p>
<small><a href="http://www.icaci.org">www.icaci.org</a></small>
</blockquote>
</div>
</div>
</div>
<!-- Projects -->
<div class="col-sm-12 col-md-12" id="projects">
<h3>Projects:</h3>
<div class="row">
<div class="col-sm-1 col-md-1 col-sm-offset-11 col-md-offset-11">
<a href="#navbar">up</a>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-3">
<a href="design_contest.html"><img src="files/vallonais_prew.JPG" alt="Design Contest" class="img-circle img-responsive img-centre"></a>
<h4 class="text-centre">Design Contest</h4>
<p>First place in Gravity Design Contest 2017 - contest of snowboard design</p>
<p>QGIS + Inkscape + Gimp + OSM data</p>
</div>
<div class="col-sm-4 col-md-3 col-md-offset-1">
<a href="diana_temple.html"><img src="files/excavation_prew.PNG" alt="Visual Reconstruction" class="img-circle img-responsive img-centre"></a>
<h4 class="text-centre">Visual Reconstruction</h4>
<p>3D Reconstruction and Uncertainty Modelling using Fuzzy Logic of Archeological Structures <i>(M.Sc. thesis)</i></p>
<p>ArcGIS + City Engine + SketchUp</p>
</div>
<div class="col-sm-4 col-md-3 col-md-offset-1">
<a href="gps_sport.html"><img src="files/kite_prew.jpg" alt="GPS sport tracking" class="img-circle img-responsive img-centre"></a>
<h4 class="text-centre">GPS sport tracking</h4>
<p>Tracking of sport activities, editing and visualizing data from GPS logger</p>
<p>GPS data + QGIS + GoogleEarth</p>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-3">
<a href="https://play.google.com/store/apps/details?id=com.marialice.mapapp"><img src="files/CB_application.png" alt="..." class="img-circle img-responsive img-centre"></a>
<h4 class="text-centre">Android Map App</h4>
<p>Android Development, group project with Alice Rühl</p>
<p>Eclipse + Java + Mapbbox API</p>
</div>
<div class="col-sm-4 col-md-3 col-md-offset-1">
<a href="radar.html"><img src="files/sudd_prew.JPG" alt="..." class="img-circle img-responsive img-centre"></a>
<h4 class="text-centre">Radar data Analysis</h4>
<p>Extraction of the map of the Sudd wetlands, central Africa</p>
<p>ArcGIS + Inkscape</p>
</div>
<div class="col-sm-4 col-md-3 col-md-offset-1">
<a href="https://github.com/AliceR/InteractiveWalkVienna"><img src="files/toomuchhistory_prew.JPG" alt="D3 project" class="img-circle img-responsive img-centre"></a>
<h4 class="text-centre">D3 project</h4>
<p>Playing with D3, creation of map, group project with Alice Rühl</p>
<p>JavaScript + D3 + OSM data</p>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-3">
<a href="files/vienna.svg"><img src="files/svg.JPG" alt="..." class="img-circle img-responsive img-centre"></a>
<h4 class="text-centre">Multimedia project</h4>
<p>Beginnings with D3 and SVG</p>
<p>HTML + SVG + Inkscape</p>
</div>
<div class="col-sm-4 col-md-3 col-md-offset-1">
<a href="gps_vienna.html"><img src="files/Hour_small.png" alt="..." class="img-circle img-responsive img-centre"></a>
<h4 class="text-centre">GPS tracking</h4>
<p>Visualization of GPS tracking of students movement in Vienna</p>
<p>GPS data + ArcMap + Adobe InDesign</p>
</div>
<div class="col-sm-4 col-md-3 col-md-offset-1">
<a href="http://maridani.github.io/WebmappingPage/Index.html"><img src="files/webmap_prew.JPG" alt="..." class="img-circle img-responsive img-centre"></a>
<h4 class="text-centre">Web Mapping</h4>
<p>My first webpage</p>
<p>HTML + CSS + Google API + OSM</p>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-3">
<a href="use-it.html"><img src="files/useit_prew.jpg" alt="Printed Maps Designer" class="img-circle img-responsive img-centre"></a>
<h4 class="text-centre">Printed Maps Designer</h4>
<p>Creation and design of paper maps for USE-IT Europe project</p>
<p>ArcGIS + QGIS + OSM data</p>
</div>
<div class="col-sm-4 col-md-3 col-md-offset-1">
<img src="files/mapdesign_prew.JPG" alt="..." class="img-circle img-responsive img-centre">
<h4 class="text-centre">Presentations</h4>
<p><a href="http://prezi.com/vov5jlpuyede/?utm_campaign=share&utm_medium=copy&rc=ex0share">Map design for web mapping</a> (Prezi)</p>
<p><a href="http://prezi.com/1wwjpvtwol25/?utm_campaign=share&utm_medium=copy&rc=ex0share">Increasing effectiveness of animated maps</a> (Prezi)</p>
</div>
<div class="col-sm-4 col-md-3 col-md-offset-1">
<a href="carto_gifts.html"><img src="files/carto_gift2_prew.jpg" alt="Carto Gifts" class="img-circle img-responsive img-centre"></a>
<h4 class="text-centre">Carto Gifts</h4>
<p>DIY</p>
<p>Scissors + Glue</p>
</div>
</div>
<br>
</div>
<br>
<!-- Contact -->
<div class="col-sm-12 col-md-12" id="contact">
<h3>Contact:</h3>
<div class="row">
<div class="col-sm-1 col-md-1 col-sm-offset-11 col-md-offset-11">
<a href="#navbar">up</a>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-11">
<ul>
<li><a href="http://cz.linkedin.com/in/marianadanielova">LinkedIn</a></li>
<li><a href="https://github.com/MariDani">GitHub</a></li>
</ul>
</div>
</div>
</div>
</div> <!-- /.row -->
</div><!-- /.container -->
<br>
<nav class="navbar navbar-inverse navbar-bottom" role="navigation" id="footer">
<div class="container-fluid">
<p class="navbar-text navbar-right">© Mariana Danielová, 2017</p>
</div><!--/.container-fluid-->
</nav>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!-- Map -->
<script>
// Add your access token
L.mapbox.accessToken = 'pk.eyJ1IjoibWFyaWRhbmkiLCJhIjoiSGF2TGdwZyJ9.B0N8ybRGG38wmRK_VfxPoA';
// Create the map
var map = L.mapbox.map('map').setView([50.0755, 14.4378], 5);
// Add the style to your map as image tiles
L.mapbox.styleLayer('mapbox://styles/maridani/cj0tkz7q000gl2rtaw5jxzvbr').addTo(map);
var myLayer = L.mapbox.featureLayer()
.loadURL('files/map_points.geojson')
.addTo(map);
// Set a custom icon on each marker based on feature properties.
myLayer.on('layeradd', function(e) {
var marker = e.layer,
feature = marker.feature;
marker.setIcon(L.icon(feature.properties.icon));
var content = '<p>' + feature.properties.title + '</p><h1>' + feature.properties.description + '</h1>';
marker.bindPopup(content);
});
map.scrollWheelZoom.disable();
</script>
</body>
</html>