-
Notifications
You must be signed in to change notification settings - Fork 0
/
strava.html
92 lines (80 loc) · 4.11 KB
/
strava.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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<!-- MarkerCluster CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.1.0/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.1.0/dist/MarkerCluster.Default.css" />
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<!-- MarkerCluster JS -->
<script src="https://unpkg.com/leaflet.markercluster@1.1.0/dist/leaflet.markercluster.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="public/images/mountain.png">
<link rel="stylesheet" type="text/css" href="styles/site.css">
<link href="https://fonts.googleapis.com/css2?family=Reddit+Mono&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Averia+Serif+Libre&display=swap" rel="stylesheet">
<title>Madeline Demers</title>
</head>
<body>
<header>
<div class="work-in-progress-banner">
<p><strong>Please note:</strong> This site is under construction!</p>
</div>
<nav>
<h1>MADELINE DEMERS</h1>
<ul class="navigation">
<li><a href="index.html#works" class="nav-link">Work</a></li>
<li><a href="about.html" class="nav-link">About</a></li>
</ul>
</nav>
</header>
<main>
<section class="about-text about">
<h2>Interactive Activity Map</h2>
<h4>Personal Project</h4>
<p id="map-id">Click on a marker to zoom in and view information about the activity.
Refresh the page to reset the <a href="strava.html#map-id">map</a>.
</p>
<!-- <a href="strava.html#map-id">Center the map for the optimal user experience</a>. -->
</section>
<section class="map">
<div id="map"></div>
</section>
<section class="about-text about">
<p>Thanks to the generous support of <a href="https://developers.strava.com/">Strava's API</a>, I was able to compile my
extensive personal activity upload history on the platform, totaling over 1,000 activities.
Leveraging integrations with <a href="https://leafletjs.com/">Leaflet</a> and <a href="https://www.openstreetmap.org/#map=4/38.01/-95.84">OpenStreetMap</a>, I have constructed a visualization
showcasing all the locations worldwide where I have logged a Strava activity*. This project epitomizes
my enthusiasm for both movement and travel. I eagerly anticipate updating the map with my ventures to
new destinations in 2025! Please visit my <a href="https://github.com/maddydemers">GitHub</a> to see the code I developed to build this map.</p>
<p><b>Looking for more?</b> Check out this site that I made for my brother to celebrate his training for the 2024 Boston Marathon.<a href="begin.html" target="_blank"> Linked here</a>.</p>
</section>
<section class="ps about">
<p>*For privacy reasons, I decided against real-time updates during the initial design process.</p>
</section>
<script src=public/scripts/map.js></script>
</main>
<footer>
<div class="footer-name">
<p><a href=index.html>Madeline Demers</a></p>
</div>
<div class="footer-links">
<p><a href="https://www.linkedin.com/in/madeline-demers">LinkedIn</a> / <a href="mailto:mkd79@cornell.edu">Email</a> / <a href="https://github.com/maddydemers">GitHub</a></p>
</div>
</footer>
</body>
</html>