diff --git a/index.html b/index.html index 9afd0aa..6a35b40 100644 --- a/index.html +++ b/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(); - var popup = new mapboxgl.Popup() - popup.on('close', clearRectangle); - popup.setLngLat({lat: coords[0], lng: coords[1]}); - popup.setHTML("" + words + "
" + coords[0] + ", " + coords[1]); - popup.addTo(map); + showLocationPopup(coords[0], coords[1], words, coords[2]); + 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("" + resp.words + "
" + 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); - } - }); } diff --git a/js/map.js b/js/map.js index 85c92c0..6ce9996 100644 --- a/js/map.js +++ b/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("" + words + "
" + (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', diff --git a/js/map_maplibre.js b/js/map_maplibre.js index 1695d99..3c9a78b 100644 --- a/js/map_maplibre.js +++ b/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("" + words + "
" + (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("" + resp.words + "
" + (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({