PrintAdvancedControl

Usecase

• Configure printable area and guides for high-quality exports.
• Prepare maps for PDF layouts with fixed sizes and aspect ratios.

Props

Prop	Description	Type	Required	Default Value
mapId		string	false	--
dragId		string	false	--
btnWidth		number	false	40
controlOrder	CSS flex order for the standalone button	number	false	0
position		'top-left', 'top-right', 'bottom-left', 'bottom-right'	false	'bottom-right'
controlLayout	'standalone' (corner), 'toolbar' (always in toolbar), 'button' (always corner; not auto-promoted on mobile)	'standalone' | 'toolbar' | 'button'	false	'standalone'
controlVisible		boolean	false	true

Map also accepts buttonInMobile ('button' | 'toolbar' | 'menu', default 'button'). On viewports ≤640px:

• 'button' — leave corner buttons unchanged
• 'toolbar' — move declared control buttons into a single ToolbarControl host (except controlLayout="button"). Mount one ToolbarControl in the map slot
• 'menu' — hide per-control corner buttons; fan out intact clusters by position into corner stacks with outside-in More. Mount one ToolbarControl.

See ToolbarControl.

and

Prop	Description	Type	Required	Default Value
disabledCrosshair	Disable the crosshair overlay	boolean	false	false
disabledPrintableArea	Disable the printable area overlay	boolean	false	false
fileName	The name of the exported file	string	false	map

Runtime behavior

• Export waits for map loaded + tiles ready (waitMapIdleAndTiles) before snapshot.
• Advanced export supports optional dpi and watermark via print utils (exportMapboxWithOptions).

Architecture (thin host)

Overlay / paper / save orchestration lives in Stable createPrintAdvancedSession (@hungpvq/map-core/print). Vue and React PrintAdvancedControl are thin hosts: toolbar, registry, settings UI, and saveAs only. Call session.destroy() on unmount.

Slots

Name	Description
default	Slot for custom content

Usage

Vue

<script setup lang="ts">
import { Map } from '@hungpvq/vue-map-core';
import { PrintAdvancedControl } from '@hungpvq/vue-map-core';
import '@hungpvq/vue-map-core/style.css';
</script>

<template>
  <Map>
    <PrintAdvancedControl fileName="custom-map" />
  </Map>
</template>

React

import { Map, PrintAdvancedControl } from '@hungpvq/react-map-core';
import '@hungpvq/react-map-core/style.css';

<Map>
  <PrintAdvancedControl fileName="custom-map" />
</Map>