Diffstat (limited to 'views/pages/global-map.html')
| -rw-r--r-- | views/pages/global-map.html | 71 |
1 files changed, 38 insertions, 33 deletions
diff --git a/views/pages/global-map.html b/views/pages/global-map.html index 306f442..604b52e 100644 --- a/views/pages/global-map.html +++ b/views/pages/global-map.html @@ -3,7 +3,13 @@ <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 TODAY</title> + <link rel="canonical" href="{{ .CanonicalEndpoint }}/{{ .Lang }}/map"> <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"> @@ -42,23 +48,25 @@ } </script> - <div id="sidebar" class="bg-sidebar block fixed shadow-[0_0_0.4rem_black] z-1001 w-[5rem] 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="w-[5rem] h-[5rem]"> - <i class="fas fa-circle-left flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> + <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 w-18 h-18 content-center text-center text-sidebar"></i> </a> - <a href="/{{ .Lang }}" class="w-[5rem] h-[5rem]"> - <i class="fas fa-home flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> + <a href="/{{ .Lang }}" class="themed-button themed-button-sidebar w-fit h-fit" draggable="false"> + <i class="fas fa-home flex w-18 h-18 content-center text-center text-sidebar"></i> </a> - <a href="/{{ .Lang }}/blog" class="w-[5rem] h-[5rem]"> - <i class="fas fa-search flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> + <a href="/{{ .Lang }}/blog" class="themed-button themed-button-sidebar w-fit h-fit" draggable="false"> + <i class="fas fa-search flex w-18 h-18 content-center text-center text-sidebar"></i> </a> - <a href="/{{ .Lang }}/map" class="w-[5rem] h-[5rem]"> - <i class="fas fa-map flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> + <a href="/{{ .Lang }}/map" class="themed-button themed-button-sidebar w-fit h-fit" draggable="false"> + <i class="fas fa-map flex w-18 h-18 content-center text-center text-sidebar"></i> </a> - <i onclick="toggleThemeWheel();" id="theme-button" class="fas fa-swatchbook flex w-[5rem] h-[5rem] content-center text-center text-sidebar hover:bg-background-dark cursor-pointer transition-colors duration-300 rounded-lg"></i> - <a href="/{{ .Lang }}/user" id="sidebar-user-button" class="w-[5rem] h-[5rem]"> - <i onclick="return changeUrl('/{{ .Lang }}/user');" class="fas fa-user flex w-full h-full content-center text-center text-sidebar hover:bg-background-dark transition-colors duration-300 rounded-lg"></i> + <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 w-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 w-18 h-18 content-center text-center text-sidebar"></i> </a> </div> <div class="theme-wheel" id="theme-wheel"> @@ -79,7 +87,7 @@ <script> const themeWheel = document.getElementById('theme-wheel'); - const themeButton = document.getElementById('theme-button'); + const themeButton = document.getElementById('toolbar-theme-button'); const themeIcons = document.querySelectorAll('.theme-icon'); const themeWheelRadius = convertRemToPixels(6); @@ -195,7 +203,7 @@ themeWheel.addEventListener('mouseleave', hideThemeWheel); document.addEventListener('click', (e) => { - if (!themeWheel.contains(e.target) && e.target !== themeButton) { + if (!themeWheel.contains(e.target) && e.target !== themeButton && !e.target.classList.contains("toolbar-theme-button-content")) { hideThemeWheel(); } }); @@ -228,9 +236,9 @@ function initLocationMap() { map = L.map('map-container').setView([{{ .MapLocationLat }}, {{ .MapLocationLong }}], 4); - L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { - maxZoom: 18, - attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>', + 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); @@ -241,35 +249,32 @@ map.addLayer(markers); } - function stringToColor(str) { + function markerToHsl(str, newCoef) { let hash = 0; - for (let i = 0; i < str.length; i++) { + 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; } - let color = '#'; - for (let i = 0; i < 3; i++) { - const value = (hash >> (i * 8)) & 0xFF; - color += ('00' + value.toString(16)).substr(-2); - } - - return color; + return [hash, (20 + newCoef * 80).toFixed(0), (20 + newCoef * 75).toFixed(0)]; } - function mapAddMarker(x, y, relativeErrorMeters = 0, title = "", link = "", thumbnail = "") { - const titleColor = stringToColor(title); + function mapAddMarker(x, y, relativeErrorMeters = 0, title = "", link = "", thumbnail = "", newCoef = 1) { + const [h, s, l] = markerToHsl(title, newCoef); + const color = `hsl(${h} ${s}% ${l}%)`; if (relativeErrorMeters != 0) { var circle = L.circle([x, y], { - color: titleColor, - fillColor: titleColor, + color: color, + fillColor: color, fillOpacity: 0.15, radius: relativeErrorMeters }).addTo(map); } var marker = L.marker([x, y], { - icon: createCustomIcon(titleColor), + icon: createCustomIcon(color), title: title, }).bindPopup(` <div class="flex flex-row justify-center justify-items-center"> @@ -283,7 +288,7 @@ document.addEventListener('DOMContentLoaded', () => { initLocationMap(); {{- range .MapMarkers }} - mapAddMarker({{ .Lat }}, {{ .Long }}, {{ .AccuracyMeters }}, {{ .Title }}, {{ .PageLink }}, {{ .Thumbnail }}); + mapAddMarker({{ .Lat }}, {{ .Long }}, {{ .AccuracyMeters }}, {{ .Title }}, {{ .PageLink }}, {{ .Thumbnail }}, {{ fdiv .Index (len $.MapMarkers) }}); {{- end }} }); |