Update index.html

index.html

@@ -34,7 +34,8 @@
         }
 
         .leaflet-tile-container img {
-            opacity: 0.3 !important;
+            opacity: 0.6 !important;
+            filter: grayscale(100%) brightness(0) invert(1) !important;
         }
 
         .map .mask {
@@ -42,7 +43,7 @@
             height: 100%;
             background-image: url("./cloud.png");
             mix-blend-mode: lighten;
-            animation: 5s linear 0s magic forwards;
+            animation: 4s linear 0s magic forwards;
             position: absolute;
             top: 0;
             left: 0;
@@ -335,17 +336,24 @@
                     icon: createUserIcon(username)
                 }).addTo(map);
                 map.setView([latitude, longitude], 16);
+                lastPosition = newPosition;
             } else {
+                if (lastPosition) {
+                    const distance = map.distance(
+                        [lastPosition.lat, lastPosition.lng],
+                        [latitude, longitude]
+                    );
+                    
+                    // Only create footprints if moved more than 2 meters
+                    if (distance > 2) {
+                        const angle = getAngle(lastPosition, newPosition);
+                        placeFootprint(newPosition, angle);
+                        lastPosition = newPosition;
+                    }
+                }
                 userMarker.setLatLng([latitude, longitude]);
             }
 
-            if (lastPosition) {
-                const angle = getAngle(lastPosition, newPosition);
-                placeFootprint(newPosition, angle);
-            }
-
-            lastPosition = newPosition;
-
             socket.emit('update_location', {
                 username: username,
                 location: newPosition