forked from tyrasd/latest-changes
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
137 lines (127 loc) · 6.82 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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Latest Changes - Check local OSM changes</title>
<!-- Search Engine -->
<meta name="description" content="Get a quick overview of the latest changes in OpenStreetMap in a certain area">
<meta name="image" content="https://rene78.github.io/latest-changes/img/SocialMedia-Latest-Changes.png">
<meta name="keywords" content="OpenStreetMap, OSM, quality, checker, local, changesets, vandalism" />
<!-- Schema.org for Google -->
<meta itemprop="name" content="Latest Changes">
<meta itemprop="description" content="Check latest changes in OpenStreetMap in a certain area">
<meta itemprop="image" content="https://rene78.github.io/latest-changes/img/SocialMedia-Latest-Changes.png">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<!-- Open Graph general (Facebook, Twitter, ...) -->
<meta property="og:title" content="Latest Changes">
<meta property="og:description" content="Check latest changes in OpenStreetMap in a certain area">
<meta property="og:image" content="https://rene78.github.io/latest-changes/img/SocialMedia-Latest-Changes.png">
<meta property="og:logo" content="https://rene78.github.io/latest-changes/img/android-chrome-512x512.png">
<meta property="og:url" content="https://tyrasd.github.io/latest-changes/">
<meta property="og:site_name" content="Latest Changes">
<meta property="og:type" content="website">
<!-- Favicon related -->
<link rel="apple-touch-icon" sizes="180x180" href="./img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./img/favicon-16x16.png">
<link rel="manifest" href="./img/site.webmanifest">
<link rel="mask-icon" href="./img/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="./img/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="./img/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<!-- Style related -->
<link rel='stylesheet' type='text/css' href='css/site.css' />
<!-- <link rel="stylesheet" href="//unpkg.com/[email protected]/dist/leaflet.css"> -->
<link rel="stylesheet" href="./css/leaflet.css">
<link rel="stylesheet" href="//unpkg.com/leaflet-gesture-handling/dist/leaflet-gesture-handling.min.css"
type="text/css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/L.Control.Locate.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet-contextmenu/1.4.0/leaflet.contextmenu.css"
integrity="sha512-sgMNQqQqKbwIukMPRGv16lpaZLXNnWdtgLtzUwrorvhoLyC4QnkuT59T1jq9GTaVoZJJ4bnKjs8lS5shjc02AA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- External scripts -->
<!-- Leaflet -->
<!-- <script src="//unpkg.com/[email protected]/dist/leaflet.js"></script> -->
<script src="./js/leaflet.js"></script>
<!-- Leaflet Gesture Handling ("use 2 fingers to pan") -->
<script src="//unpkg.com/leaflet-gesture-handling"></script>
<!-- Leaflet control to geolocate the user. -->
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/L.Control.Locate.min.js"
charset="utf-8"></script> -->
<script src="./js/L.Control.Locate.min.js"></script>
<!-- Leaflet Contextmenu (Right mouse button menu)-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-contextmenu/1.4.0/leaflet.contextmenu.min.js"
integrity="sha512-8sfQf8cr0KjCeN32YPfjvLU2cMvyY1lhCXTMfpTZ16CvwIzeVQtwtKlxeSqFs/TpXjKhp1Dcv77LQmn1VFaOZg=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Activate for offline debugging -->
</head>
<body>
<div class='container'>
<div class="infobox"></div>
<div class='changesets col'>
<div class="background">
<div class="heading">
<a href="https://github.com/rene78/latest-changes" target="_blank" rel="noopener noreferrer"><img
src="./img/favicon.ico" id="clock" alt="Logo" title="Go to GitHub repository"></a>
<h3>Explore latest changes on OpenStreetMap</h3>
<select id="resolution">
<option value="1">Last 24 Hours</option>
<option value="3">Last 3 Days</option>
<option value="7" selected>Last 7 Days</option>
<option value="30">Last 30 Days</option>
</select>
<button id="download-changesets-button" title="Get recent changesets in this region">
<svg class="circular-arrow">
<use href="img/icons.svg#circular-arrow"></use>
</svg>
<span id="download-changesets-button-text">Get Changesets</span>
</button>
<div class="filter-container hide">
<input type="checkbox" id="filter-red-checkbox" name="filter-red">
<label for="filter-red-checkbox" class="filter-red-checkbox-label"
title="Only show changesets which are potentially destructive">
<div class="traffic-light traffic-light-filter filter-red-color"><span class="gray"></span><span
class="red"></span></div>
</label>
<div class="search-changesets-field-container" title="Filter for user name and changeset comment">
<svg class="filter-symbol">
<use href="img/icons.svg#filter"></use>
</svg>
<div class="delete-filter-input hide" title="Delete text in input field">
<svg class="delete-filter-input-symbol">
<use href="img/icons.svg#x-symbol"></use>
</svg>
</div>
<input type="text" class="search-changesets-field" placeholder="Filter changesets">
</div>
</div>
</div>
</div>
<div id='results'>
</div>
<div class="to-top hide" onclick="scrollToTop()" title="Back to top"><svg xmlns='http://www.w3.org/2000/svg'
class='ionicon' viewBox='0 0 512 512'>
<path fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='32'
d='M112 328l144-144 144 144' />
</svg></div>
</div>
<div class="map-container">
<div id='map' class='faded'></div>
<div id='zoom-in' class='hide'>Zoom in to download changes</div>
<div id="loading-animation" class="hide"></div>
</div>
</div>
<script src='js/d3.v3.min.js'></script>
<script src='js/d3-queue.v3.min.js'></script>
<script src='js/moment.min.js'></script>
<script src='js/leaflet-hash.js'></script>
<script src='js/osmtogeojson.js'></script>
<script src='js/site.js'></script>
</body>
</html>