first pass at POIs with items being on the map

This commit is contained in:
Sundog Jones 2024-07-03 10:52:10 -04:00
parent f2c1cf16f7
commit 44343b5cff
1 changed files with 26 additions and 0 deletions

View File

@ -102,6 +102,11 @@
height: 100%;
text-align: center;
}
.item-image {
position: relative;
width: 120px;
height: 120px;
}
</style>
</head>
<body>
@ -138,6 +143,11 @@
iconUrl: 'monster.svg',
iconSize: [20, 20]
});
// generic item icon for now
var itemIcon = L.icon({
iconUrl: 'item.svg',
iconSize: [20, 20]
});
function goToMapMode() {
document.getElementById("ar-view").style.display = "none";
@ -269,6 +279,22 @@ fetch("https://wander.reclaim.technology/webserver/api/me.php").then((response)
<?php
}
}
$poi_item_results = $conn->query('SELECT pi.poi_id AS poi_id, pi.item_id AS item_id, p.name AS poi_name, p.latitude AS latitude, p.longitude AS longitude, p.description AS poi_description, i.name AS item_name, i.description AS item_description, p.map_marker_icon AS map_marker_icon FROM "POI-Items" pi JOIN POIs p ON pi.poi_id = p.id JOIN Items i ON pi.item_id = i.id WHERE p.is_active = 1 AND i.is_active = 1');
if ($poi_item_results) {
while ($poi_item = $poi_item_results->fetchArray()) {
?>
<a-entity gps-new-entity-place="latitude: <?= $poi_item['latitude'] ?>; longitude: <?= $poi_item['longitude'] ?>;">
<a-gltf-model src="<?= trim($poi_item['model_path']) === "" ? "models/head.gltf" : $poi_item['model_path'] ?>" position="0 0 0" rotation="0 0 0"></a-gltf-model>
<a-text look-at="[gps-new-camera]" scale="5 5 5" align="center" text="value: <?= $poi_item['poi_name'] . "\n" . $poi_item['item_name'] ?>;"></a-text>
</a-entity>
<script language='javascript'>
console.log("adding marker for <?= $poi_item['item_name'] ?> at <?= $poi_item['poi_name'] ?>");
globalMarkers.push(L.marker([<?= $poi_item['latitude'] ?>, <?= $poi_item['longitude'] ?>], {icon: itemIcon, alt: "Map marker for <?= $poi_item['item_name'] ?>s located at <?= $poi_item['poi_name'] ?>"}).addTo(globalMap).bindPopup("<div class='poi-popup'><img src='images/item_default.png' class='item-image' /><?= $poi_item['item_name'] ?>s have been spotted at <?= $poi_item['poi_name'] ?></div>"));
</script>
<?php
}
}
?>
</a-scene>
</div>