ToolbarControl

Usecase

• Host control buttons that opt into controlLayout="toolbar".
• On mobile (≤640px), drive Map buttonInMobile modes toolbar and menu (fan-out + overflow).

Mount one <ToolbarControl /> in the map slot whenever you use buttonInMobile="toolbar" or "menu", or when any control sets controlLayout="toolbar".

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
maxVisible	Override auto overflow band count (advanced)	number	false	auto

ToolbarControl itself uses controlLayout="button" so it is never hidden by mobile promotion.

Mobile buttonInMobile

Set on <Map> (see props):

Value	Behavior
button	Corner #btn unchanged (default)
toolbar	Promote eligible controls into one horizontal toolbar host
menu	Hide per-control corner #btn; fan out clusters by position into four corner stacks

Menu mode details

• Keep each control’s cluster intact (row / column); overflow outside-in per corner.
• Vertical edge budget shares unused half-space with the opposite stack; reserve same-edge controlLayout="button" chrome (e.g. MouseCoordinates).
• Corner More reuses .map-toolbar-overflow (pinned inward of the button column).

Demo: /#/mobile-menu (button / toolbar / menu); toolbar opt-in: /#/toolbar.

Usage

Vue

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

<template>
  <Map button-in-mobile="menu">
    <ToolbarControl />
    <ZoomControl position="bottom-right" />
    <HomeControl position="bottom-right" />
    <MouseCoordinatesControl />
  </Map>
</template>

React

import {
  Map,
  ToolbarControl,
  ZoomControl,
  HomeControl,
  MouseCoordinatesControl,
} from '@hungpvq/react-map-core';
import '@hungpvq/react-map-core/style.css';

<Map buttonInMobile="menu">
  <ToolbarControl />
  <ZoomControl position="bottom-right" />
  <HomeControl position="bottom-right" />
  <MouseCoordinatesControl />
</Map>