Full Screen Control

The Full Screen Control allows users to toggle the map between normal and full screen mode.

Usage

FullScreenControl.vue

<template>
  <ol-map class="map-container">
    <ol-view
      ref="view"
      :center="mapConfig.center"
      :zoom="mapConfig.zoom"
      :projection="mapConfig.projection"
    />

    <base-layer />
    <ol-styled-control-bar>
      <ol-styled-zoom-in-control />
      <ol-styled-zoom-out-control />
      <OlStyledFullScreenControl />
    </ol-styled-control-bar>
  </ol-map>
</template>
<script lang="ts" setup>
import BaseLayer from '../components/base-layer.vue'
import { mapConfig } from '../config/config.ts'
</script>

Events

Event	Payload	Description
click	Event	event of click
fullscreen-change	Boolen	Emitted when entering or exiting full screen mode

Slot

You can customize the control icon via the default slot:

<template>
  <ol-styled-full-screen-control>
    <template #default>
      <i class="custom-fullscreen-icon"></i>
    </template>
  </ol-styled-full-screen-control>
</template>

Internationalization

Configure locale and messages when installing the plugin to localize texts:

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import OpenLayersControls from 'vue3-openlayers-styled-controls'

const app = createApp(App)

app.use(OpenLayersControls, {
  locale: 'en',
  messages: {
    en: {
      fullScreen: { enter: 'Full screen', exit: 'Exit full screen' }
    }
  }
})

app.mount('#app')