Components

The vue3-openlayers-styled-controls library provides a set of customizable map controls that can enhance your OpenLayers maps with beautiful, responsive UI components.

Available Controls

Component	Description
ol-styled-control-bar	Container component for organizing other controls
ol-styled-home-control	Home
ol-styled-zoom-in-control	Zoom in
ol-styled-zoom-out-control	zoom out
ol-styled-full-screen-control	Toggle full screen mode
ol-styled-measure-length-control	Measure distances
ol-styled-measure-area-control	Measure areas
ol-styled-text-label-control	Add text labels to the map
ol-styled-plot-control	Plot
ol-styled-export-map-control	Export
ol-styled-clear-control	Clear drawings and measurements from the map
ol-styled-swipe-control	Enable layer swiping functionality
ol-styled-base-layer-switcher	Switch between different base map layers

Usage

All components can be used in two ways:

1. Plugin Registration (Recommended)

When you install the plugin, all components are automatically registered globally:

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

const app = createApp(App)
app.use(OpenLayersControls)
app.mount('#app')

Then use the components with the ol-styled- prefix:

<template>
  <ol-styled-control-bar>
    <ol-styled-zoom-in-control />
    <ol-styled-zoom-out-control />
    <ol-styled-full-screen-control />
  </ol-styled-control-bar>
</template>

2. Individual Import

You can also import components individually to reduce bundle size:

<template>
  <ControlBar>
    <ZoomInControl />
    <ZoomOutControl />
    <FullScreenControl />
  </ControlBar>
</template>

<script setup>
import { 
  ControlBar, 
  ZoomInControl, 
  ZoomOutControl, 
  FullScreenControl 
} from 'vue3-openlayers-styled-controls'
</script>

Common Props

Most controls share some common props:

Prop	Type	Default	Description
map	Map	undefined	OpenLayers Map instance (usually injected automatically)
className	string	''	Additional CSS class names
disabled	boolean	false	Disable the control

Styling

All controls support theming through SCSS variables. See the theming guide for more information on customizing the appearance.