Fix misc issues

public/index.html

@@ -25,8 +25,8 @@
             font-family: sans-serif;
         }
         #map {
-            width: min(100vw, 100vh);
-            height: min(100vw, 100vh);
+            width: min(90vw, 90vh);
+            height: min(90vw, 90vh);
         }
         .maplibregl-canvas {
             cursor: pointer;
@@ -35,41 +35,20 @@
             max-width: unset !important;
         }
         .maplibregl-popup-content {
-            background-color: #eee;
+            background-color: white;
             color: black;
-            font-size: 1rem;
-            padding: 0.6rem 2.8rem 0.6rem 1rem;
-            border-radius: 0.5rem;
+            font-size: 0.9rem;
+            padding: 0.3rem 2.2rem 0.3rem 0.6rem;
+            border-radius: 4px;
         }
         .maplibregl-popup-close-button {
             height: 100%;
-            width: 2.4rem;
+            width: 2rem;
             margin: 0;
             padding: 0;
-            padding-bottom: 0.25rem;
-            font-size: 1.5rem;
-        }
-        .map-overlay {
-            position: absolute;
-            top: 1rem;
-            left: 1rem;
-            padding: 0.6rem;
-            background-color: #333;
-            color: #eee;
-            box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.8);
-            border-radius: 0.5rem;
-            max-height: calc(100% - 2rem);
-            box-sizing: border-box;
-            overflow-y: scroll;
-        }
-        .map-overlay summary {
-            margin: 0 0.4rem;
-        }
-        .map-overlay h2 {
-            display: inline-block;
-            margin: 0 0 0 0.4rem;
-            user-select: none;
-            vertical-align: middle;
+            padding-bottom: 3px;
+            font-size: 1.3rem;
+            color: black;
         }
         .custom-control {
             user-select: none;
@@ -226,9 +205,8 @@
         center: [0, 0],
         minZoom: -2,
         maxZoom: 12,
-        zoom: 0
+        zoom: -2
     })
-
     map.painter.context.extTextureFilterAnisotropic = undefined
     map.touchZoomRotate.disableRotation()
 
@@ -319,7 +297,8 @@
             }
         })
 
-        ;[...Array(8)].forEach((_, z) => {
+        const zoomLevels = 8
+        ;[...Array(zoomLevels)].map((_, i) => i + 1).forEach(z => {
             const labelsId = `subnet-labels-${z}`
             const width = 2 ** z
             const subnet = 2 * z
@@ -355,12 +334,12 @@
                 id: labelsId,
                 type: "symbol",
                 source: labelsId,
-                minzoom: Math.max(z - 0.5, 0),
-                ...(z < 7 ? { maxzoom: z + 0.5 } : {}),
+                minzoom: Math.max(z - 1.5, 0),
+                ...(z < zoomLevels ? { maxzoom: z - 0.5 } : {}),
                 layout: {
                     "text-field": "{name}",
                     "text-font": ["Open Sans Bold"],
-                    "text-size": 24
+                    "text-size": 22
                 },
                 paint: {
                     "text-color": "#FFFFFF"
@@ -399,11 +378,11 @@
                 id: gridId,
                 type: "line",
                 source: gridId,
-                minzoom: Math.max(z - 0.5, 0),
-                ...(z < 7 ? { maxzoom: z + 0.5 } : {}),
+                minzoom: Math.max(z - 1.5, 0),
+                ...(z < zoomLevels ? { maxzoom: z - 0.5 } : {}),
                 paint: {
                     "line-color": "#FFFFFF",
-                    "line-width": 4
+                    "line-width": 3
                 }
             })
         })
@@ -488,11 +467,12 @@
         dateControl.addControl()
         variantControl.addControl()
         colormapControl.addControl()
-
-        map.addControl(new maplibregl.NavigationControl({ showCompass: false }), "top-right")
     })
 
-    map.on("click", (e) => {
+    map.addControl(new maplibregl.NavigationControl({ showCompass: false }), "top-left")
+
+    let curPopup
+    map.on("click", e => {
         const { x, y } = maplibregl.MercatorCoordinate.fromLngLat(e.lngLat, 0)
         const ip = coordsToHilbert({ x: Math.floor(0x10000 * x), y: Math.floor(0x10000 * y) })
         const subnet = Math.min(32, Math.round(map.getZoom()) * 2 + 18)
@@ -501,11 +481,16 @@
         const text = subnet < 32 ?
             `Range: ${ipToRange(ip, subnet)}${propsText}` :
             `IP: ${ipToString(ip)}${propsText}`
-        new maplibregl.Popup()
+        curPopup = new maplibregl.Popup()
             .setHTML(text)
             .setLngLat(e.lngLat)
             .addTo(map)
     })
+
+    const main = document.getElementsByTagName("main")[0]
+    main.addEventListener("click", e => {
+        if (e.target === main && curPopup) curPopup.remove()
+    })
 </script>
 </body>
 </html>