Netsyms/fixphrase.com
2
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix accuracy bounding boxes being glitchy

Browse Source
This commit is contained in:
Skylar Ittner 2021-11-05 21:04:48 -06:00
parent c2683b8b99
commit 32b277bff6
3 changed files with 24 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
index.html
View File

@ -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("<b>" + words + "</b><br>" + 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("<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>

19
js/map.js
View File

@ -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',

32
js/map_maplibre.js
View File

@ -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({