user01/MapAssignFlag
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Clean up marker tooltip: show only name in speech bubble, circle shows number

Browse Source 
- Remove number duplication from tooltip (number is on circle icon)
- Change tooltip direction from top to right
- Only show tooltip when flag.name exists
This commit is contained in:
user01
2026-05-15 18:53:33 +09:00
parent 85a253f9a6
commit a801274e5f
1 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
index.html
View File

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