mudhorn/meshmap.net
1
0
Fork 0
mirror of https://github.com/brianshea2/meshmap.net.git synced 2025-03-05 21:00:01 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

better tooltips

Browse source
This commit is contained in:
root 2024-09-19 01:39:52 +00:00
parent 8f8de43e88
commit c352ce1490
1 changed files with 12 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
website/index.html
View file

@ -65,7 +65,7 @@
.dark .leaflet-shadow-pane { .dark .leaflet-shadow-pane {
display: none; display: none;
} }
.dark .leaflet-popup-content-wrapper { .dark :is(.leaflet-tooltip, .leaflet-popup-content-wrapper, .leaflet-popup-tip) {
box-shadow: none; box-shadow: none;
} }
.leaflet-top { .leaflet-top {
@ -103,7 +103,7 @@
const zoomLevelNode = 10 const zoomLevelNode = 10
const markersByNode = {} const markersByNode = {}
const neighborsByNode = {} const neighborsByNode = {}
const nodesBySearchTitle = {} const nodesBySearchString = {}
const precisionMargins = [ const precisionMargins = [
11939464, 5969732, 2984866, 1492433, 746217, 373108, 186554, 93277, 11939464, 5969732, 2984866, 1492433, 746217, 373108, 186554, 93277,
46639, 23319, 11660, 5830, 2915, 1457, 729, 364, 46639, 23319, 11660, 5830, 2915, 1457, 729, 364,
@ -154,10 +154,11 @@
// add search control // add search control
map.addControl(new L.Control.Search({ map.addControl(new L.Control.Search({
layer: markers, layer: markers,
propertyName: 'searchString',
initial: false, initial: false,
position: 'topleft', position: 'topleft',
marker: false, marker: false,
moveToLocation: (_, title) => showNode(nodesBySearchTitle[title]), moveToLocation: (_, s) => showNode(nodesBySearchString[s]),
})) }))
// add geolocation control // add geolocation control
L.easyButton({ L.easyButton({
@ -233,6 +234,7 @@
}) })
} }
const position = L.latLng([latitude, longitude].map(x => x / 10000000)) const position = L.latLng([latitude, longitude].map(x => x / 10000000))
const tooltipContent = `${html(longName)} (${html(shortName)}) ${since(Math.max(...Object.values(seenBy)))}`
const popupContent = ` const popupContent = `
<div class="title">${html(longName)} (${html(shortName)})</div> <div class="title">${html(longName)} (${html(shortName)})</div>
<div>${nodeLink(nodeNum, id)} | ${html(role)} | ${html(hwModel)}</div> <div>${nodeLink(nodeNum, id)} | ${html(role)} | ${html(hwModel)}</div>
@ -283,7 +285,7 @@
return return
} }
const neighborId = `!${Number(neighborNum).toString(16)}` const neighborId = `!${Number(neighborNum).toString(16)}`
const tooltipContent = ` const neighborContent = `
<table><tbody> <table><tbody>
<tr><th>Neighbor</th><td>${html(id)} &#60;-&#62; ${html(neighborId)}</td></tr> <tr><th>Neighbor</th><td>${html(id)} &#60;-&#62; ${html(neighborId)}</td></tr>
<tr><th>Distance</th><td>${Math.round(map.distance(position, markersByNode[neighborNum].getLatLng())).toLocaleString()} m</td></tr> <tr><th>Distance</th><td>${Math.round(map.distance(position, markersByNode[neighborNum].getLatLng())).toLocaleString()} m</td></tr>
@ -292,15 +294,16 @@
</tbody></table> </tbody></table>
` `
L.polyline([position, markersByNode[neighborNum].getLatLng()], {weight: 4}) L.polyline([position, markersByNode[neighborNum].getLatLng()], {weight: 4})
.bindTooltip(tooltipContent, {sticky: true, opacity: 1.0}) .bindTooltip(neighborContent, {sticky: true, opacity: 1.0})
.on('click', () => showNode(neighborNum)) .on('click', () => showNode(neighborNum))
.addTo(detailsLayer) .addTo(detailsLayer)
}) })
} }
if (markersByNode[nodeNum] === undefined) { if (markersByNode[nodeNum] === undefined) {
const title = `${longName} (${shortName}) ${id}` const searchString = `${longName} (${shortName}) ${id}`
nodesBySearchTitle[title] = nodeNum nodesBySearchString[searchString] = nodeNum
markersByNode[nodeNum] = L.marker(position, {alt: 'Node', title}) markersByNode[nodeNum] = L.marker(position, {alt: 'Node', searchString})
.bindTooltip(tooltipContent)
.bindPopup(popupContent, {maxWidth: 500}) .bindPopup(popupContent, {maxWidth: 500})
.on('popupopen', () => { .on('popupopen', () => {
history.replaceState(null, '', `#${nodeNum}`) history.replaceState(null, '', `#${nodeNum}`)
@ -308,6 +311,7 @@
}) })
.addTo(markers) .addTo(markers)
} else { } else {
markersByNode[nodeNum].setTooltipContent(tooltipContent)
markersByNode[nodeNum].setPopupContent(popupContent) markersByNode[nodeNum].setPopupContent(popupContent)
markersByNode[nodeNum].setLatLng(position) markersByNode[nodeNum].setLatLng(position)
if (markersByNode[nodeNum].isPopupOpen()) { if (markersByNode[nodeNum].isPopupOpen()) {