some tweaks

web/index.html

@@ -466,7 +466,7 @@ input:focus {
     display: block;
     line-height: 2;
     padding-left: 0.5rem;
-    padding-right: 25px;
+    padding-right: 55px;
     border-top-right-radius: 5px;    
     border-bottom-right-radius: 5px;
     border-left: solid 5px #78f378;
@@ -502,7 +502,7 @@ input:focus {
 .res-group, .res-stat, .res-way {
     background-size: 20px;
     background-repeat: no-repeat;
-    background-position: 100% center;
+    background-position: 100% 6px;
 }
 
 .res-group {
@@ -563,6 +563,14 @@ padding-left:20px;}
     transition: color 0.2s ease-out;
 }
 
+.dist {
+    font-size: 60%;
+    color: #666;
+    right: 30px;
+    position: absolute;
+    line-height: 3.4;
+}
+
 main, #m { width: 100%;height:100%; }
 
 #sres.res-open + #del { opacity: 1; }

web/script.js

@@ -192,7 +192,7 @@ function rndrSt(stat) {
         .setLatLng(stat)
         .setContent(con)
         .openOn(map)
-        .on('remove', function() {openedSt = -1; stUnHl(stat.id);});
+        .on('remove', function() {if (openedSt == stat.id) {openedSt = -1; stUnHl(stat.id)}});
 }
 
 function openSt(id) {req("s", "/stat?id=" + id, function(c) {rndrSt(c)});}
@@ -318,7 +318,7 @@ function rndrGr(grp, ll) {
         .setLatLng(ll)
         .setContent(con)
         .openOn(map)
-        .on('remove', function() {openedGr = -1; grUnHl(grp.id)});
+        .on('remove', function() {if (openedGr == grp.id) {openedGr = -1; grUnHl(grp.id)}});
 }
 
 function openGr(id, ll) {
@@ -374,9 +374,11 @@ map.addControl(L.control.attribution({
 }));
 
 map.on('popupopen', function(e) {
-    var px = map.project(e.target._popup._latlng);
+    var z = Math.max(map.getZoom(), 16);
+    var px = map.project(e.target._popup._latlng, z);
     px.y -= e.target._popup._container.clientHeight/2;
-    map.panTo(map.unproject(px),{animate: true});
+
+    map.setView(map.unproject(px, z), z, {animate: true});
     s();
 });
 
@@ -504,8 +506,8 @@ function unselect(row) {
     selectedRes = undefined;
     if (!row) return;
     delCl(row, "selres");
-    if (row.stat) stUnHl(row.stat.i);
-    if (row.group) grUnHl(row.group.i);
+    if (row.stat && row.stat.i != openedSt) stUnHl(row.stat.i);
+    if (row.group && row.group.i != openedGr) grUnHl(row.group.i);
 }
 
 function isSearchOpen() {
@@ -521,6 +523,7 @@ function s(q) {
     if (!q) {
         $('#si').value = "";
         $("#sres").className = "";
+        $("#sres").innerHTML = "";
         return;
     }
 
@@ -550,6 +553,11 @@ function s(q) {
                     row.onmouseover = function(){select(this)};
                     row.onclick = function(){rowClick(this)};
 
+                    var dist = $$('span');
+                    addCl(dist, "dist");
+                    dist.innerHTML = dstr(e.s ? e.s.g : e.g.g);
+                    row.appendChild(dist);
+
                     if (e.v && e.v != e.name) {
                         var via = $$('span');
                         addCl(via, "via");
@@ -562,13 +570,21 @@ function s(q) {
         )}, delay);
 }
 
+function dstr(s) {
+    if (map.getBounds().contains(ll(s[0]))) return "";
+    var d = map.distance(map.getCenter(), ll(s[0]));
+    if (d < 500) return Math.round(d).toFixed(0) + "m";
+    if (d < 5000) return (d / 1000.0).toFixed(1) + "km";
+    return Math.round(d / 1000.0).toFixed(0) + "km";
+}
+
 function kp(e) {
-    if (e.keyCode == 40) {
+    if (e.keyCode == 40 || (!e.shiftKey && e.keyCode == 9)) {
         var sels = $('.selres')
         if (sels.length) select(sels[0].nextSibling);
         else select($('.sres')[0]);
         e.preventDefault();
-    } else if (e.keyCode == 38) {
+    } else if (e.keyCode == 38 || (e.shiftKey && e.keyCode == 9)) {
         var sels = $('.selres')
         if (sels.length) {
             if (sels[0].previousSibling) select(sels[0].previousSibling);