add: copy of html into static

UNopenGIS · Dec 15, 2023 · df43714 · df43714
1 parent 02ecace
commit df43714
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 0 deletions.
diff --git a/static/examples/leaflet-tz.html b/static/examples/leaflet-tz.html
@@ -0,0 +1,45 @@
+<html>
+<head>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
+    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
+</head>
+<body>
+    <div id="map" style="height:500px"></div>
+    <script>
+    (function() {
+        const map = L.map('map').setView([34, -170], 1);
+        L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
+            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+        }).addTo(map);
+
+        let laMarker = L.marker([34.0522, -118.2437], {
+            icon: L.divIcon({
+                className: 'time-label',
+                html: 'Loading...',
+            }),
+        }).addTo(map); // Los Angeles
+        setInterval(() => {
+            let laTime = new Intl.DateTimeFormat('en-US', { timeZone: 'America/Los_Angeles', timeStyle: 'medium' }).format(new Date());
+            laMarker.setIcon(L.divIcon({
+                className: 'time-label',
+                html: '<p> 🇺🇸 ' + laTime + '</p>',
+            }));
+        }, 1000);
+
+        let tokyoMarker = L.marker([35.6895, 139.6917 - 360], {
+            icon: L.divIcon({
+                className: 'time-label',
+                html: 'Loading...',
+            }),
+        }).addTo(map); // Tokyo, Japan
+        setInterval(() => {
+            let tokyoTime = new Intl.DateTimeFormat('en-US', { timeZone: 'Asia/Tokyo', timeStyle: 'medium' }).format(new Date());
+            tokyoMarker.setIcon(L.divIcon({
+                className: 'time-label',
+                html: '<p>🇯🇵 ' + tokyoTime + '</p>',
+            }));
+        }, 1000);
+    })();
+    </script>
+</body>
+</html>
diff --git a/static/examples/maplibre-tz.html b/static/examples/maplibre-tz.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Show some timezones on a map</title>
+    <meta property="og:description" content="Show some timezones on a map" />
+    <meta charset='utf-8'>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel='stylesheet' href='https://unpkg.com/[email protected]/dist/maplibre-gl.css' />
+    <script src='https://unpkg.com/[email protected]/dist/maplibre-gl.js'></script>
+    <style>
+        body { margin: 0; padding: 0; }
+        html, body, #map { height: 100%; }
+        .maplibregl-popup {
+            background-color: transparent;
+            box-shadow: none;
+        }
+        .maplibregl-popup-content {
+            background-color: transparent;
+            color: #000;
+            box-shadow: none;
+            padding: 0;
+        }
+        .maplibregl-popup-tip {
+            display: none;
+        }
+    </style>
+</head>
+<body>
+<div id="map"></div>
+
+<script>
+    const map = new maplibregl.Map({
+        container: 'map',
+        style: 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json',
+        center: [170, 32],
+        zoom: 1
+    });
+
+    map.on('load', function () {
+        const laPopup = new maplibregl.Popup({ offset: 25, closeOnClick: false, closeButton: false })
+            .setLngLat([-118.2437, 34.0522])
+            .setText('🇺🇸 Loading...')
+            .addTo(map);
+
+        const tokyoPopup = new maplibregl.Popup({ offset: 25, closeOnClick: false, closeButton: false })
+            .setLngLat([139.6917, 35.6895])
+            .setText('🇯🇵 Loading...')
+            .addTo(map);
+
+        // Update the labels every second.
+        setInterval(() => {
+            let laTime = new Intl.DateTimeFormat('en-US', { timeZone: 'America/Los_Angeles', timeStyle: 'medium' }).format(new Date());
+            let tokyoTime = new Intl.DateTimeFormat('en-US', { timeZone: 'Asia/Tokyo', timeStyle: 'medium' }).format(new Date());
+
+            laPopup.setText('🇺🇸 ' + laTime);
+            tokyoPopup.setText('🇯🇵 ' + tokyoTime);
+        }, 1000);
+    });
+</script>
+</body>
+</html>