### Install Vue MapLibre GL with npm

Source: https://github.com/indoorequal/vue-maplibre-gl/blob/master/docs/guide/installation.md

Use this command to install the package and its peer dependency maplibre-gl using npm.

```sh
npm install @indoorequal/vue-maplibre-gl maplibre-gl
```

--------------------------------

### Install Vue MapLibre GL with yarn

Source: https://github.com/indoorequal/vue-maplibre-gl/blob/master/docs/guide/installation.md

Use this command to install the package and its peer dependency maplibre-gl using yarn.

```sh
yarn add @indoorequal/vue-maplibre-gl maplibre-gl
```

--------------------------------

### Single-File Component Setup

Source: https://github.com/indoorequal/vue-maplibre-gl/blob/master/docs/guide/getting-started.md

Set up a single-file component (SFC) for using MglMap. This includes template, script, and style sections, with CSS imported.

```html
<template>
  <mgl-map ... />
</template>
<script setup>
  import { MglMap } from '@indoorequal/vue-maplibre-gl';
</script>
<style lang="css">
  @import "maplibre-gl/dist/maplibre-gl.css";
</style>
```

--------------------------------

### Install Vue MapLibre GL with pnpm

Source: https://github.com/indoorequal/vue-maplibre-gl/blob/master/docs/guide/installation.md

Use this command to install the package and its peer dependency maplibre-gl using pnpm.

```sh
pnpm add @indoorequal/vue-maplibre-gl maplibre-gl
```

--------------------------------

### Displaying a Map

Source: https://github.com/indoorequal/vue-maplibre-gl/blob/master/docs/guide/getting-started.md

A basic example of displaying a map using the MglMap component in a single-file component. Requires MapLibre GL CSS import.

```html
<template>
  <mgl-map map-style="https://demotiles.maplibre.org/style.json" />
</template>
<script setup>
  import { MglMap } from '@indoorequal/vue-maplibre-gl';
</script>
<style lang="css">
  @import "maplibre-gl/dist/maplibre-gl.css";
</style>
```

--------------------------------

### Component Data Processing

Source: https://github.com/indoorequal/vue-maplibre-gl/blob/master/docs/api/index.md

Processes component data to group components by type. This script setup block is used to organize component data for rendering.

```javascript
import { data } from './components.data.js';
const byType = new Map([...(data.reduce((memo, component) => {
  const type = component.params.type;
  if (!memo.has(type)) {
    memo.set(type, []);
  }
  memo.get(type).push(component);
  return memo;
}, new Map())).entries()].sort());
```

--------------------------------

### Using the Client-Side Map Component in Nuxt App

Source: https://github.com/indoorequal/vue-maplibre-gl/blob/master/docs/guide/nuxt.md

This example shows how to include the client-side map component within your Nuxt application's main template. The comment indicates that this component will only be rendered on the client side.

```vue
<template>
  <div>
    <!-- this component will only be rendered on client side -->
    <Map />
  </div>
</template>
```

--------------------------------

### Get Map Instance with useMap

Source: https://github.com/indoorequal/vue-maplibre-gl/blob/master/docs/api/composables.md

Use the `useMap` composable to access the MapLibre map instance within a Vue component. The optional key parameter can be used to specify which map instance to retrieve if multiple maps are present.

```vue
<script setup>
import { useMap } from '@indoorequal/vue-maplibre-gl';

const map = useMap();
console.log(map.isLoaded)
console.log(map.isMounted)
console.log(map.instance)
console.log(map.map)
</script>
```

--------------------------------

### Import All Components

Source: https://github.com/indoorequal/vue-maplibre-gl/blob/master/docs/guide/getting-started.md

Use this method to import all components from Vue MapLibre GL. Ensure MapLibre GL CSS is also imported.

```typescript
import 'maplibre-gl/dist/maplibre-gl.css';
import VueMaplibreGl from '@indoorequal/vue-maplibre-gl'

app.use(VueMaplibreGl)
```

--------------------------------

### Import Specific Components

Source: https://github.com/indoorequal/vue-maplibre-gl/blob/master/docs/guide/getting-started.md

Import only the specific components you need, such as MglMap. Remember to import MapLibre GL CSS.

```typescript
import 'maplibre-gl/dist/maplibre-gl.css';
import { MglMap } from '@indoorequal/vue-maplibre-gl';

app.component('MglMap', MglMap);
```

--------------------------------

### Component Rendering Logic

