Skip to content

PrintAdvancedControl

Usecase

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

Props

PropDescriptionTypeRequiredDefault Value
mapIdstringfalse--
dragIdstringfalse--
btnWidthnumberfalse40
position'top-left', 'top-right', 'bottom-left', 'bottom-right'false'bottom-right'
controlVisiblebooleanfalsetrue

and

PropDescriptionTypeRequiredDefault Value
disabledCrosshairDisable the crosshair overlaybooleanfalsefalse
disabledPrintableAreaDisable the printable area overlaybooleanfalsefalse
fileNameThe name of the exported filestringfalsemap

Slots

NameDescription
defaultSlot for custom content

Usage

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

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