-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
140 lines (127 loc) · 6.79 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
<html lang="en" class="no-js html-blank">
<head>
<meta charset="utf-8">
<title>See Your Observations | Zoziologie</title>
<meta name="description" content="My personal website for bird related stuff.">
<meta property="og:type" content="website">
<meta property="og:locale" content="en_GB">
<meta property="og:site_name" content="Zoziologie">
<meta property="og:title" content="See Your Observations">
<meta property="og:url" content="http://localhost:4000/">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-1YGJHDR2PZ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-1YGJHDR2PZ');
</script>
<script src="https://kit.fontawesome.com/f15ed359e8.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.min.css"
integrity="sha512-1xoFisiGdy9nvho8EgXuXvnpR5GAMSjFwp40gSRE3NwdUdIMIKuPa7bqoUhLD0O/5tPNhteAsE5XyyMi5reQVA=="
crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js" type="text/javascript">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"
type="text/css">
<script src="https://cdn.jsdelivr.net/npm/leaflet-makimarkers@3.1.0/Leaflet.MakiMarkers.min.js"
type="text/javascript"></script>
<script src="https://unpkg.com/@mapbox/leaflet-pip@latest/leaflet-pip.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js"
type="text/javascript"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.css"
type="text/css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css"
type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.Spin/1.1.0/leaflet.spin.min.js" type="text/javascript">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-providers/1.10.2/leaflet-providers.min.js"
type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.6.3/papaparse.min.js" type="text/javascript">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.2/spin.min.js"></script>
<script src="./script.js" type="text/javascript"></script>
<link href="./style.css" type="text/css" rel="stylesheet">
<script src="/token.js" type="text/javascript"></script>
</head>
<body class="layout--blank modal-open">
<div class="initial-content">
<div class="box">
<div class="content" id="map1"></div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-xs" id="col-top-line"><span id="stattitle"><span
id="stattitle-name">WORLD</span></span></div>
</div>
<div class="row">
<div class="col-sm count"><a id="count-sp" href="#" data-html="true" data-toggle="popover"
data-placement="top" data-content="Content" data-trigger="focus"
title="List of species"><img class="icon-bottom"
src="./assets/bird-albatross-flying-shape-2.png"><span
id="spCount">-</span><br>Species observed</a></div>
<div class="col-sm count"> <a id="count-ch" href="#" data-html="true" data-toggle="popover"
data-placement="top" data-content="Content" data-trigger="focus"
title="List of checklists"><img class="icon-bottom" src="./assets/list.png"><span
id="chCount">-</span><br>Checklists</a></div>
<div class="col-sm count"><img class="icon-bottom"
src="./assets/binoculars-silhouette.png"><span id="obsCount">-</span><br>Observations
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="ModalUpload" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-hidden="true">
<div class="modal-lg modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">See your eBird observations on a map!</h2>
<!--<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>-->
</div>
<div class="modal-body">
<h3>How does it work?</h3>
<p>This web app is designed to let you explore all your counts of checklists, species and
observations on a map. This is computed based on the eBird export file.</p>
<p>My favorite thing with this app is that you can draw any polygon or rectangle (icon on the
left
side of the screen) on the map and your counts for that zone appears on the bottom of the
page!</p>
<p>Note that sub-species, slashs, etc are counted as different species for the moment...</p>
<div class="row">
<div class="col-6">
<h4>1. Download your data from eBird</h4>
<a role="button" class="btn btn-secondary mt-3 d-block mx-auto" href="https://ebird.org/downloadMyData"
target="_blank" id="dnwlo-btn">ebird.org/downloadMyData</a>
</div>
<div class="col-6">
<h4>2. Upload your eBird File</h4>
<p>Import your <code>MyEBirdData.csv</code> using the upload file below. Note that the
file is
never sent to our server, only used in your browser.</p>
<div class="mb-3">
<input class="form-control" type="file" id="uploadMyEBirdData" accept=".csv">
</div>
<div class="progress mt-4" id="MyPg" style="display:none;">
<div id="MyPgBar" class="progress-bar progress-bar-striped progress-bar-animated"
role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>