Source: https://github.com/indoorequal/vue-maplibre-gl/blob/master/docs/api/index.md

Renders component lists grouped by type. It iterates over a Map of component types and their associated components, displaying them in an unordered list.

```html
<template v-for="[type, components] of byType.entries()">
  <h3 v-if="type != 'components'">{{ type[0].toUpperCase() }}{{ type.slice(1) }}</h3>
  <ul>
    <li v-for="component of components.sort()">
      <a :href="`${component.params.component}`">{{ component.params.title }}</a>
      <div v-html="component.params.description"></div>
     </li>
  </ul>
</template>
```

--------------------------------

### useControl

Source: https://github.com/indoorequal/vue-maplibre-gl/blob/master/docs/api/composables.md

The `useControl` composable simplifies adding MapLibre controls to the map. It accepts a factory function that returns an `IControl` instance and an optional configuration object for control positioning.

```APIDOC
## useControl(() => IControl, { position: 'top-left' }): { control, map }

### Description
The `useControl` composable allows adding a maplibre control that implements the IControl interface. It takes a factory function to create the control and an optional configuration object for its position.

### Parameters
#### Arguments
- **controlFactory** (function) - Required - A function that returns an instance of an IControl.
- **options** (object) - Optional - Configuration options for the control.
  - **position** (string) - Optional - The position of the control on the map (e.g., 'top-left', 'top-right', 'bottom-left', 'bottom-right').

### Usage Example
```vue
<script setup>
import { useControl } from '@indoorequal/vue-maplibre-gl';
import MaplibreInspect from '@maplibre/maplibre-gl-inspect';

useControl(() => {
  return new MaplibreInspect();
});
</script>
```
```

--------------------------------

### Map Component for Nuxt Client-Side

Source: https://github.com/indoorequal/vue-maplibre-gl/blob/master/docs/guide/nuxt.md

This component should be placed in a client-side component file (e.g., map.client.vue) to ensure it renders only in the browser. It imports necessary CSS and map components.

```vue
<template>
  <MglMap>
    <MglNavigationControl />
  </MglMap>
</template>

<script setup>
import 'maplibre-gl/dist/maplibre-gl.css';
import { MglMap, MglNavigationControl } from '@indoorequal/vue-maplibre-gl';
</script>
```

--------------------------------

### useMap

Source: https://github.com/indoorequal/vue-maplibre-gl/blob/master/docs/api/composables.md

The `useMap` composable provides access to the MapLibre map instance within a Vue component. It can optionally take a key to reference a specific map instance if multiple maps are used.

```APIDOC
## useMap(key?): MapInstance

### Description
The `useMap` composable allows a component to get the MapLibre map instance. The key parameter is a reference to the `mapKey` prop of [MglMap](./MglMap.md).

### Parameters
#### Path Parameters
- **key** (string) - Optional - The key to reference a specific map instance.

### Usage Example
```vue
<script setup>
import { useMap } from '@indoorequal/vue-maplibre-gl';

const map = useMap();
console.log(map.isLoaded)
console.log(map.isMounted)
console.log(map.instance)
console.log(map.map)
</script>
```
```

--------------------------------

### Add Native Map Control

Source: https://github.com/indoorequal/vue-maplibre-gl/blob/master/docs/guide/controls.md

To display native MapLibre controls, add them as child components within the `mgl-map` component. The position can be customized using the `position` prop.

```html
<mgl-map map-style="...">
  <mgl-navigation-control />
</mgl-map>
```

```html
<mgl-navigation-control position="top-left" />
```

--------------------------------

### Add Map Control with useControl

Source: https://github.com/indoorequal/vue-maplibre-gl/blob/master/docs/api/composables.md

The `useControl` composable allows you to add MapLibre GL JS controls to your map. It accepts a factory function that returns an instance of a control implementing the `IControl` interface.

```vue
<script setup>
import { useControl } from '@indoorequal/vue-maplibre-gl';
import MaplibreInspect from '@maplibre/maplibre-gl-inspect';

useControl(() => {
  return new MaplibreInspect();
});
</script>
```

--------------------------------

### Add Custom Control

Source: https://github.com/indoorequal/vue-maplibre-gl/blob/master/docs/guide/controls.md

A custom control component is provided to embed arbitrary HTML content as a control. It supports `position` and `class` props, and its content is placed as a child of the component.

```html
<mgl-map map-style="...">
  <mgl-custom-control>Your code</mgl-custom-control>
</mgl-map>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.