Fix accuracy bounding boxes being glitchy

index.html

@@ -196,20 +196,9 @@
                     words = words.trim().toLowerCase().replace(/\s+/g, ' ');
                     var coords = FixPhrase.decode(words);
 
-                    drawRectangle(
-                            coords[0] - (coords[2] / 2),
-                            coords[1] - (coords[2] / 2),
-                            coords[0] + (coords[2] / 2),
-                            coords[1] + (coords[2] / 2)
-                            );
-
                     location.hash = "#map";
-                    $('.mapboxgl-popup').remove();
+                    showLocationPopup(coords[0], coords[1], words, coords[2]);
-                    var popup = new mapboxgl.Popup()
+
-                    popup.on('close', clearRectangle);
-                    popup.setLngLat({lat: coords[0], lng: coords[1]});
-                    popup.setHTML("<b>" + words + "</b><br>" + coords[0] + ", " + coords[1]);
-                    popup.addTo(map);
                     var zoomlevel = 18;
                     switch (coords[2]) {
                         case 0.1:
@@ -223,41 +212,6 @@
                 } catch (e) {
                     alert(e);
                 }
-
-                return;
-
-                // Example of accessing the PHP API instead of using JS
-                $.getJSON("lookup.php", {
-                    words: words
-                }, function (resp) {
-                    if (resp.status == "OK") {
-                        location.hash = "#map";
-                        drawRectangle(
-                                resp.coords[0] - (resp.coords[2] / 2),
-                                resp.coords[1] - (resp.coords[2] / 2),
-                                resp.coords[0] + (resp.coords[2] / 2),
-                                resp.coords[1] + (resp.coords[2] / 2)
-                                );
-                        $('.mapboxgl-popup').remove();
-                        var popup = new mapboxgl.Popup()
-                        popup.on('close', clearRectangle);
-                        popup.setLngLat({lat: resp.coords[0], lng: resp.coords[1]});
-                        popup.setHTML("<b>" + resp.words + "</b><br>" + resp.coords[0] + ", " + resp.coords[1]);
-                        popup.addTo(map);
-                        var zoomlevel = 18;
-                        switch (resp.coords[2]) {
-                            case 0.1:
-                                zoomlevel = 10;
-                                break;
-                            case 0.01:
-                                zoomlevel = 13;
-                                break;
-                        }
-                        map.animateMapIn(resp.coords[0], resp.coords[1], zoomlevel);
-                    } else {
-                        alert(resp.msg);
-                    }
-                });
             }
         </script>
     </body>

js/map.js

@@ -5,6 +5,7 @@
  */
 
 var map = null;
+var popup = null;
 function createMap() {
     if (mapboxgl.supported()) {
         $("#mapbox").css("display", "");
@@ -62,6 +63,24 @@ function animateMapIn(latitude, longitude, zoom, heading) {
     map.animateMapIn(latitude, longitude, zoom, heading);
 }
 
+function showLocationPopup(latitude, longitude, words, accuracy) {
+    if (popup != null) {
+        popup.remove();
+        clearRectangle();
+    }
+    popup = new mapboxgl.Popup();
+    popup.setLngLat({lat: latitude, lng: longitude});
+    popup.setHTML("<b><span class='copyonclick'>" + words + "</span></b><br>" + (Math.round(latitude * 10000) / 10000) + ", " + (Math.round(longitude * 10000) / 10000));
+    popup.addTo(map);
+    popup._closeButton.onclick = clearRectangle;
+    drawRectangle(
+            latitude - (accuracy / 2),
+            longitude - (accuracy / 2),
+            latitude + (accuracy / 2),
+            longitude + (accuracy / 2)
+            );
+}
+
 function drawRectangle(fromlat, fromlng, tolat, tolng) {
     var geojson = {
         'type': 'Feature',

js/map_maplibre.js

@@ -26,43 +26,17 @@ function maplibreMap() {
     map.on('click', function (e) {
         var coordinates = e.lngLat;
         try {
-            $('.mapboxgl-popup').remove();
             var words = FixPhrase.encode(coordinates.lat, coordinates.lng);
-            var popup = new mapboxgl.Popup();
+
-            popup.setLngLat(e.lngLat);
-            popup.on('close', clearRectangle);
-            popup.setHTML("<b><span class='copyonclick'>" + words + "</span></b><br>" + (Math.round(coordinates.lat * 10000) / 10000) + ", " + (Math.round(coordinates.lng * 10000) / 10000));
-            popup.addTo(map);
-            drawRectangle(
-                    coordinates.lat - (0.0001 / 2),
-                    coordinates.lng - (0.0001 / 2),
-                    coordinates.lat + (0.0001 / 2),
-                    coordinates.lng + (0.0001 / 2)
-                    );
             map.flyTo({
                 center: e.lngLat,
                 zoom: Math.max(map.getZoom(), 14)
             });
+
+            showLocationPopup(coordinates.lat, coordinates.lng, words, 0.0001);
         } catch (e) {
             alert(e);
         }
-        return;
-
-        // Example of accessing the PHP API instead of using JS
-        $.getJSON("lookup.php", {
-            latitude: coordinates.lat,
-            longitude: coordinates.lng
-        }, function (resp) {
-            $('.mapboxgl-popup').remove();
-            var popup = new mapboxgl.Popup();
-            popup.setLngLat(e.lngLat);
-            popup.setHTML("<b><span class='copyonclick'>" + resp.words + "</span></b><br>" + (Math.round(resp.coords[0] * 10000) / 10000) + ", " + (Math.round(resp.coords[1] * 10000) / 10000));
-            popup.addTo(map);
-            map.flyTo({
-                center: e.lngLat,
-                zoom: Math.max(map.getZoom(), 14)
-            });
-        });
     });
 
     map.addControl(new mapboxgl.NavigationControl({