djsundog
/
AllWhomstWander
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adds distance to marker estimation, resizes nearby (within 20 meters) marker to be 48px instead of 20px

This commit is contained in:
Sundog Jones 2024-06-24 12:19:46 -04:00
parent 7903174d9e
commit 8b21bd9bfb
1 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/webserver/play/index.php
View File

@ -34,7 +34,6 @@
z-index: 99999999; z-index: 99999999;
} }
#debug-view { #debug-view {
display: none;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 0; left: 0;
@ -50,6 +49,10 @@
top: 0; top: 0;
left: 0; left: 0;
} }
.big-marker {
width: 48px !important;
height: 48px !important;
}
</style> </style>
</head> </head>
<body> <body>
@ -61,9 +64,12 @@
var globalPosition = new THREE.Vector3(); var globalPosition = new THREE.Vector3();
var globalRotation = new THREE.Quaternion(); var globalRotation = new THREE.Quaternion();
var globalMap = L.map('map-view').setView([34.695068, -84.482468], globalZoom); var globalMap = L.map('map-view').setView([34.68825, -84.47705], globalZoom);
var globalMarkers = [];
var currentView = "map"; var currentView = "map";
var autocenter = true;
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 22, maxZoom: 22,
@ -73,7 +79,7 @@
// generic monster svg icon for now // generic monster svg icon for now
var monsterIcon = L.icon({ var monsterIcon = L.icon({
iconUrl: 'monster.svg', iconUrl: 'monster.svg',
iconSize: [48, 48] iconSize: [20, 20]
}); });
function toggleView() { function toggleView() {
@ -106,10 +112,24 @@ AFRAME.registerComponent('camera-logger', {
navigator.geolocation.getCurrentPosition((position) => { navigator.geolocation.getCurrentPosition((position) => {
worldPos.x = position.coords.latitude; worldPos.x = position.coords.latitude;
worldPos.z = position.coords.longitude; worldPos.z = position.coords.longitude;
globalMap.panTo([position.coords.latitude, position.coords.longitude]); if (autocenter) { globalMap.panTo([position.coords.latitude, position.coords.longitude]); }
var currentPosition = L.latLng({ lat: position.coords.latitude, lng: position.coords.longitude});
globalMarkers.forEach((marker) => {
var markerPosition = marker._latlng;
var currentDistance = globalMap.distance(currentPosition, markerPosition);
if (currentDistance < 20) {
L.DomUtil.addClass(marker._icon, 'big-marker');
L.DomUtil.removeClass(marker._icon, 'small-marker');
} else {
L.DomUtil.removeClass(marker._icon, 'big-marker');
L.DomUtil.addClass(marker._icon, 'small-marker');
}
});
document.querySelector('#debug-view').innerHTML = "<p>Time: " + this.data.seconds document.querySelector('#debug-view').innerHTML = "<p>Time: " + this.data.seconds
+ "</p><p>Camera Position: (" + worldPos.x.toFixed(6) + ", " + worldPos.y.toFixed(2) + ", " + worldPos.z.toFixed(6) + "</p>"; + "</p><p>Camera Position: (" + worldPos.x.toFixed(6) + ", " + worldPos.y.toFixed(2) + ", " + worldPos.z.toFixed(6) + "</p>"
+ "</p><p>Distance to marker[0]: " + globalMap.distance(currentPosition, globalMarkers[0]._latlng).toFixed(1) + " meters</p>";
}); });
}, },
@ -144,7 +164,7 @@ AFRAME.registerComponent('camera-logger', {
<a-text look-at="[gps-new-camera]" scale="5 5 5" align="center" text="value: <?= $poi['name'] . "\n" . $npc['name'] ?>;"></a-text> <a-text look-at="[gps-new-camera]" scale="5 5 5" align="center" text="value: <?= $poi['name'] . "\n" . $npc['name'] ?>;"></a-text>
</a-entity> </a-entity>
<script language='javascript'> <script language='javascript'>
L.marker([<?= $poi['latitude'] ?>, <?= $poi['longitude'] ?>], {icon: monsterIcon, alt: "Map marker for <?= $npc['name'] ?> located at <?= $poi['name'] ?>"}).addTo(globalMap).bindPopup("<div class='poi-popup'><img src='<?= $npc['image_path'] === "" ? "images/default.png" : $npc['image_path'] ?>' class='npc-image' /><?= $npc['name'] ?> has been spotted at <?= $poi['name'] ?></div>"); globalMarkers.push(L.marker([<?= $poi['latitude'] ?>, <?= $poi['longitude'] ?>], {icon: monsterIcon, alt: "Map marker for <?= $npc['name'] ?> located at <?= $poi['name'] ?>"}).addTo(globalMap).bindPopup("<div class='poi-popup'><img src='<?= $npc['image_path'] === "" ? "images/default.png" : $npc['image_path'] ?>' class='npc-image' /><?= $npc['name'] ?> has been spotted at <?= $poi['name'] ?></div>"));
</script> </script>
<?php <?php
} }