Diffstat (limited to 'views/pages/global-map.html')
| -rw-r--r-- | views/pages/global-map.html | 610 |
1 files changed, 241 insertions, 369 deletions
diff --git a/views/pages/global-map.html b/views/pages/global-map.html index ce9d5b1..c13a5f4 100644 --- a/views/pages/global-map.html +++ b/views/pages/global-map.html @@ -1,428 +1,300 @@ -<!doctype html> +<!DOCTYPE html> <html lang="en"> - <head> - <meta charset="UTF-8" /> - <meta name="viewport" content="width=device-width, initial-scale=1.0" /> - <meta name="description" content="{{ .L.GlobalMap.Description }}" /> - <meta property="og:title" content="{{ .L.GlobalMap.Header }}" /> - <meta - property="og:description" - content="{{ .L.GlobalMap.Description }}" - /> - <meta - property="og:url" - content="{{ .CanonicalEndpoint }}/{{ .Lang }}/map" - /> - <meta property="og:type" content="site" /> - <title>{{ .L.GlobalMap.Header }} // SAYA.UZ</title> - <link rel="canonical" href="{{ .CanonicalEndpoint }}/{{ .Lang }}/map" /> - <link - rel="stylesheet" - href="{{ .StaticStorageBaseUrl }}/fonts/fonts.css" - /> - <link - rel="stylesheet" - href="{{ .StaticStorageBaseUrl }}/libs/font-awesome/7.2.0/css/fontawesome.min.css" - /> - <link - rel="stylesheet" - href="{{ .StaticStorageBaseUrl }}/libs/font-awesome/7.2.0/css/brands.min.css" - /> - <link - rel="stylesheet" - href="{{ .StaticStorageBaseUrl }}/libs/font-awesome/7.2.0/css/solid.min.css" - /> - {{ block "header" . }}{{ end }} - <link rel="stylesheet" href="/output.css" /> - <link - rel="icon" - href="/favicon-light.svg" - type="image/svg+xml" - media="(prefers-color-scheme: light)" - /> - <link - rel="icon" - href="/favicon-dark.svg" - type="image/svg+xml" - media="(prefers-color-scheme: dark)" - /> - <link - rel="stylesheet" - href="{{ .StaticStorageBaseUrl }}/libs/leaflet/1.9.4/leaflet.css" - /> - <link - rel="stylesheet" - href="{{ .StaticStorageBaseUrl }}/libs/leaflet.markercluster/1.4.1/MarkerCluster.css" - /> - <link - rel="stylesheet" - href="{{ .StaticStorageBaseUrl }}/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css" - /> - </head> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>{{ .L.GlobalMap.Header }} // SAYA TODAY</title> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"> + {{ block "header" . }}{{ end }} + <link href="/output.css" rel="stylesheet"> + <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet/1.9.4/leaflet.css"> + <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet.markercluster/1.4.1/MarkerCluster.css"> + <link rel="stylesheet" href="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css"> +</head> - <body - data-theme="ram" - class="font-m-plus text-main-hard overflow-hidden bg-interlocked-hexagons h-dvh" - > - <script> - function switchTheme(theme) { - if (theme == "" || typeof theme == "undefined") { - const currentTheme = - document.body.getAttribute("data-theme"); - switch (currentTheme) { - case "olive": - theme = "lettuce"; - break; - case "lettuce": - theme = "night"; - break; - case "night": - theme = "ram"; - break; - case "ram": - theme = "lilac"; - break; - case "lilac": - theme = "olive"; - break; - } +<body data-theme="ram" class="font-andika text-main-hard overflow-hidden bg-interlocked-hexagons h-dvh"> + + <script> + function switchTheme(theme) { + if (theme == "" || typeof theme == "undefined") { + const currentTheme = document.body.getAttribute('data-theme'); + switch (currentTheme) { + case "olive": theme = "lettuce"; break; + case "lettuce": theme = "night"; break; + case "night": theme = "ram"; break; + case "ram": theme = "lilac"; break; + case "lilac": theme = "olive"; break; } - localStorage.setItem("theme", theme); - document.body.setAttribute("data-theme", theme); } + localStorage.setItem('theme', theme); + document.body.setAttribute('data-theme', theme); + } - const savedTheme = localStorage.getItem("theme") || "lilac"; - switchTheme(savedTheme); - </script> + const savedTheme = localStorage.getItem('theme') || 'lilac'; + switchTheme(savedTheme); + </script> - <script> - const clientTimeZone = - Intl.DateTimeFormat().resolvedOptions().timeZone; + <script> + const clientTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone; - function convertRemToPixels(rem) { - return ( - rem * - parseFloat( - getComputedStyle(document.documentElement).fontSize, - ) - ); - } - </script> + function convertRemToPixels(rem) { + return rem * parseFloat(getComputedStyle(document.documentElement).fontSize); + } + </script> - <div - id="sidebar" - class="bg-sidebar block fixed shadow-[0_0_0.4rem_black] z-1001 w-fit h-auto" - > - <div class="text-[3rem] flex flex-col gap-0 relative z-1001"> - <a - href="./" - class="themed-button themed-button-sidebar w-fit h-fit" - draggable="false" - > - <i - class="fas fa-circle-left flex faw-18 h-18 content-center text-center text-sidebar" - ></i> - </a> - <a - href="/{{ .Lang }}" - class="themed-button themed-button-sidebar w-fit h-fit" - draggable="false" - > - <i - class="fas fa-home flex faw-18 h-18 content-center text-center text-sidebar" - ></i> - </a> - <a - href="/{{ .Lang }}/blog" - class="themed-button themed-button-sidebar w-fit h-fit" - draggable="false" - > - <i - class="fas fa-search flex faw-18 h-18 content-center text-center text-sidebar" - ></i> - </a> - <a - href="/{{ .Lang }}/map" - class="themed-button themed-button-sidebar w-fit h-fit" - draggable="false" - > - <i - class="fas fa-map flex faw-18 h-18 content-center text-center text-sidebar" - ></i> - </a> - <div - id="toolbar-theme-button" - onclick="toggleThemeWheel()" - class="themed-button themed-button-sidebar w-fit h-fit" - draggable="false" - > - <i - id="toolbar-theme-button-content" - class="fas fa-swatchbook flex faw-18 h-18 content-center text-center text-sidebar" - ></i> - </div> - <a - href="/{{ .Lang }}/user" - id="sidebar-user-button" - class="themed-button themed-button-sidebar w-fit h-fit" - draggable="false" - > - <i - onclick="return changeUrl('/{{ .Lang }}/user');" - class="fas fa-user flex faw-18 h-18 content-center text-center text-sidebar" - ></i> - </a> - </div> - <div class="theme-wheel" id="theme-wheel"> - <div class="theme-icon" data-theme="olive"></div> - <div class="theme-icon" data-theme="lettuce"></div> - <div class="theme-icon" data-theme="night"></div> - <div class="theme-icon" data-theme="ram"></div> - <div class="theme-icon" data-theme="lilac"></div> - <div class="theme-pin"></div> + <div id="sidebar" class="bg-sidebar block fixed shadow-[0_0_0.4rem_black] z-1001 w-fit h-auto"> + <div class="text-[3rem] text-stroke-(--sidebar-stroke-color) text-stroke-[0.1dvw] flex flex-col gap-0 relative z-1001"> + <a href="./" class="toolbar-button w-fit h-fit" draggable="false"> + <i class="fas fa-circle-left flex w-18 h-18 content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> + </a> + <a href="/{{ .Lang }}" class="toolbar-button w-fit h-fit" draggable="false"> + <i class="fas fa-home flex w-18 h-18 content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> + </a> + <a href="/{{ .Lang }}/blog" class="toolbar-button w-fit h-fit" draggable="false"> + <i class="fas fa-search flex w-18 h-18 content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> + </a> + <a href="/{{ .Lang }}/map" class="toolbar-button w-fit h-fit" draggable="false"> + <i class="fas fa-map flex w-18 h-18 content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> + </a> + <div id="toolbar-theme-button" onclick="toggleThemeWheel();" class="toolbar-button w-fit h-fit" draggable="false"> + <i id="toolbar-theme-button-content" class="fas fa-swatchbook flex w-18 h-18 content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i> </div> + <a href="/{{ .Lang }}/user" id="sidebar-user-button" class="toolbar-button w-fit h-fit" draggable="false"> + <i onclick="return changeUrl('/{{ .Lang }}/user');" class="fas fa-user flex w-18 h-18 content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> + </a> </div> + <div class="theme-wheel" id="theme-wheel"> + <div class="theme-icon" data-theme="olive"></div> + <div class="theme-icon" data-theme="lettuce"></div> + <div class="theme-icon" data-theme="night"></div> + <div class="theme-icon" data-theme="ram"></div> + <div class="theme-icon" data-theme="lilac"></div> + <div class="theme-pin"></div> + </div> + </div> - <div - id="map-container" - class="bg-paper bg-background-dark flex z-10 w-full h-full" - ></div> - - <script src="{{ .StaticStorageBaseUrl }}/libs/htmx/2.0.6/htmx.min.js"></script> - <script src="{{ .StaticStorageBaseUrl }}/libs/leaflet/1.9.4/leaflet.js"></script> - <script src="{{ .StaticStorageBaseUrl }}/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js"></script> + <div id="map-container" class="bg-background-dark flex z-10 w-full h-full"></div> - <script> - const themeWheel = document.getElementById("theme-wheel"); - const themeButton = document.getElementById("toolbar-theme-button"); - const themeIcons = document.querySelectorAll(".theme-icon"); - const themeWheelRadius = convertRemToPixels(6); - const THUMB_BASE = "{{ .ThumbnailBaseUrl }}"; + <script src="https://f003.backblazeb2.com/file/sayana-static/libs/htmx/2.0.6/htmx.min.js"></script> + <script src="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet/1.9.4/leaflet.js"></script> + <script src="https://f003.backblazeb2.com/file/sayana-static/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js"></script> - themeIcons.forEach((icon) => { - if (icon.getAttribute("data-theme") == savedTheme) { - icon.classList.add("active"); - } - }); + <script> + const themeWheel = document.getElementById('theme-wheel'); + const themeButton = document.getElementById('toolbar-theme-button'); + const themeIcons = document.querySelectorAll('.theme-icon'); + const themeWheelRadius = convertRemToPixels(6); - function calculateVmax(percent) { - const viewportWidth = window.innerWidth; - const viewportHeight = window.innerHeight; + themeIcons.forEach(icon => { + if (icon.getAttribute('data-theme') == savedTheme) { + icon.classList.add('active'); + } + }); - const largerDimension = Math.max(viewportWidth, viewportHeight); + function calculateVmax(percent) { + const viewportWidth = window.innerWidth; + const viewportHeight = window.innerHeight; - const vmaxValue = (largerDimension / 100) * percent; + const largerDimension = Math.max(viewportWidth, viewportHeight); - return vmaxValue; - } + const vmaxValue = (largerDimension / 100) * percent; - function positionThemeIcons() { - const sliceAngle = 360 / themeIcons.length; + return vmaxValue; + } - themeIcons.forEach((icon, index) => { - const startAngle = index * sliceAngle; - const endAngle = (index + 1) * sliceAngle; + function positionThemeIcons() { + const sliceAngle = 360 / themeIcons.length; - const clipPath = createSliceClipPath( - startAngle, - endAngle, - themeWheelRadius, - ); - icon.style.clipPath = clipPath; - }); - } + themeIcons.forEach((icon, index) => { + const startAngle = index * sliceAngle; + const endAngle = (index + 1) * sliceAngle; - function createSliceClipPath(startAngle, endAngle, radius) { - const centerX = radius; - const centerY = radius; - - let points = `${centerX}px ${centerY}px`; + const clipPath = createSliceClipPath(startAngle, endAngle, themeWheelRadius); + icon.style.clipPath = clipPath; + }); + } - const segments = Math.max( - 2, - Math.ceil(Math.abs(endAngle - startAngle) / 5), - ); - const angleStep = (endAngle - startAngle) / segments; + function createSliceClipPath(startAngle, endAngle, radius) { + const centerX = radius; + const centerY = radius; - for (let i = 0; i <= segments; i++) { - const angle = - ((startAngle + angleStep * i - 90) * Math.PI) / 180; - const x = centerX + Math.cos(angle) * radius; - const y = centerY + Math.sin(angle) * radius; - points += `, ${x}px ${y}px`; - } + let points = `${centerX}px ${centerY}px`; - points += `, ${centerX}px ${centerY}px`; + const segments = Math.max(2, Math.ceil(Math.abs(endAngle - startAngle) / 5)); + const angleStep = (endAngle - startAngle) / segments; - return `polygon(${points})`; + for (let i = 0; i <= segments; i++) { + const angle = ((startAngle + angleStep * i - 90) * Math.PI) / 180; + const x = centerX + Math.cos(angle) * radius; + const y = centerY + Math.sin(angle) * radius; + points += `, ${x}px ${y}px`; } - function positionThemeWheel() { - const buttonRect = themeButton.getBoundingClientRect(); - const buttonCenterX = buttonRect.left + buttonRect.width / 2; - const buttonCenterY = buttonRect.top + buttonRect.height / 2; + points += `, ${centerX}px ${centerY}px`; + + return `polygon(${points})`; + } - const margin = 0; + function positionThemeWheel() { + const buttonRect = themeButton.getBoundingClientRect(); + const buttonCenterX = buttonRect.left + buttonRect.width / 2; + const buttonCenterY = buttonRect.top + buttonRect.height / 2; - let wheelX = buttonCenterX - themeWheelRadius; - let wheelY = buttonCenterY - themeWheelRadius; + const margin = 0; - const viewportWidth = window.innerWidth; - const viewportHeight = window.innerHeight; + let wheelX = buttonCenterX - themeWheelRadius; + let wheelY = buttonCenterY - themeWheelRadius; - if (wheelX < margin) { - wheelX = margin; - } else if ( - wheelX + themeWheelRadius * 2 > - viewportWidth - margin - ) { - wheelX = viewportWidth - themeWheelRadius * 2 - margin; - } + const viewportWidth = window.innerWidth; + const viewportHeight = window.innerHeight; - if (wheelY < margin) { - wheelY = margin; - } else if ( - wheelY + themeWheelRadius * 2 > - viewportHeight - margin - ) { - wheelY = viewportHeight - themeWheelRadius * 2 - margin; - } - - themeWheel.style.left = wheelX + "px"; - themeWheel.style.top = wheelY + "px"; + if (wheelX < margin) { + wheelX = margin; + } else if (wheelX + (themeWheelRadius * 2) > viewportWidth - margin) { + wheelX = viewportWidth - (themeWheelRadius * 2) - margin; } - function hideThemeWheel() { - themeWheel.classList.remove("active"); + if (wheelY < margin) { + wheelY = margin; + } else if (wheelY + (themeWheelRadius * 2) > viewportHeight - margin) { + wheelY = viewportHeight - (themeWheelRadius * 2) - margin; } - function showThemeWheel() { - positionThemeWheel(); - positionThemeIcons(); - themeWheel.classList.add("active"); - } + themeWheel.style.left = wheelX + 'px'; + themeWheel.style.top = wheelY + 'px'; + } - function toggleThemeWheel() { - if (themeWheel.classList.contains("active")) { - hideThemeWheel(); - } else { - showThemeWheel(); - } - } + function hideThemeWheel() { + themeWheel.classList.remove('active'); + } - themeIcons.forEach((icon) => { - icon.addEventListener("click", (e) => { - e.stopPropagation(); - const theme = icon.getAttribute("data-theme"); - switchTheme(theme); - themeIcons.forEach((icon) => { - icon.classList.remove("active"); - }); - icon.classList.add("active"); - }); - }); + function showThemeWheel() { + positionThemeWheel(); + positionThemeIcons(); + themeWheel.classList.add('active'); + } - themeWheel.addEventListener("mouseleave", hideThemeWheel); + function toggleThemeWheel() { + if (themeWheel.classList.contains('active')) { + hideThemeWheel(); + } else { + showThemeWheel(); + } + } - document.addEventListener("click", (e) => { - if ( - !themeWheel.contains(e.target) && - e.target !== themeButton && - !e.target.classList.contains("toolbar-theme-button-content") - ) { - hideThemeWheel(); - } + themeIcons.forEach(icon => { + icon.addEventListener('click', (e) => { + e.stopPropagation(); + const theme = icon.getAttribute('data-theme'); + switchTheme(theme); + themeIcons.forEach(icon => { + icon.classList.remove('active'); + }) + icon.classList.add('active'); }); - </script> + }); - <script> - var map; - var markers = L.markerClusterGroup(); + themeWheel.addEventListener('mouseleave', hideThemeWheel); - function createCustomIcon(color, borderColor = "var(--color-main-soft)") { - const svgIcon = ` - <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> - <path d="M12 1C7.5 1 4 4.5 4 9c0 6.5 8 14 8 14s8-7.5 8-14c0-4.5-3.5-8-8-8zm0 11c-1.5 0-3-1.5-3-3s1.5-3 3-3 3 1.5 3 3-1.5 3-3 3z" - fill="${color}" - stroke="${borderColor}" - stroke-width="1" - stroke-linejoin="round"/> - </svg> - `; - - return L.divIcon({ - html: svgIcon, - className: 'custom-svg-marker', - iconSize: [32, 32], - iconAnchor: [16, 32], - popupAnchor: [0, -32] - }); + document.addEventListener('click', (e) => { + if (!themeWheel.contains(e.target) && e.target !== themeButton && !e.target.classList.contains("toolbar-theme-button-content")) { + hideThemeWheel(); } + }); + </script> - function initLocationMap() { - map = L.map('map-container').setView([{{ .MapLocationLat }}, {{ .MapLocationLong }}], 4); + <script> + var map; + var markers = L.markerClusterGroup(); - L.tileLayer('https://{s}.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png', { - maxZoom: 20, - attribution: '<a href="https://github.com/cyclosm/cyclosm-cartocss-style/releases" title="CyclOSM - Open Bicycle render">CyclOSM</a> | Map data: © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', - zoomControl: false - }).addTo(map); + function createCustomIcon(color, borderColor = "var(--main-soft-color)") { + const svgIcon = ` + <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> + <path d="M12 1C7.5 1 4 4.5 4 9c0 6.5 8 14 8 14s8-7.5 8-14c0-4.5-3.5-8-8-8zm0 11c-1.5 0-3-1.5-3-3s1.5-3 3-3 3 1.5 3 3-1.5 3-3 3z" + fill="${color}" + stroke="${borderColor}" + stroke-width="1" + stroke-linejoin="round"/> + </svg> + `; - L.control.zoom({ - position: 'topright' - }).addTo(map); + return L.divIcon({ + html: svgIcon, + className: 'custom-svg-marker', + iconSize: [32, 32], + iconAnchor: [16, 32], + popupAnchor: [0, -32] + }); + } - map.addLayer(markers); - } + function initLocationMap() { + map = L.map('map-container').setView([{{ .MapLocationLat }}, {{ .MapLocationLong }}], 4); - function markerToHsl(str, newCoef) { - let hash = 0; - for (let i = 0; i < str.length / 2; i++) { - hash = str.charCodeAt(i) + ((hash << 5) - hash); - hash = str.charCodeAt(str.length - i - 1) + ((hash << 5) - hash); - hash %= 360; - } + L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { + maxZoom: 18, + attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>', + zoomControl: false + }).addTo(map); + + L.control.zoom({ + position: 'topright' + }).addTo(map); - return [hash, (20 + newCoef * 80).toFixed(0), (20 + newCoef * 75).toFixed(0)]; + map.addLayer(markers); + } + + function stringToColor(str) { + let hash = 0; + for (let i = 0; i < str.length; i++) { + hash = str.charCodeAt(i) + ((hash << 5) - hash); } - function mapAddMarker(x, y, relativeErrorMeters = 0, title = "", link = "", thumbnail = "", newCoef = 1) { - const [h, s, l] = markerToHsl(title, newCoef); - const color = `hsl(${h} ${s}% ${l}%)`; + let color = '#'; + for (let i = 0; i < 3; i++) { + const value = (hash >> (i * 8)) & 0xFF; + color += ('00' + value.toString(16)).substr(-2); + } - if (relativeErrorMeters != 0) { - var circle = L.circle([x, y], { - color: color, - fillColor: color, - fillOpacity: 0.15, - radius: relativeErrorMeters - }).addTo(map); - } + return color; + } - var marker = L.marker([x, y], { - icon: createCustomIcon(color), - title: title, - }).bindPopup(` - <div class="flex flex-row justify-center justify-items-center"> - <img onclick="location.href='${link}';" class="cursor-pointer object-cover rounded-[10%] select-none w-12 h-12 mr-1" src="${THUMB_BASE.replace('%s', thumbnail)}"> - <span><b><a href="${link}">${title}</a></b><br><a href="https://www.openstreetmap.org/#map=13/${x}/${y}">${x}, ${y}</a></span> - </div>`); + function mapAddMarker(x, y, relativeErrorMeters = 0, title = "", link = "", thumbnail = "") { + const titleColor = stringToColor(title); - markers.addLayer(marker); + if (relativeErrorMeters != 0) { + var circle = L.circle([x, y], { + color: titleColor, + fillColor: titleColor, + fillOpacity: 0.15, + radius: relativeErrorMeters + }).addTo(map); } - document.addEventListener('DOMContentLoaded', () => { - initLocationMap(); - {{- range .MapMarkers }} - mapAddMarker({{ .Lat }}, {{ .Long }}, {{ .AccuracyMeters }}, {{ .Title }}, {{ .PageLink }}, {{ .Thumbnail }}, {{ fdiv .Index (len $.MapMarkers) }}); - {{- end }} - }); + var marker = L.marker([x, y], { + icon: createCustomIcon(titleColor), + title: title, + }).bindPopup(` + <div class="flex flex-row justify-center justify-items-center"> + <img onclick="location.href='${link}';" class="cursor-pointer object-cover rounded-[10%] select-none w-12 h-12 mr-1" src="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/${thumbnail}.webp"> + <span><b><a href="${link}">${title}</a></b><br><a href="https://www.openstreetmap.org/#map=13/${x}/${y}">${x}, ${y}</a></span> + </div>`); - window.addEventListener('resize', function() { - setTimeout(() => { - map.invalidateSize(); - }, 100); - }); - </script> - </body> + markers.addLayer(marker); + } + + document.addEventListener('DOMContentLoaded', () => { + initLocationMap(); + {{- range .MapMarkers }} + mapAddMarker({{ .Lat }}, {{ .Long }}, {{ .AccuracyMeters }}, {{ .Title }}, {{ .PageLink }}, {{ .Thumbnail }}); + {{- end }} + }); + + window.addEventListener('resize', function() { + setTimeout(() => { + map.invalidateSize(); + }, 100); + }); + </script> + +</body> </html> |