Customize your GeoGuessr path visualization
`;
btn.onclick = showModal;
headerRight.insertBefore(btn, headerRight.firstChild);
injectUI();
}
};
const uiObserver = new MutationObserver(() => {
injectButton();
if (resultShown() && capturedMap) {
const currentState = `true-${isGameFinished()}`;
if (hasRenderedResult !== currentState) {
setTimeout(() => {
if (capturedMap) onMapUpdate(capturedMap);
}, 200);
}
}
});
uiObserver.observe(document.body, { childList: true, subtree: true });
const RDP_EPSILON = 2e-5;
const TELEPORT_DISTANCE = 120;
const getDistMeters = (p1, p2) => {
const R = 6371e3;
const dLat = ((p2.lat - p1.lat) * Math.PI) / 180;
const dLng = ((p2.lng - p1.lng) * Math.PI) / 180;
const a =
Math.sin(dLat / 2) ** 2 +
Math.cos((p1.lat * Math.PI) / 180) *
Math.cos((p2.lat * Math.PI) / 180) *
Math.sin(dLng / 2) ** 2;
return R * (2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)));
};
const findPerpDist = (p, l1, l2) => {
if (l1.lat === l2.lat && l1.lng === l2.lng)
return Math.sqrt((p.lat - l1.lat) ** 2 + (p.lng - l1.lng) ** 2);
const num = Math.abs(
(l2.lng - l1.lng) * p.lat -
(l2.lat - l1.lat) * p.lng +
l2.lat * l1.lng -
l2.lng * l1.lat,
);
const den = Math.sqrt((l2.lng - l1.lng) ** 2 + (l2.lat - l1.lat) ** 2);
return num / den;
};
const rdp = (points, epsilon) => {
if (points.length <= 2) return points;
let dmax = 0;
let index = 0;
const end = points.length - 1;
for (let i = 1; i < end; i++) {
const d = findPerpDist(points[i], points[0], points[end]);
if (d > dmax) {
index = i;
dmax = d;
}
}
if (dmax > epsilon) {
const res1 = rdp(points.slice(0, index + 1), epsilon);
const res2 = rdp(points.slice(index), epsilon);
return res1.slice(0, res1.length - 1).concat(res2);
} else {
return [points[0], points[end]];
}
};
const saveToStorage = (key, value) => {
const val = JSON.stringify(value);
while (JSON.stringify(localStorage).length + val.length > 5242880) {
const ts = JSON.parse(localStorage.getItem("timestamps") || "{}");
const oldest = Object.entries(ts).sort((a, b) => a[1] - b[1])[0];
if (!oldest) break;
delete ts[oldest[0]];
Object.keys(localStorage).forEach((k) => {
if (k.startsWith(oldest[0])) localStorage.removeItem(k);
});
localStorage.setItem("timestamps", JSON.stringify(ts));
}
localStorage.setItem(key, val);
};
const decodePath = (encoded) => {
if (window.google?.maps?.geometry?.encoding) {
return window.google.maps.geometry.encoding.decodePath(encoded);
}
const len = encoded.length;
let index = 0;
const array = [];
let lat = 0;
let lng = 0;
while (index < len) {
let b;
let shift = 0;
let result = 0;
do {
b = encoded.charCodeAt(index++) - 63;
result |= (b & 31) << shift;
shift += 5;
} while (b >= 32);
const dlat = result & 1 ? ~(result >> 1) : result >> 1;
lat += dlat;
shift = 0;
result = 0;
do {
b = encoded.charCodeAt(index++) - 63;
result |= (b & 31) << shift;
shift += 5;
} while (b >= 32);
const dlng = result & 1 ? ~(result >> 1) : result >> 1;
lng += dlng;
array.push(new window.google.maps.LatLng(lat * 1e-5, lng * 1e-5));
}
return array;
};
const interpolatePath = (p1, p2, fraction) => {
if (window.google?.maps?.geometry?.spherical) {
return window.google.maps.geometry.spherical.interpolate(
p1,
p2,
fraction,
);
}
const lat = p1.lat() + (p2.lat() - p1.lat()) * fraction;
const lng = p1.lng() + (p2.lng() - p1.lng()) * fraction;
return new window.google.maps.LatLng(lat, lng);
};
const markers = [];
let inGame = false;
let route = [];
let mapState = "";
let lastObservedSpawn = null;
const isGamePage = () => {
const path = location.pathname;
return (
path.includes("/challenge/") ||
path.includes("/results/") ||
path.includes("/game/") ||
path.includes("/duels/") ||
path.includes("/multiplayer") ||
path.includes("/summary")
);
};
const resultShown = () => {
if (document.querySelector('[data-qa="result-view-bottom"]')) return true;
if (document.querySelector('[data-qa="round-result"]')) return true;
if (document.querySelector('[class*="round-score_root"]')) return true;
if (location.href.includes("results") || location.href.includes("summary"))
return true;
return false;
};
const isGameFinished = () => {
if (location.href.includes("results") || location.href.includes("summary"))
return true;
if (
document.querySelector('[data-qa="play-again-button"]') ||
document.querySelector('[class*="play-again-button"]')
)
return true;
return false;
};
const isSpectating = () => {
if (
document.querySelector('[class*="post-guess-player-spectator_root"]') ||
location.href.includes("/replay")
) {
return true;
}
return false;
};
const getGameID = () => {
const urlMatch = location.href.match(/\w{15,}/);
if (urlMatch && !location.pathname.includes("multiplayer")) {
return urlMatch[0];
}
if (window.__GPL_GAME_ID) {
return window.__GPL_GAME_ID;
}
if (urlMatch) return urlMatch[0];
return "unknown_game";
};
const getRoundNumber = () => {
const spEl = document.querySelector("[data-qa=round-number] :nth-child(2)");
if (spEl) return parseInt(spEl.innerHTML);
if (window.__WS_ROUND) return window.__WS_ROUND;
return 1;
};
const onMove = (sv) => {
const isMoving = sv.get("clickToGo");
if (!isGamePage() || !isMoving) return;
const lat = sv.getPosition()?.lat();
const lng = sv.getPosition()?.lng();
if (lat === void 0 || lng === void 0) return;
const pos = { lat, lng };
if (resultShown()) {
lastObservedSpawn = pos;
}
if (isSpectating()) return;
if (!inGame) {
inGame = true;
route = lastObservedSpawn ? [[lastObservedSpawn]] : [[]];
}
const currentSeg = route[route.length - 1];
const last = currentSeg[currentSeg.length - 1];
if (last && getDistMeters(last, pos) > TELEPORT_DISTANCE) {
route.push([]);
}
route[route.length - 1].push(pos);
};
const onMapUpdate = (map) => {
const google = window.google;
if (!isGamePage()) {
return;
}
const actResultShown = resultShown();
if (actResultShown) {
const isFinished = isGameFinished();
const resultState = `${actResultShown}-${isFinished}`;
if (hasRenderedResult === resultState) {
return;
}
hasRenderedResult = resultState;
} else {
hasRenderedResult = "";
}
const newState = `${inGame}-${actResultShown}-${isGameFinished()}-${getRoundNumber()}`;
if (newState === mapState) return;
mapState = newState;
markers.forEach((m) => m.setMap(null));
markers.length = 0;
if (actResultShown) {
const settings = state;
const currentGameID = getGameID();
if (inGame) {
const rNum = getRoundNumber();
const saveID = currentGameID + "-" + rNum;
const simplifiedRoute = route.map((segment) =>
rdp(segment, RDP_EPSILON),
);
const encoded = simplifiedRoute.map((p) =>
google.maps.geometry.encoding.encodePath(
p.map((x) => new google.maps.LatLng(x)),
),
);
saveToStorage(saveID, encoded);
const ts = JSON.parse(localStorage.timestamps || "{}");
ts[currentGameID] = Date.now();
localStorage.timestamps = JSON.stringify(ts);
inGame = false;
}
const keysToShow = isGameFinished()
? Object.keys(localStorage).filter(
(k) => k.startsWith(currentGameID) && !k.includes("timestamp"),
)
: [currentGameID + "-" + getRoundNumber()];
keysToShow.forEach((k) => {
const raw = localStorage.getItem(k);
if (raw) {
const segs = JSON.parse(raw).map((x) => decodePath(x));
const totalSegments = segs.reduce((a, b) => a + (b.length - 1), 0);
const upscaleFactor = Math.max(
1,
Math.ceil(50 / (totalSegments || 1)),
);
let pointsDone = 0;
segs.forEach((path) => {
for (let i = 0; i < path.length - 1; i++) {
const p1 = path[i];
const p2 = path[i + 1];
for (let j = 0; j < upscaleFactor; j++) {
const subP1 =
upscaleFactor === 1
? p1
: interpolatePath(p1, p2, j / upscaleFactor);
const subP2 =
upscaleFactor === 1
? p2
: interpolatePath(p1, p2, (j + 1) / upscaleFactor);
const t = pointsDone / (totalSegments * upscaleFactor || 1);
const color =
settings.style === "solid"
? settings.solidColor
: t < 0.5
? interpolateHSL(
settings.gradStart,
settings.gradMiddle,
t * 2,
)
: interpolateHSL(
settings.gradMiddle,
settings.gradEnd,
(t - 0.5) * 2,
);
markers.push(
new google.maps.Polyline({
path: [subP1, subP2],
strokeColor: color,
strokeWeight: settings.thickness,
geodesic: true,
zIndex: Math.floor(t * 100),
clickable: false,
}),
);
pointsDone++;
}
}
});
}
});
markers.forEach((m) => m.setMap(map));
}
};
const setupMVCInterceptor = () => {
const timer = setInterval(() => {
const MVCObject = window.google?.maps?.MVCObject;
if (!MVCObject) return;
clearInterval(timer);
if (window.__GPL_HIJACKED) return;
window.__GPL_HIJACKED = true;
const originalSet = MVCObject.prototype.set;
MVCObject.prototype.set = function (key, value) {
const res = originalSet.apply(this, [key, value]);
if (this.__GPL_TRACKED) return res;
if (
typeof this.setZoom === "function" &&
typeof this.getBounds === "function"
) {
this.__GPL_TRACKED = true;
capturedMap = this;
this.addListener("idle", () => onMapUpdate(this));
if (this.getBounds()) {
onMapUpdate(this);
}
} else if (
typeof this.setPano === "function" &&
typeof this.getPosition === "function"
) {
this.__GPL_TRACKED = true;
this.addListener("position_changed", () => onMove(this));
if (this.getPosition()) {
onMove(this);
}
}
return res;
};
}, 10);
};
setupMVCInterceptor();
})();