fix(atlas): cursor-following tooltips and removing countries from search

Two related Atlas fixes:

- Country tooltips were bound with sticky:false, which anchors them at the
  feature's bounds centre. For countries with overseas territories (e.g.
  France) that centre sits far out in the ocean, so the tooltip popped up
  nowhere near the area being hovered. Make them sticky so they track the
  cursor.

- Selecting an already-visited country from the search bar always opened the
  "Mark / Bucket" dialog, with no way to remove it. Tiny countries like
  Vatican City or Singapore are hard to hit on the map, so search was the only
  way in. Mirror the map-click behaviour: a manually-marked country opens the
  Remove confirmation, a trip/place-backed one opens its detail.
This commit is contained in:
Maurice
2026-06-17 15:23:54 +02:00
parent f524909008
commit b3fc5411ca
+19 -2
View File
@@ -340,7 +340,10 @@ export function useAtlas() {
</div> </div>
</div>` </div>`
layer.bindTooltip(tooltipHtml, { layer.bindTooltip(tooltipHtml, {
sticky: false, permanent: false, className: 'atlas-tooltip', direction: 'top', offset: [0, -10], opacity: 1 // sticky so the tooltip tracks the cursor; non-sticky anchors it at the feature's
// bounds centre, which for countries with overseas territories (e.g. France) lands
// far out in the ocean instead of over the area being hovered.
sticky: true, permanent: false, className: 'atlas-tooltip', direction: 'top', offset: [0, -10], opacity: 1
}) })
layer.on('click', () => { layer.on('click', () => {
if (c.placeCount === 0 && c.tripCount === 0) { if (c.placeCount === 0 && c.tripCount === 0) {
@@ -363,7 +366,7 @@ export function useAtlas() {
country_layer_by_a2_ref.current[countryCode] = layer country_layer_by_a2_ref.current[countryCode] = layer
const name = feature.properties?.NAME || feature.properties?.ADMIN || resolveName(countryCode) const name = feature.properties?.NAME || feature.properties?.ADMIN || resolveName(countryCode)
layer.bindTooltip(`<div style="font-size:12px;font-weight:600">${name}</div>`, { layer.bindTooltip(`<div style="font-size:12px;font-weight:600">${name}</div>`, {
sticky: false, className: 'atlas-tooltip', direction: 'top', offset: [0, -10], opacity: 1 sticky: true, className: 'atlas-tooltip', direction: 'top', offset: [0, -10], opacity: 1
}) })
layer.on('click', () => handleMarkCountry(countryCode, name)) layer.on('click', () => handleMarkCountry(countryCode, name))
layer.on('mouseover', (e) => { layer.on('mouseover', (e) => {
@@ -552,6 +555,20 @@ export function useAtlas() {
} catch (e ) { } catch (e ) {
console.error('Error fitting bounds', e) console.error('Error fitting bounds', e)
} }
// Mirror the map-click behaviour so an already-visited country can be removed
// straight from search. Tiny countries (Vatican City, Singapore) are hard to
// hit on the map, so search was the only way in — but it always opened the
// "Mark / Bucket" dialog with no Remove option.
const visited = data?.countries.find(c => c.code === country_code)
if (visited) {
if (visited.placeCount === 0 && visited.tripCount === 0) {
handleUnmarkCountry(country_code)
} else {
loadCountryDetailRef.current(country_code)
}
return
}
setConfirmAction({ type: 'choose', code: country_code, name: country_label }) setConfirmAction({ type: 'choose', code: country_code, name: country_label })
} }