doxa-life/doxa-maps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

The pin hint only answers to a map canvas; the Experimental "?" moves to the top centre

Browse source 
PinHint self-gated on any <canvas>, so the Wall's own renderer got a tap-a-dot coach-mark over its
dialogs; it now matches only MapLibre and Mapbox canvases. The "?" sat bottom-right, over the map
attribution on several plugins and the zoom-out button on one; map plugins use the corners, so it
moves to the top centre.
This commit is contained in:
Doxa Maps 2026-09-28 20:04:08 +00:00
parent 8350617853
commit c8227bd994
2 changed files with 8 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
library/components/hints/PinHint.vue
View file

@ -324,7 +324,9 @@ onMounted(() => {
let tries = 0
watchTimer = setInterval(() => {
tries++
const canvas = root.querySelector('canvas')
// Only a MAP ENGINE's canvas: a plugin that draws with its own canvas (the Wall's renderer) is not a
// map, and a coach-mark about tapping dots would sit over its dialogs.
const canvas = root.querySelector('canvas.maplibregl-canvas, canvas.mapboxgl-canvas')
if (canvas) {
clearInterval(watchTimer); watchTimer = null
visible.value = true

6
plugin-designs/doxa-maps-spa/doxa-maps-spa.vue
View file

@ -1547,7 +1547,11 @@ export default defineComponent({
/* THE DEVICE-RULE NOTICE — the transient "desktop only" toast for the disabled Big Picture row on
mobile. Material light only (surface/border/text/muted tokens), matching the rest of this file. */
.dms-help-btn {
position: fixed; right: 16px; bottom: 24px; z-index: 40; width: 36px; height: 36px; border-radius: 50%;
/* Top-centre: map plugins use the corners (zoom top-right, logo bottom-left, attribution
bottom-right, the mobile legend sheet along the bottom), so the one free edge is the top middle.
ABSOLUTE, not fixed: it anchors to the layout's .vtl-content (position:relative), i.e. the map pane.
Fixed would sit at the HOST page's viewport top when the SPA is embedded lower down. */
position: absolute; left: 50%; top: 10px; transform: translateX(-50%); z-index: 40; width: 36px; height: 36px; border-radius: 50%;
font: 700 17px/1 Georgia, serif; color: #3b463d; background: #fff; border: 1px solid #d1d4cd;
box-shadow: 0 4px 12px rgba(0,0,0,.12); cursor: pointer;
}