Go global: worldwide BTC Map sync, marker clustering, response compression
- Sync now pulls every BTC Map place worldwide (~29k live), not just Madeira — dropped BTCMAP_CENTER_LAT/LON/RADIUS_KM entirely. - Incremental via a stored watermark (settings.btcmap_synced_since): only fetches what changed since the last sync, not the whole dataset every time. Handles deletions too (BTC Map delistings correctly evict the local place + cascade its claim/links, not just go unclaimed). - Real bug caught and fixed before it shipped: tried BTC Map's own recommended updated_since+limit pagination first, but their timestamps mix millisecond and whole-second precision, and naive string comparison across that isn't chronologically safe — silently truncated a real sync to ~4,000 of ~42,000 records with no error. Measured the alternative (single unpaginated request) instead: 2-3s for the full dataset, simpler and actually correct. Full writeup in services/btcmap.ts, regression test for the specific bug in services/btcmap.test.ts. - @fastify/compress added — the places list is now tens of thousands of rows, gzip/br/zstd auto-negotiated. - Also fixed while touching dependencies: @fastify/static had a real high-severity path-traversal/auth-bypass advisory (GHSA-pr96-94w5-mx2h et al) affecting the version we were pinned to — bumped to the patched 10.1.2. - Frontend: leaflet.markercluster (raw per-marker rendering doesn't scale to tens of thousands of points), cyberpunk-themed cluster icons to match the existing HUD styling, batch marker insertion (addLayers, not a per-marker addLayer loop) since that's dramatically faster at this scale. Default map view is now world-scale, recentering on the player's location if geolocation is available. - 60 backend tests passing throughout (7 new for the sync rewrite).
This commit is contained in:
Generated
+21
@@ -9,12 +9,14 @@
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"leaflet": "^1.9.4",
|
||||
"leaflet.markercluster": "^1.5.3",
|
||||
"nostr-tools": "^2.24.1",
|
||||
"pinia": "^3.0.0",
|
||||
"vue": "^3.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/leaflet": "^1.9.12",
|
||||
"@types/leaflet.markercluster": "^1.5.6",
|
||||
"@vitejs/plugin-vue": "^6.0.0",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"postcss": "^8.5.0",
|
||||
@@ -1074,6 +1076,16 @@
|
||||
"@types/geojson": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/leaflet.markercluster": {
|
||||
"version": "1.5.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/leaflet.markercluster/-/leaflet.markercluster-1.5.6.tgz",
|
||||
"integrity": "sha512-I7hZjO2+isVXGYWzKxBp8PsCzAYCJBc29qBdFpquOCkS7zFDqUsUvkEOyQHedsk/Cy5tocQzf+Ndorm5W9YKTQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/leaflet": "^1.9"
|
||||
}
|
||||
},
|
||||
"node_modules/@vitejs/plugin-vue": {
|
||||
"version": "6.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.8.tgz",
|
||||
@@ -1862,6 +1874,15 @@
|
||||
"integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==",
|
||||
"license": "BSD-2-Clause"
|
||||
},
|
||||
"node_modules/leaflet.markercluster": {
|
||||
"version": "1.5.3",
|
||||
"resolved": "https://registry.npmjs.org/leaflet.markercluster/-/leaflet.markercluster-1.5.3.tgz",
|
||||
"integrity": "sha512-vPTw/Bndq7eQHjLBVlWpnGeLa3t+3zGiuM7fJwCkiMFq+nmRuG3RI3f7f4N4TDX7T4NpbAXpR2+NTRSEGfCSeA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"leaflet": "^1.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/lilconfig": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
|
||||
|
||||
@@ -10,12 +10,14 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"leaflet": "^1.9.4",
|
||||
"leaflet.markercluster": "^1.5.3",
|
||||
"nostr-tools": "^2.24.1",
|
||||
"pinia": "^3.0.0",
|
||||
"vue": "^3.5.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/leaflet": "^1.9.12",
|
||||
"@types/leaflet.markercluster": "^1.5.6",
|
||||
"@vitejs/plugin-vue": "^6.0.0",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"postcss": "^8.5.0",
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
import { createApp } from 'vue';
|
||||
import { createPinia } from 'pinia';
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
import 'leaflet.markercluster/dist/MarkerCluster.css';
|
||||
import 'leaflet.markercluster/dist/MarkerCluster.Default.css';
|
||||
import App from './App.vue';
|
||||
import './style.css';
|
||||
|
||||
|
||||
@@ -83,3 +83,21 @@ h1, h2, .font-display {
|
||||
.regress-link-green { filter: drop-shadow(0 0 4px #39ff14); }
|
||||
.regress-field-orange { filter: drop-shadow(0 0 6px #ff5f1f); }
|
||||
.regress-field-green { filter: drop-shadow(0 0 6px #39ff14); }
|
||||
|
||||
/* Reskin leaflet.markercluster's default light-green bubble look to match
|
||||
the HUD theme — overrides MarkerCluster.Default.css. */
|
||||
.regress-cluster div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: radial-gradient(circle at 35% 35%, rgba(0, 255, 242, 0.35), rgba(0, 255, 242, 0.12) 70%);
|
||||
border: 2px solid #00fff2;
|
||||
color: #d8fbff;
|
||||
font-family: 'Share Tech Mono', monospace;
|
||||
font-weight: bold;
|
||||
font-size: 12px;
|
||||
box-shadow: 0 0 10px rgba(0, 255, 242, 0.5);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import L from 'leaflet';
|
||||
import 'leaflet.markercluster';
|
||||
import { useAuthStore } from '../stores/auth';
|
||||
import { useGameStore } from '../stores/game';
|
||||
import type { Place } from '../stores/game';
|
||||
@@ -10,7 +11,12 @@ const game = useGameStore();
|
||||
|
||||
const mapEl = ref<HTMLDivElement | null>(null);
|
||||
let map: L.Map | null = null;
|
||||
let markersLayer: L.LayerGroup | null = null;
|
||||
// Clustered — with places synced worldwide (tens of thousands, not the
|
||||
// original Madeira-only ~170), rendering every marker individually would
|
||||
// choke the DOM. leaflet.markercluster groups nearby markers at low zoom
|
||||
// and expands them as you zoom in; each individual marker keeps its own
|
||||
// team-colored portalIcon() once visible.
|
||||
let markersLayer: L.MarkerClusterGroup | null = null;
|
||||
let linksLayer: L.LayerGroup | null = null;
|
||||
let fieldsLayer: L.LayerGroup | null = null;
|
||||
|
||||
@@ -53,13 +59,18 @@ function redraw() {
|
||||
|
||||
const coordsById = new Map(game.places.map((p) => [p.id, p]));
|
||||
|
||||
for (const place of game.places) {
|
||||
// addLayers() batch-inserts in one pass — markercluster's recommended way
|
||||
// to add anything beyond a handful of markers; looping addLayer() one at a
|
||||
// time recalculates the cluster tree on every call and is dramatically
|
||||
// slower at this scale (tens of thousands of places).
|
||||
const markers = game.places.map((place) => {
|
||||
const isSource = place.id === linkSourceId.value;
|
||||
const marker = L.marker([place.lat, place.lon], { icon: portalIcon(place, isSource) });
|
||||
marker.on('click', () => onMarkerClick(place));
|
||||
marker.bindTooltip(place.name || `Place ${place.id}`, { direction: 'top' });
|
||||
markersLayer.addLayer(marker);
|
||||
}
|
||||
return marker;
|
||||
});
|
||||
markersLayer.addLayers(markers);
|
||||
|
||||
for (const link of game.links) {
|
||||
const from = coordsById.get(link.from_place_id);
|
||||
@@ -156,7 +167,9 @@ const greenScore = computed(() => game.scores.find((s) => s.team === 'green'));
|
||||
|
||||
onMounted(async () => {
|
||||
if (mapEl.value) {
|
||||
map = L.map(mapEl.value, { zoomControl: false }).setView([32.7607, -16.9595], 12);
|
||||
// World view by default now that places are synced globally, not just
|
||||
// Madeira — falls back to this if geolocation isn't available/granted.
|
||||
map = L.map(mapEl.value, { zoomControl: false }).setView([20, 0], 2);
|
||||
L.control.zoom({ position: 'bottomright' }).addTo(map);
|
||||
L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png', {
|
||||
attribution: '© OpenStreetMap contributors © CARTO',
|
||||
@@ -165,7 +178,25 @@ onMounted(async () => {
|
||||
}).addTo(map);
|
||||
fieldsLayer = L.layerGroup().addTo(map);
|
||||
linksLayer = L.layerGroup().addTo(map);
|
||||
markersLayer = L.layerGroup().addTo(map);
|
||||
markersLayer = L.markerClusterGroup({
|
||||
maxClusterRadius: 60,
|
||||
spiderfyOnMaxZoom: true,
|
||||
iconCreateFunction: (cluster) => {
|
||||
const count = cluster.getChildCount();
|
||||
const size = count < 100 ? 34 : count < 1000 ? 42 : 50;
|
||||
return L.divIcon({
|
||||
className: 'regress-cluster',
|
||||
html: `<div style="width:${size}px;height:${size}px;">${count}</div>`,
|
||||
iconSize: [size, size],
|
||||
});
|
||||
},
|
||||
}).addTo(map);
|
||||
|
||||
navigator.geolocation?.getCurrentPosition(
|
||||
(pos) => map?.setView([pos.coords.latitude, pos.coords.longitude], 13),
|
||||
() => {}, // silently keep the world view if denied/unavailable
|
||||
{ timeout: 5000 },
|
||||
);
|
||||
}
|
||||
await game.refreshAll();
|
||||
redraw();
|
||||
|
||||
Reference in New Issue
Block a user