diff --git a/src/webserver/play/index.php b/src/webserver/play/index.php
index e69bbfa..5f088a3 100644
--- a/src/webserver/play/index.php
+++ b/src/webserver/play/index.php
@@ -34,7 +34,6 @@
             z-index: 99999999;
 	}
         #debug-view {
-	    display: none;
 	    position: absolute;
             top: 50%;
             left: 0;
@@ -49,6 +48,10 @@
 	    width: 100%;
             top: 0;
             left: 0;
+	}
+        .big-marker {
+            width: 48px !important;
+            height: 48px !important;
         }
     </style>
 </head>
@@ -61,9 +64,12 @@
     var globalPosition = new THREE.Vector3();
     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 autocenter = true;
 
     L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
         maxZoom: 22,
@@ -73,7 +79,7 @@
     // generic monster svg icon for now
     var monsterIcon = L.icon({
         iconUrl: 'monster.svg',
-	iconSize: [48, 48]
+	iconSize: [20, 20]
     });
 
     function toggleView() {
@@ -106,10 +112,24 @@ AFRAME.registerComponent('camera-logger', {
     navigator.geolocation.getCurrentPosition((position) => {
         worldPos.x = position.coords.latitude;
         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 
-                + "</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-entity>
 		<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>
                 <?php
             }