InfoControl

Map view inspector: center, zoom, pitch, bearing, projection, and bounds. Click the toolbar button to open the panel.

Usecase

• Read the current map camera and copy values for debugging or sharing.
• Capture a PNG screenshot of the current view (camera icon), or copy image to the clipboard.
• Toggle DMS vs decimal for the center row; Paste go to accepts the same coordinate text as GotoControl.

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
show	Open the panel initially	boolean	false	false
fileName	Screenshot file name	string	false	'map'

Events

None. Copy uses the clipboard. Screenshot downloads a PNG.

Usage

Vue

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

<template>
  <Map>
    <InfoControl position="top-right" />
  </Map>
</template>

React

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

<Map>
  <InfoControl position="top-right" />
</Map>