forked from tibbben/geospatial-visualization
-
Notifications
You must be signed in to change notification settings - Fork 0
/
slides080.html
153 lines (137 loc) · 7.51 KB
/
slides080.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
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="../common/css/reveal.css">
<link rel="stylesheet" href="../common/css/white.css">
<link rel="stylesheet" href="../common/css/overrides.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="../common/java/print.js"></script>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<title>Geospatial Visualization - 8</title>
<meta charset="UTF-8">
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-background-color="#000">
<div style="max-width: 90%; margin: 0px auto;">
<div id="mapid" style="height: 600px; width: 400px; float: left;"></div>
<script>
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Open Street Map',
maxZoom: 18
}).addTo(mymap);
</script>
<div style="height: 600px; width: 400px; float: left; margin-left: 100px">
<div style="position: relative; left: 0px; top: 40px; font-size: 150%; line-height: 100%; color: #999 !important; text-align: left;z-index: 20;"><strong>Geospatial<br> Visualization</strong></div>
<div style="position: relative; left: 0px; top: 80px; font-size: 90%; color: #999 !important;text-align: right;z-index: 20;">School of Architecture<br><span style="font-size: 80%;"><script>var today = new Date();document.write(today.toISOString().slice(0,10));</script></span></div>
<div style="position: relative; left: 0px; top: 140px; font-size: 50%; text-align: left; color: #999 !important; line-height: 145%;z-index: 20;">Dr. Timothy Norris : <a href="mailto:tnorris@miami.edu" style="color: #999 !important; text-decoration: underline;z-index: 20;">tnorris@miami.edu</a><br>Christopher Mader : <a href="mailto:cmader@med.miami.edu" style="color: #999 !important; text-decoration: underline;">cmader@med.miami.edu</a></div>
<div style="position: absolute; left: 0px; top: 550px; font-size: 40%; text-align: right; color: #555; width: 280px;z-index: 20;"></div>
</div>
</div>
</section>
<section data-transition="fade">
<div class="template-title">UM GIS Day 2022</div>
<div>
<a href="https://sp.library.miami.edu/subjects/gis#tab-1">GIS Day - November 16th 2022</a><br>
<a href="https://geography.as.miami.edu/events/gisday/workshops/index.html">Map Submissions</a> - due November 4th<hr>
<p>Dr. Sheila Lakshmi Steinberg</p>
<p>Professor fo GIS, Social, and Environmental Sciences<br>University of Massachusetts Global<br>Faculty President</p>
</div>
<div class="template-citation" style="margin-top: 42px !important;"></div>
</section>
<section>
<section data-transition="fade">
<div class="template-title">Online Mapping</div>
<div>
<ul style="font-size: 80%; margin: 23px 0px 0px 0px;">
<li style="margin: 23px 0px 0px 0px;">Story Maps
<ul style="font-size: 80%;">
<li>ESRI Storymaps - <a hef="https://www.arcgis.com/apps/Cascade/index.html?appid=6984ffb035ed40b8b11e23f41236aac2" target="_blank">New York Taxicab Terrain</a></li>
<li>Knightlabs - <a href="https://storymap.knightlab.com/examples/aryas-journey/" target="_blank">Game of Thrones</a></li>
</ul>
</li>
<li style="margin: 23px 0px 0px 0px;">Mashups
<ul style="font-size: 80%;">
<li>MapBox - <a href="https://www.latimes.com/wildfires-map/" target="_blank">LA Times California Fires</a></li>
<li>Leaflet - <a href="https://cdhuayhuash.org/mapas" target="_blank">Cordillera Huayhuash</a></li>
</ul>
</li>
<li style="margin: 23px 0px 0px 0px;">Web Applications
<ul style="font-size: 80%;">
<li>ESRI - <a href="http://scholar.library.miami.edu/hometownmaps/" target="_blank">Hometown Maps</a></li>
<li>Leaflet - <a herf="https://map.idsc.miami.edu/disclaimer" target="_blank">MAP</a></li>
</ul>
</li>
</ul>
</div>
<div class="template-citation" style="margin-top: 42px !important;"></div>
</section>
<section data-transition="fade">
<div class="template-title">Basemaps for Online Mapping</div>
<div>
<ul style="font-size: 80%; margin: 23px 0px 0px 0px;">
<li style="margin: 23px 0px 0px 0px;"><a href="https://www.mapbox.com/gallery/" target="_blank">Mapbox Gallery</a></li>
<li style="margin: 23px 0px 0px 0px;"><a href="https://wiki.openstreetmap.org/wiki/Tile_servers" target="_blank">Open Street Map Gallery</a></li>
</ul>
</div>
<div class="template-citation" style="margin-top: 42px !important;"></div>
</section>
<section data-transition="fade">
<div class="template-title">Exercises</div>
<div>
<ul style="font-size: 80%; margin: 23px 0px 0px 0px;">
<li style="margin: 23px 0px 0px 0px;"><a href="https://storymaps.arcgis.com/stories/cea22a609a1d4cccb8d54c650b595bc4" target="_blank">Create an ESRI Storymap</a></li>
<li style="margin: 23px 0px 0px 0px;"><a href="https://leafletjs.com/examples/quick-start/" target="_blank">Create a Leaflet Map</a></li>
</ul>
</div>
<div class="template-citation" style="margin-top: 42px !important;"></div>
</section>
</section>
</div>
</div>
<script src="../common/java/reveal.js"></script>
<!-- <script src="../common/java/notes.js"></script> -->
<script src="../common/java/head.min.js"></script>
<script>
Reveal.initialize({
width: 1280, height: 720, margin: 0.05,
controls: true,
progress: true,
history: true,
center: true,
mouseWheel: true,
chart: {
defaults: {
global: {
defaultFontSize: 20,
title: { fontColor: "#333" },
legend: {
position: "top",
labels: { fontColor: "#333" },
},
tooltips: {
labels: { fontColor: "#333" },
},
},
scale: {
scaleLabel: { fontColor: "#333" },
gridLines: { color: "#333", zeroLineColor: "#333" },
ticks: { fontColor: "#333" },
}
},
},
dependencies: [
{ src: '../common/java/Chart.min.js' },
{ src: '../common/java/csv2chart.js' }
]
});
Reveal.on( 'slidechanged', event => { mymap.invalidateSize(); console.log('here'); });
</script>
</body>
</html>