diff --git a/client/src/pages/atlas/useAtlas.ts b/client/src/pages/atlas/useAtlas.ts index 9a2f8953..99d02868 100644 --- a/client/src/pages/atlas/useAtlas.ts +++ b/client/src/pages/atlas/useAtlas.ts @@ -340,7 +340,10 @@ export function useAtlas() { ` 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', () => { if (c.placeCount === 0 && c.tripCount === 0) { @@ -363,7 +366,7 @@ export function useAtlas() { country_layer_by_a2_ref.current[countryCode] = layer const name = feature.properties?.NAME || feature.properties?.ADMIN || resolveName(countryCode) layer.bindTooltip(`
${name}
`, { - 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('mouseover', (e) => { @@ -552,6 +555,20 @@ export function useAtlas() { } catch (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 }) }