Skip to content

Commit df43714

Browse files
albertkunalbertkun
committed
add: copy of html into static
1 parent 02ecace commit df43714

File tree

2 files changed

+106
-0
lines changed

2 files changed

+106
-0
lines changed

‎static/examples/leaflet-tz.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<html>
2+
<head>
3+
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
4+
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
5+
</head>
6+
<body>
7+
<div id="map" style="height:500px"></div>
8+
<script>
9+
(function() {
10+
const map = L.map('map').setView([34, -170], 1);
11+
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
12+
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
13+
}).addTo(map);
14+
15+
let laMarker = L.marker([34.0522, -118.2437], {
16+
icon: L.divIcon({
17+
className: 'time-label',
18+
html: 'Loading...',
19+
}),
20+
}).addTo(map); // Los Angeles
21+
setInterval(() => {
22+
let laTime = new Intl.DateTimeFormat('en-US', { timeZone: 'America/Los_Angeles', timeStyle: 'medium' }).format(new Date());
23+
laMarker.setIcon(L.divIcon({
24+
className: 'time-label',
25+
html: '<p> 🇺🇸 ' + laTime + '</p>',
26+
}));
27+
}, 1000);
28+
29+
let tokyoMarker = L.marker([35.6895, 139.6917 - 360], {
30+
icon: L.divIcon({
31+
className: 'time-label',
32+
html: 'Loading...',
33+
}),
34+
}).addTo(map); // Tokyo, Japan
35+
setInterval(() => {
36+
let tokyoTime = new Intl.DateTimeFormat('en-US', { timeZone: 'Asia/Tokyo', timeStyle: 'medium' }).format(new Date());
37+
tokyoMarker.setIcon(L.divIcon({
38+
className: 'time-label',
39+
html: '<p>🇯🇵 ' + tokyoTime + '</p>',
40+
}));
41+
}, 1000);
42+
})();
43+
</script>
44+
</body>
45+
</html>

‎static/examples/maplibre-tz.html

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Show some timezones on a map</title>
5+
<meta property="og:description" content="Show some timezones on a map" />
6+
<meta charset='utf-8'>
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel='stylesheet' href='https://unpkg.com/[email protected]/dist/maplibre-gl.css' />
9+
<script src='https://unpkg.com/[email protected]/dist/maplibre-gl.js'></script>
10+
<style>
11+
body { margin: 0; padding: 0; }
12+
html, body, #map { height: 100%; }
13+
.maplibregl-popup {
14+
background-color: transparent;
15+
box-shadow: none;
16+
}
17+
.maplibregl-popup-content {
18+
background-color: transparent;
19+
color: #000;
20+
box-shadow: none;
21+
padding: 0;
22+
}
23+
.maplibregl-popup-tip {
24+
display: none;
25+
}
26+
</style>
27+
</head>
28+
<body>
29+
<div id="map"></div>
30+
31+
<script>
32+
const map = new maplibregl.Map({
33+
container: 'map',
34+
style: 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json',
35+
center: [170, 32],
36+
zoom: 1
37+
});
38+
39+
map.on('load', function () {
40+
const laPopup = new maplibregl.Popup({ offset: 25, closeOnClick: false, closeButton: false })
41+
.setLngLat([-118.2437, 34.0522])
42+
.setText('🇺🇸 Loading...')
43+
.addTo(map);
44+
45+
const tokyoPopup = new maplibregl.Popup({ offset: 25, closeOnClick: false, closeButton: false })
46+
.setLngLat([139.6917, 35.6895])
47+
.setText('🇯🇵 Loading...')
48+
.addTo(map);
49+
50+
// Update the labels every second.
51+
setInterval(() => {
52+
let laTime = new Intl.DateTimeFormat('en-US', { timeZone: 'America/Los_Angeles', timeStyle: 'medium' }).format(new Date());
53+
let tokyoTime = new Intl.DateTimeFormat('en-US', { timeZone: 'Asia/Tokyo', timeStyle: 'medium' }).format(new Date());
54+
55+
laPopup.setText('🇺🇸 ' + laTime);
56+
tokyoPopup.setText('🇯🇵 ' + tokyoTime);
57+
}, 1000);
58+
});
59+
</script>
60+
</body>
61+
</html>

0 commit comments

Comments
 (0)