From a801274e5fbd3849233f63f98334da247e66647f Mon Sep 17 00:00:00 2001
From: user01 <nomalaid@gmail.com>
Date: Fri, 15 May 2026 18:53:33 +0900
Subject: [PATCH] Clean up marker tooltip: show only name in speech bubble,
 circle shows number

- Remove number duplication from tooltip (number is on circle icon)
- Change tooltip direction from top to right
- Only show tooltip when flag.name exists
---
 index.html | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/index.html b/index.html
index 07a38ac..28730d8 100644
--- a/index.html
+++ b/index.html
@@ -490,7 +490,7 @@ function renderList() {
 
   el.innerHTML = '';
   filtered.forEach((flag) => {
-    const globalIdx = flags.indexOf(flag) + 1;
+    const displayIdx = flag.number || flags.indexOf(flag) + 1;
     const isSelected = selectedFlagId === flag.id;
     const li = document.createElement('li');
     li.className = 'flag-item' + (isSelected ? ' selected' : '');
@@ -507,7 +507,7 @@ function renderList() {
     }
 
     header.innerHTML = `
-      <span class="idx">${globalIdx}</span>
+      <span class="idx">${displayIdx}</span>
       <span class="status-dot ${flag.placed ? 'placed' : 'unplaced'}"></span>
       <div class="info">
         <div class="name">${esc(flag.name)}</div>
@@ -592,9 +592,9 @@ map.on('click', (e) => {
   if (!flag || flag.placed) return;
 
   const { lat, lng } = e.latlng;
-  const idx = flags.indexOf(flag) + 1;
-  const marker = L.marker([lat, lng], { icon: makeNumIcon(idx), draggable: true }).addTo(map);
-  marker.bindTooltip(`${flag.name}${flag.number ? ' (' + flag.number + ')' : ''}`, { direction: 'top' });
+  const displayNum = flag.number || flags.indexOf(flag) + 1;
+  const marker = L.marker([lat, lng], { icon: makeNumIcon(displayNum), draggable: true }).addTo(map);
+  if (flag.name) marker.bindTooltip(esc(flag.name), { direction: 'right', offset: [10, 0] });
   marker.on('dragend', () => {
     const p = marker.getLatLng(); flag.lat = p.lat; flag.lng = p.lng;
     scheduleGeocode(flag); renderList();
@@ -644,9 +644,9 @@ document.getElementById('file-input').addEventListener('change', async (e) => {
     let lat = parseFloat(row.Latitude || row.latitude || row.위도);
     let lng = parseFloat(row.Longitude || row.longitude || row.경도);
     if (!isNaN(lat) && !isNaN(lng)) {
-      const idx = flags.indexOf(flag) + 1;
-      const marker = L.marker([lat, lng], { icon: makeNumIcon(idx), draggable: true }).addTo(map);
-      marker.bindTooltip(`${flag.name}${flag.number ? ' (' + flag.number + ')' : ''}`, { direction: 'top' });
+      const displayNum = flag.number || flags.indexOf(flag) + 1;
+      const marker = L.marker([lat, lng], { icon: makeNumIcon(displayNum), draggable: true }).addTo(map);
+      if (flag.name) marker.bindTooltip(esc(flag.name), { direction: 'right', offset: [10, 0] });
       marker.on('dragend', () => {
         const p = marker.getLatLng(); flag.lat = p.lat; flag.lng = p.lng;
         scheduleGeocode(flag); renderList();
@@ -673,22 +673,22 @@ document.getElementById('file-input').addEventListener('change', async (e) => {
 document.getElementById('template-btn').addEventListener('click', () => {
   const wb = XLSX.utils.book_new();
   XLSX.utils.book_append_sheet(wb, XLSX.utils.json_to_sheet([
-    { Name: 'Flag 1', Number: 'A001' },
-    { Name: 'Flag 2', Number: 'A002' },
-    { Name: 'Flag 3', Number: 'A003' },
+    { Number: 'A001', Name: 'Flag 1' },
+    { Number: 'A002', Name: 'Flag 2' },
+    { Number: 'A003', Name: 'Flag 3' },
   ]), 'Flags');
   XLSX.writeFile(wb, 'flag_template.xlsx');
 });
 
 document.getElementById('export-btn').addEventListener('click', () => {
   const rows = flags.map(f => ({
-    Name: f.name, Number: f.number,
+    Number: f.number, Name: f.name,
     Status: f.placed ? 'Placed' : 'Unplaced',
     Latitude: f.lat ?? '', Longitude: f.lng ?? '', Address: f.address ?? '',
   }));
   const wb = XLSX.utils.book_new();
   const ws = XLSX.utils.json_to_sheet(rows);
-  ws['!cols'] = [{ wch: 20 }, { wch: 12 }, { wch: 10 }, { wch: 12 }, { wch: 12 }, { wch: 60 }];
+  ws['!cols'] = [{ wch: 12 }, { wch: 20 }, { wch: 10 }, { wch: 12 }, { wch: 12 }, { wch: 60 }];
   XLSX.utils.book_append_sheet(wb, ws, 'Flags');
   XLSX.writeFile(wb, 'flag_export.xlsx');
 });