diff --git a/js/main.js b/js/main.js index dd32ea0..76ef9f0 100644 --- a/js/main.js +++ b/js/main.js @@ -483,6 +483,10 @@ const PLAYBACK_MIN_VISIBLE_STEPS = 80; const PLAYBACK_TICK_MS = 160; const STAY_MIN_SECONDS = 10 * 60; const STAY_GROUP_RADIUS_M = 100; +const FACE_MARKER_SIZE = 60; +const CURRENT_STAY_BADGE_WIDTH = 140; +const CURRENT_STAY_BADGE_HEIGHT = 28; +const CURRENT_STAY_BADGE_GAP = 8; const FALLBACK_BACK_TARGET = 'https://chaegeon.com/'; const BACK_HISTORY_KEY = 'chaegeon.backHistory.v1'; @@ -2228,7 +2232,7 @@ function moveSelectedHistoryPoint(index, pan = false, syncSlider = true) { } } -function createFaceMarkerIcon(size = 60) { +function createFaceMarkerIcon(size = FACE_MARKER_SIZE) { const half = size / 2; return { content: `
`, @@ -2237,16 +2241,11 @@ function createFaceMarkerIcon(size = 60) { } function createCurrentStayIcon(text) { - const wrapStyle = [ - 'position:relative', - 'width:0', - 'height:0', - 'pointer-events:none', - 'transform:translate(-50%,-82px)' - ].join(';'); + const anchorX = CURRENT_STAY_BADGE_WIDTH / 2; + const anchorY = (FACE_MARKER_SIZE / 2) + CURRENT_STAY_BADGE_GAP + CURRENT_STAY_BADGE_HEIGHT; return { - content: `
${text}
`, - anchor: new naver.maps.Point(0, 0) + content: `
${text}
`, + anchor: new naver.maps.Point(anchorX, anchorY) }; }