### Install with npm

Source: https://indoorequal.github.io/vue-maplibre-gl/guide/installation.html

Use this command to install the library and its peer dependency using npm.

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

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

### Install with yarn

Source: https://indoorequal.github.io/vue-maplibre-gl/guide/installation.html

Use this command to install the library and its peer dependency using yarn.

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

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

### Install with pnpm

Source: https://indoorequal.github.io/vue-maplibre-gl/guide/installation.html

Use this command to install the library and its peer dependency using pnpm.

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

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

### Single-File Component Setup

Source: https://indoorequal.github.io/vue-maplibre-gl/guide/getting-started.html

Integrate MglMap within a Vue Single-File Component. This includes template, script setup, and style sections, with CSS import for maplibre-gl.

```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>
```

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

### Multiple Map Instances with useMap

Source: https://indoorequal.github.io/vue-maplibre-gl/examples/use-map

Use the `useMap` composable to get references to multiple map instances. Provide a unique key for each map if you are using more than one.

```vue
<template>
  <div>
    <mgl-map
      :map-style="style"
      :center="center"
      :zoom="zoom"
      height="200px"
    />
    <mgl-map
      :map-style="style"
      :center="center"
      :zoom="zoom"
      map-key="second"
      height="200px"
    />
    MapOne loaded {{ mapOne.isLoaded }}
    <br />
    MapSecond loaded {{ mapSecond.isLoaded }}
  </div>
</template>

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

const style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=get_your_own_api_key_3YeFnghdqUJJpIvlgLti';
const center = [12.550343, 55.665957];
const zoom = 8;
const mapOne = useMap();
const mapSecond = useMap('second');
watch(() => mapOne.isLoaded, (isLoaded) => { console.log('mapOne loaded ', isLoaded) })
watch(() => mapSecond.isLoaded, (isLoaded) => { console.log('mapSecond loaded ', isLoaded) })
</script>

<style lang="scss">
@import "maplibre-gl/dist/maplibre-gl.css";
</style>
```

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

### Vue Component with Custom Marker

Source: https://indoorequal.github.io/vue-maplibre-gl/examples/custom-marker

Use this component to display a MapLibre GL map with a custom-styled marker. Ensure you have the '@indoorequal/vue-maplibre-gl' package installed and a MapLibre GL style URL with an API key.

```vue
<template>
  <mgl-map
    :map-style="style"
    :center="center"
    :zoom="zoom"
    height="500px"
  >
    <mgl-marker :coordinates="coordinates">
      <template v-slot:marker>
        <div :style="{ backgroundColor: 'red', width: '10px', height: '10px' }"></div>
      </template>
    </mgl-marker>
  </mgl-map>
</template>

<script setup>
import {
  MglMap,
  MglMarker
} from '@indoorequal/vue-maplibre-gl';

const style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=get_your_own_api_key_3YeFnghdqUJJpIvlgLti';
const center = [12.550343, 55.665957];
const zoom = 8;
const coordinates = [12.550343, 55.665957];
</script>

<style lang="scss">
@import "maplibre-gl/dist/maplibre-gl.css";
</style>
```

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

### Get MapLibre Map Instance with useMap

Source: https://indoorequal.github.io/vue-maplibre-gl/api/composables.html

Use the `useMap` composable to access the MapLibre map instance within your Vue components. It requires no arguments if there's only one map, or accepts a map key.

```javascript
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)
```

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

### Import All Components with VueMaplibreGl

Source: https://indoorequal.github.io/vue-maplibre-gl/guide/getting-started.html

Use this method to import all components from the library globally. Ensure maplibre-gl CSS is imported.

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

app.use(VueMaplibreGl)
```

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

### Add Navigation Control to Map

Source: https://indoorequal.github.io/vue-maplibre-gl/guide/controls.html

To display native MapLibre controls, add them as child components of the mgl-map. This example shows how to add a NavigationControl.

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

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

### Customize Navigation Control Position

Source: https://indoorequal.github.io/vue-maplibre-gl/guide/controls.html

The position of native controls can be customized using the `position` prop. This example sets the NavigationControl to the top-left position.

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

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

### Map Initialization Options

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglMap

Configuration options for initializing a MapLibre GL JS map.

```APIDOC
## Map Initialization Options

This section details the various options that can be passed during the initialization of a MapLibre GL JS map to customize its behavior and appearance.

### fadeDuration

*   **Type**: `number`
*   **Required**: `false`
*   **Default**: `undefined`

Controls the duration of the fade-in/fade-out animation for label collisions after initial map load, in milliseconds. This setting affects all symbol layers. This setting does not affect the duration of runtime styling transitions or raster tile cross-fading. Default Value `300`

### fitBoundsOptions

*   **Type**: `FitBoundsOptions`
*   **Required**: `false`
*   **Default**: `undefined`

A FitBoundsOptions options object to use only when fitting the initial bounds provided above.

### interactive

*   **Type**: `boolean`
*   **Required**: `false`
*   **Default**: `undefined`

If false, no mouse, touch, or keyboard listeners will be attached to the map, so it will not respond to interaction. Default Value `true`

### keyboard

*   **Type**: `boolean`
*   **Required**: `false`
*   **Default**: `undefined`

If true, keyboard shortcuts are enabled (see KeyboardHandler). Default Value `true`

### locale

*   **Type**: `Record<string, string>`
*   **Required**: `false`
*   **Default**: `undefined`

A patch to apply to the default localization table for UI strings, e.g. control tooltips. The locale object maps namespaced UI string IDs to translated strings in the target language; see src/ui/default_locale.js for an example with all supported string IDs. The object may specify all UI strings (thereby adding support for a new translation) or only a subset of strings (thereby patching the default translation table). Default Value `null`

### localIdeographFontFamily

*   **Type**: `string`
*   **Required**: `false`
*   **Default**: `undefined`


### logoPosition

*   **Type**: `Position`
*   **Required**: `false`
*   **Default**: `undefined`

A string representing the position of the MapLibre wordmark on the map. Valid options are top-left,top-right, bottom-left, or bottom-right. Default Value 'bottom-left'

### maxBounds

*   **Type**: `LngLatBoundsLike`
*   **Required**: `false`
*   **Default**: `undefined`

If set, the map will be constrained to the given bounds.

### maxPitch

*   **Type**: `number`
*   **Required**: `false`
*   **Default**: `undefined`

The maximum pitch of the map (0-85). Values greater than 60 degrees are experimental and may result in rendering issues. If you encounter any, please raise an issue with details in the MapLibre project. Default Value `60`

### maxZoom

*   **Type**: `number`
*   **Required**: `false`
*   **Default**: `undefined`

The maximum zoom level of the map (0-24). Default Value `22`

### minPitch

*   **Type**: `number`
*   **Required**: `false`
*   **Default**: `undefined`

The minimum pitch of the map (0-85). Values greater than 60 degrees are experimental and may result in rendering issues. If you encounter any, please raise an issue with details in the MapLibre project. Default Value `0`

### minZoom

*   **Type**: `number`
*   **Required**: `false`
*   **Default**: `undefined`

The minimum zoom level of the map (0-24). Default Value `0`

### pitch

*   **Type**: `number`
*   **Required**: `false`
*   **Default**: `undefined`
*   **Sincable**: `v-model:pitch`

The initial pitch (tilt) of the map, measured in degrees away from the plane of the screen (0-85). If pitch is not specified in the constructor options, MapLibre GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to 0. Values greater than 60 degrees are experimental and may result in rendering issues. If you encounter any, please raise an issue with details in the MapLibre project. Default Value `0`

### pitchWithRotate

*   **Type**: `boolean`
*   **Required**: `false`
*   **Default**: `undefined`

If false, the map's pitch (tilt) control with "drag to rotate" interaction will be disabled. Default Value `true`

### canvasContextAttributes (since 8.0.0)

*   **Type**: `WebGLContextAttributesWithType`
*   **Required**: `false`
*   **Default**: `undefined`

Set of WebGLContextAttributes that are applied to the WebGL context of the map. See https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext for more details. contextType can be set to webgl2 or webgl to force a WebGL version. Not setting it, Maplibre will do it's best to get a suitable context.

### refreshExpiredTiles

*   **Type**: `boolean`
*   **Required**: `false`
*   **Default**: `undefined`

If false, the map won't attempt to re-request tiles once they expire per their HTTP cacheControl/expires headers. Default Value `true`

### renderWorldCopies

*   **Type**: `boolean`
*   **Required**: `false`
*   **Default**: `undefined`


### scrollZoom

*   **Type**: `boolean`
*   **Required**: `false`
*   **Default**: `undefined`


```

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

### Display Map with Style

Source: https://indoorequal.github.io/vue-maplibre-gl/guide/getting-started.html

Renders a map using the MglMap component with a specified MapLibre GL style URL. Ensure maplibre-gl CSS is imported.

```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>
```

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

### Import MglFillExtrusionLayer

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglFillExtrusionLayer

Import the MglFillExtrusionLayer component from the @indoorequal/vue-maplibre-gl library.

```typescript
import { MglFillExtrusionLayer } from '@indoorequal/vue-maplibre-gl';
```

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

### Import MglImageSource Component

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglImageSource

Import the MglImageSource component from the @indoorequal/vue-maplibre-gl library. This is typically done at the top of your Vue component file.

```typescript
import { MglImageSource } from '@indoorequal/vue-maplibre-gl';
```

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

### Import MglSymbolLayer

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglSymbolLayer

Import the MglSymbolLayer component from the @indoorequal/vue-maplibre-gl library.

```typescript
import { MglSymbolLayer } from '@indoorequal/vue-maplibre-gl';
```

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

### Import MglGeolocateControl

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglGeolocateControl

Import the MglGeolocateControl component from the vue-maplibre-gl library.

```typescript
import { MglGeolocateControl } from '@indoorequal/vue-maplibre-gl';
```

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

### Import MglAttributionControl

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglAttributionControl

Import the MglAttributionControl component from the vue-maplibre-gl library.

```typescript
import { MglAttributionControl } from '@indoorequal/vue-maplibre-gl';
```

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

### MglVideoSource Component API

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglVideoSource

Details the properties available for the MglVideoSource component.

```APIDOC
## MglVideoSource Component

### Description

The `MglVideoSource` component is used to add a video source to a MapLibre GL map. It allows you to display video streams as map sources.

### Props

#### `sourceId`
- **Type**: `string`
- **Required**: `true`
- **Default**: `undefined`
- **Description**: A unique identifier for this source.

#### `urls`
- **Type**: `string[]`
- **Required**: `false`
- **Default**: `undefined`
- **Description**: An array of URLs for the video streams.

#### `coordinates`
- **Type**: `Coordinates`
- **Required**: `false`
- **Default**: `undefined`
- **Description**: The geographic coordinates defining the bounds of the video source on the map. The type `Coordinates` is expected to be an array of four numbers `[lng1, lat1, lng2, lat2]` or an array of arrays of coordinates.

### Usage Example

```typescript
import { MglVideoSource } from '@indoorequal/vue-maplibre-gl';

export default {
  components: {
    MglVideoSource
  },
  data() {
    return {
      videoSourceId: 'my-video-source',
      videoUrls: ['http://example.com/video.mp4'],
      videoCoordinates: [10, 50, 20, 60] // Example coordinates
    };
  }
};
```

```html
<template>
  <mgl-map :map-options="{ style: 'vector-tile-server.json' }">
    <mgl-video-source
      :source-id="videoSourceId"
      :urls="videoUrls"
      :coordinates="videoCoordinates"
    />
  </mgl-map>
</template>
```

### Source

See [MapLibre GL JS VideoSource documentation](https://maplibre.org/maplibre-gl-js/docs/api/sources/#videosource) for more details on the underlying MapLibre GL JS source properties.
```

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

### Import MglVideoSource Component

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglVideoSource

Import the MglVideoSource component from the vue-maplibre-gl library. This is typically done at the top of your Vue component file.

```typescript
import { MglVideoSource } from '@indoorequal/vue-maplibre-gl';
```

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

### Import MglCanvasSource

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglCanvasSource

Import the MglCanvasSource component from the @indoorequal/vue-maplibre-gl package. This is typically done at the top of your Vue component file.

```typescript
import { MglCanvasSource } from '@indoorequal/vue-maplibre-gl';
```

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

### Import MglPopup Component

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglPopup

Import the MglPopup component from the vue-maplibre-gl library. This is the primary step to use the popup functionality in your Vue application.

```typescript
import { MglPopup } from '@indoorequal/vue-maplibre-gl';
```

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

### Import MglNavigationControl

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglNavigationControl

Import the MglNavigationControl component from the vue-maplibre-gl library. This is typically done at the top of your Vue component file.

```typescript
import { MglNavigationControl } from '@indoorequal/vue-maplibre-gl';
```

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

### Components

Source: https://indoorequal.github.io/vue-maplibre-gl/api

Core components for rendering maps and related elements.

```APIDOC
## Components

### MglImage

Load an image to maplibre to use in the style. If the image id already exist, nothing is done.
See #addImage and #loadImage
```

```APIDOC
### MglMap

The map component
See Map.
```

```APIDOC
### MglMarker

Creates a marker component
See Marker.
```

```APIDOC
### MglPopup

A popup component
See Popup.
```

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

### Import MglHeatmapLayer

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglHeatmapLayer

Import the MglHeatmapLayer component from the vue-maplibre-gl library. This is typically done at the top of your Vue component file.

```typescript
import { MglHeatmapLayer } from '@indoorequal/vue-maplibre-gl';
```

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

### Import MglCircleLayer

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglCircleLayer

Import the MglCircleLayer component from the vue-maplibre-gl library.

```typescript
import { MglCircleLayer } from '@indoorequal/vue-maplibre-gl';
```

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

### Import MglGeoJsonSource Component

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglGeoJsonSource

Import the MglGeoJsonSource component from the vue-maplibre-gl library. This is typically done at the top of your Vue component file.

```typescript
import { MglGeoJsonSource } from '@indoorequal/vue-maplibre-gl';
```

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

### MglMarker Component API

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglMarker

Detailed API documentation for the MglMarker component, including its properties, events, and slots.

```APIDOC
## MglMarker Component

Creates a marker component for MapLibre GL maps.

### Props

- **coordinates** (LngLatLike) - Required - Marker coordinates.
- **className** (string) - Optional - Space-separated CSS class names to add to marker container.
- **offset** (undefined) - Optional - The offset in pixels as a PointLike object to apply relative to the element's center. Negatives indicate left and up.
- **anchor** (PositionAnchor) - Optional - A string indicating the part of the Marker that should be positioned closest to the coordinate set via Marker#setLngLat. Options are 'center', 'top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', and 'bottom-right'. Default Value 'center'.
- **color** (string) - Optional - The color to use for the default marker if options.element is not provided. Default Value '#3FB1CE'.
- **draggable** (boolean) - Optional - A boolean indicating whether or not a marker is able to be dragged to a new position on the map. Default Value false.
- **clickTolerance** (number) - Optional - The max number of pixels a user can shift the mouse pointer during a click on the marker for it to be considered a valid click (as opposed to a marker drag). Default Value 0.
- **rotation** (number) - Optional - The rotation angle of the marker in degrees, relative to its respective rotationAlignment setting. Default Value 0.
- **rotationAlignment** (string) - Optional - 'map' aligns the Marker's rotation relative to the map. 'viewport' aligns the Marker's rotation relative to the viewport. 'auto' is equivalent to viewport. Default Value 'auto'.
- **pitchAlignment** (string) - Optional - 'map' aligns the Marker to the plane of the map. 'viewport' aligns the Marker to the plane of the viewport. 'auto' automatically matches the value of rotationAlignment. Default Value 'auto'.
- **scale** (number) - Optional - The scale to use for the default marker if options.element is not provided. Default Value 1.
- **opacity** (string) - Optional - Marker's opacity when it's in clear view (not behind 3d terrain). Default value `1`.
- **opacityWhenCovered** (string) - Optional - Marker's opacity when it's behind 3d terrain.
- **subpixelPositioning** (boolean) - Optional - If true, rounding is disabled for placement of the marker, allowing for subpixel positioning and smoother movement. Default Value false.

### Events

- **dragstart**: Fired when dragging starts.
- **drag**: Fired while dragging.
- **dragend**: Fired when the marker is finished being dragged.
- **update:coordinates**: Fired when the coordinates have been updated when the marker is draggable.

### Slots

- **marker**: Slot for custom marker.
- **default**: Slot for popup component.

### TypeScript Import
```typescript
import { MglMarker } from '@indoorequal/vue-maplibre-gl';
```
```

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

### Import MglBackgroundLayer

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglBackgroundLayer

Import the MglBackgroundLayer component from the vue-maplibre-gl library. This is typically done at the top of your Vue component file.

```typescript
import { MglBackgroundLayer } from '@indoorequal/vue-maplibre-gl';
```

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

### Import MglScaleControl

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglScaleControl

Import the MglScaleControl component from the vue-maplibre-gl library.

```typescript
import { MglScaleControl } from '@indoorequal/vue-maplibre-gl';
```

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

### Import MglFullscreenControl

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglFullscreenControl

Import the MglFullscreenControl component from the vue-maplibre-gl library. This is typically done at the top of your Vue component file.

```typescript
import { MglFullscreenControl } from '@indoorequal/vue-maplibre-gl';
```

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

### MglPopup Component

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglPopup

The MglPopup component provides a customizable popup for MapLibre GL JS maps. It can be configured via props and content can be passed through slots.

```APIDOC
## MglPopup Component API

### Description
A popup component for MapLibre GL JS maps.

### Props

#### `coordinates`
- **Type**: `LngLatLike`
- **Required**: `false`
- **Default**: `undefined`
- **Description**: The geographical location of the popup's anchor. Unused when placed inside a marker.

#### `closeButton`
- **Type**: `boolean`
- **Required**: `false`
- **Default**: `true`
- **Description**: Display a close button in the top right corner.

#### `closeOnClick`
- **Type**: `boolean`
- **Required**: `false`
- **Default**: `true`
- **Description**: The popup will be closed when the map is clicked.

#### `closeOnMove`
- **Type**: `boolean`
- **Required**: `false`
- **Default**: `false`
- **Description**: The popup will be closed when the map moves.

#### `focusAfterOpen`
- **Type**: `boolean`
- **Required**: `false`
- **Default**: `true`
- **Description**: The popup will try to focus the first focusable element inside the popup.

#### `anchor`
- **Type**: `PositionAnchor`
- **Required**: `false`
- **Default**: `undefined`
- **Description**: A string indicating the part of the Popup that should be positioned closest to the coordinate. Options are `'center'`, `'top'`, `'bottom'`, `'left'`, `'right'`, `'top-left'`, `'top-right'`, `'bottom-left'`, and `'bottom-right'`. If unset the anchor will be dynamically set to ensure the popup falls within the map container with a preference for `'bottom'`.

#### `offset`
- **Type**: `Offset`
- **Required**: `false`
- **Default**: `undefined`
- **Description**: A pixel offset applied to the popup's location.

#### `className`
- **Type**: `string`
- **Required**: `false`
- **Default**: `undefined`
- **Description**: Space-separated CSS class names to add to popup container.

#### `maxWidth`
- **Type**: `string`
- **Required**: `false`
- **Default**: `"240px"`
- **Description**: A string that sets the CSS property of the popup's maximum width, eg `'300px'`. To ensure the popup resizes to fit its content, set this property to `'none'`.

#### `subpixelPositioning` (since 7.1.0)
- **Type**: `boolean`
- **Required**: `false`
- **Default**: `false`
- **Description**: If true, rounding is disabled for placement of the popup, allowing for subpixel positioning and smoother movement when the popup is translated.

#### `text`
- **Type**: `string`
- **Required**: `false`
- **Default**: `undefined`
- **Description**: Sets the popup's content to a string of text.

### Events

#### `open`
Fired when the popup is opened manually or programmatically.

#### `close`
Fired when the popup is closed manually or programmatically.

### Slots

#### `default`
Slot for popup content.

### Example Usage
```typescript
import { MglPopup } from '@indoorequal/vue-maplibre-gl';

// ... in your Vue component template
<mgl-popup :coordinates="[13.4050, 52.5200]" :closeButton="true">
  <div>
    <h3>Hello World!</h3>
    <p>This is a popup.</p>
  </div>
</mgl-popup>
```
```

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

### Vue MapLibre GL Video Source Integration

Source: https://indoorequal.github.io/vue-maplibre-gl/examples/video

Integrates a video source into a MapLibre GL map using Vue. Ensure MapLibre GL CSS is imported.

```vue
<template>
  <mgl-map
    :map-style="style"
    :center="center"
    :zoom="zoom"
    height="500px"
  >
    <mgl-video-source source-id="video-source" :coordinates="coordinates" :urls="urls">
      <mgl-raster-layer layer-id="video-layer" />
    </mgl-video-source>
  </mgl-map>
</template>

<script setup>
import {
  MglMap,
  MglVideoSource,
  MglRasterLayer
} from '@indoorequal/vue-maplibre-gl';

const style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=get_your_own_api_key_3YeFnghdqUJJpIvlgLti';
const center = [-122.514426, 37.562984];
const zoom = 17;
const urls = ['https://static-assets.mapbox.com/mapbox-gl-js/drone.mp4', 'https://static-assets.mapbox.com/mapbox-gl-js/drone.webm'];
const coordinates =  [[-122.51596391201019, 37.56238816766053],
                    [-122.51467645168304, 37.56410183312965],
                    [-122.51309394836426, 37.563391708549425],
                    [-122.51423120498657, 37.56161849366671]];
</script>

<style lang="scss">
@import "maplibre-gl/dist/maplibre-gl.css";
</style>
```

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

### Import Specific Components

Source: https://indoorequal.github.io/vue-maplibre-gl/guide/getting-started.html

Import only the necessary components, like MglMap, for your Vue application. Remember to import the maplibre-gl CSS.

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

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

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

### Import MglImage Component

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglImage

Import the MglImage component from the vue-maplibre-gl library. This is required to use the component in your Vue application.

```typescript
import { MglImage } from '@indoorequal/vue-maplibre-gl';
```

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

### Import MglMarker Component

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglMarker

Import the MglMarker component from the vue-maplibre-gl library. This is a prerequisite for using the marker functionality.

```typescript
import { MglMarker } from '@indoorequal/vue-maplibre-gl';
```

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

### Composables

Source: https://indoorequal.github.io/vue-maplibre-gl/api

Vue composables for interacting with MapLibre GL JS.

```APIDOC
## Composables

### useMap


```

```APIDOC
### useControl


```

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

### Import MglRasterLayer Component

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglRasterLayer

Import the MglRasterLayer component from the vue-maplibre-gl library. This is typically done at the top of your Vue component file.

```typescript
import { MglRasterLayer } from '@indoorequal/vue-maplibre-gl';
```

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

### Add an icon to the map from an external URL

Source: https://indoorequal.github.io/vue-maplibre-gl/examples/image

Use the `mgl-image` component to load an image from a URL. The image can then be referenced by its ID in a symbol layer's layout.

```vue
<template>
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/a/aa/Flat_Coated_Retriever_-_black.jpg"
    crossorigin="anonymous"
    ref="dog"
    style="display: none"
  />
  <mgl-map
    :map-style="style"
    height="500px"
  >
    <mgl-image
      id="cat"
      url="https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png"
    />
    <mgl-image
      id="dog"
      :image="dog"
    />
    <mgl-navigation-control />
    <mgl-geo-json-source
      source-id="point"
      :data="geojsonSource"
    >
      <mgl-symbol-layer
        layer-id="cat"
        :layout="layout"
      />
    </mgl-geo-json-source>
  </mgl-map>
</template>

<script setup>
import {
  MglMap,
  MglNavigationControl,
  MglImage,
  MglGeoJsonSource,
  MglSymbolLayer
} from '@indoorequal/vue-maplibre-gl';
import { useTemplateRef } from 'vue'

const style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=get_your_own_api_key_3YeFnghdqUJJpIvlgLti';
const geojsonSource = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [0, 0]
      },
      properties: {
        symbol: 'cat'
      }
    },
    {
      type: 'Feature',
      geometry: {
        type: 'Point',
        coordinates: [42, 42]
      },
      properties: {
        symbol: 'dog'
      }
    }
  ]
};

const layout = {
  'icon-image': ['get', 'symbol'],
  'icon-size': 0.25
};

const dog = useTemplateRef('dog');
</script>

<style lang="scss">
@import "maplibre-gl/dist/maplibre-gl.css";
</style>
```

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

### Basic Map with Navigation Control

Source: https://indoorequal.github.io/vue-maplibre-gl/examples/basic

Use this component to display a basic MapLibre GL map. Ensure you have imported the necessary components and MapLibre GL CSS. Replace 'get_your_own_api_key_3YeFnghdqUJJpIvlgLti' with your actual MapTiler API key.

```vue
<template>
  <mgl-map
    :map-style="style"
    :center="center"
    :zoom="zoom"
    height="500px"
  >
    <mgl-navigation-control />
  </mgl-map>
</template>

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

const style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=get_your_own_api_key_3YeFnghdqUJJpIvlgLti';
const center = [12.550343, 55.665957];
const zoom = 8;
</script>

<style lang="scss">
@import "maplibre-gl/dist/maplibre-gl.css";
</style>
```

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

### Import RasterDEMTileSource

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglRasterDemSource

Import the RasterDEMTileSource component from the vue-maplibre-gl library. This is typically done at the top of your Vue component file.

```typescript
import { MglRasterDemSource } from '@indoorequal/vue-maplibre-gl';
```

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

### Import MglVectorSource Component

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglVectorSource

Import the MglVectorSource component from the vue-maplibre-gl library. This is typically done at the top of your Vue component file.

```typescript
import { MglVectorSource } from '@indoorequal/vue-maplibre-gl';
```

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

### MglImageSource Component API

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglImageSource

Details the properties available for the MglImageSource component.

```APIDOC
## MglImageSource Component

See ImageSource

### Props

#### sourceId
* **Type**: `string`
* **Required**: `true`
* **Default**: `undefined`

#### url
* **Type**: `string`
* **Required**: `false`
* **Default**: `undefined`

#### coordinates
* **Type**: `Coordinates`
* **Required**: `false`
* **Default**: `undefined`

### Source

See source.
```

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

### Import MglFillLayer

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglFillLayer

Import the MglFillLayer component from the vue-maplibre-gl library. This is necessary to use the fill layer functionality in your Vue application.

```typescript
import { MglFillLayer } from '@indoorequal/vue-maplibre-gl';
```

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

### Integrate MapLibre Inspect Control with useControl

Source: https://indoorequal.github.io/vue-maplibre-gl/examples/use-control

Use the `useControl` composable to add the MapLibre Inspect control to your map. Ensure MapLibre GL JS CSS and the inspect control CSS are imported. The control is configured with a custom popup.

```vue
<template>
  <mgl-map
    :map-style="style"
    :center="center"
    :zoom="zoom"
    height="500px"
  >
    <InspectControl />
  </mgl-map>
</template>

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

const style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=get_your_own_api_key_3YeFnghdqUJJpIvlgLti';
const center = [12.550343, 55.665957];
const zoom = 8;

const InspectControl = defineComponent({
  setup() {
    return useControl(
      () => {
        return new MaplibreInspect({
          popup: new maplibregl.Popup({
            closeButton: false,
            closeOnClick: false
          })
        });
      },
      {
        position: 'top-right'
      });
  },

  render() {
    return null;
  }
});
</script>

<style lang="scss">
@import "maplibre-gl/dist/maplibre-gl.css";
@import "@maplibre/maplibre-gl-inspect/dist/maplibre-gl-inspect.css";
</style>
```

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

### Add a Marker to a Map

Source: https://indoorequal.github.io/vue-maplibre-gl/examples/marker

Use the MglMarker component to place a marker at specified coordinates. Ensure MapLibre GL CSS is imported.

```vue
<template>
  <mgl-map
    :map-style="style"
    :center="center"
    :zoom="zoom"
    height="500px"
  >
    <mgl-navigation-control />
    <mgl-marker :coordinates="coordinates" color="#cc0000" />
  </mgl-map>
</template>

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

const style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=get_your_own_api_key_3YeFnghdqUJJpIvlgLti';
const center = [12.550343, 55.665957];
const zoom = 8;
const coordinates = [12.550343, 55.665957];
</script>

<style lang="scss">
@import "maplibre-gl/dist/maplibre-gl.css";
</style>
```

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

### Sources

Source: https://indoorequal.github.io/vue-maplibre-gl/api

Components for defining data sources for map layers.

```APIDOC
## Sources

### MglCanvasSource

See CanvasSource
```

```APIDOC
### MglGeoJsonSource

See GeoJSONSource
```

```APIDOC
### MglImageSource

See ImageSource
```

```APIDOC
### MglRasterSource

See RasterTileSource
```

```APIDOC
### MglRasterDemSource

See RasterDEMTileSource
```

```APIDOC
### MglVectorSource

See VectorTileSource
```

```APIDOC
### MglVideoSource

See VideoSource
```

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

### Import MglMap Component

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglMap

Import the MglMap component from the vue-maplibre-gl library. This is the primary component for rendering maps.

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

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

### Controls

Source: https://indoorequal.github.io/vue-maplibre-gl/api

Components for adding interactive controls to the map.

```APIDOC
## Controls

### MglAttributionControl

Render Attribution Control
See AttributionControl
```

```APIDOC
### MglCustomControl

Render a custom control with your content in the default slot
```

```APIDOC
### MglFullscreenControl

Render Fullscreen Control
See FullscreenControl
```

```APIDOC
### MglGeolocateControl

Render GeolocateControl
See GeolocateControl
```

```APIDOC
### MglLogoControl

Render Logo Control
See LogoControl
```

```APIDOC
### MglNavigationControl

Render Navigation Control
See NavigationControl
```

```APIDOC
### MglScaleControl

Render Scale Control
See ScaleControl
```

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

### Render Dynamic GeoJSON Source with Line Layer

Source: https://indoorequal.github.io/vue-maplibre-gl/examples/geojson

This snippet shows how to set up a MapLibre GL map in Vue, add a GeoJSON source, and display it as a line layer. The GeoJSON data is updated dynamically using a timer to animate the line drawing.

```vue
<template>
  <mgl-map
    :map-style="style"
    :center="center"
    :zoom="zoom"
    height="500px"
  >
    <mgl-geo-json-source
      source-id="geojson"
      :data="geojsonSource.data"
    >
      <mgl-line-layer
        layer-id="geojson"
        :layout="layout"
        :paint="paint"
      />
    </mgl-geo-json-source>
  </mgl-map>
</template>

<script setup>
import {  onMounted, ref } from 'vue';
import {
  MglMap,
  MglGeoJsonSource,
  MglLineLayer,
} from '@indoorequal/vue-maplibre-gl';

const style = 'https://api.maptiler.com/maps/streets-v2/style.json?key=get_your_own_api_key_3YeFnghdqUJJpIvlgLti';
const center = [ -122.483696, 37.833818 ];
const zoom = 15;

const lineString = [
  [ -122.483696, 37.833818 ],
  [ -122.483482, 37.833174 ],
  [ -122.483396, 37.8327 ],
  [ -122.483568, 37.832056 ],
  [ -122.48404, 37.831141 ],
  [ -122.48404, 37.830497 ],
  [ -122.483482, 37.82992 ],
  [ -122.483568, 37.829548 ],
  [ -122.48507, 37.829446 ],
  [ -122.4861, 37.828802 ],
  [ -122.486958, 37.82931 ],
  [ -122.487001, 37.830802 ],
  [ -122.487516, 37.831683 ],
  [ -122.488031, 37.832158 ],
  [ -122.488889, 37.832971 ],
  [ -122.489876, 37.832632 ],
  [ -122.490434, 37.832937 ],
  [ -122.49125, 37.832429 ],
  [ -122.491636, 37.832564 ],
  [ -122.492237, 37.833378 ],
  [ -122.493782, 37.833683 ]
];

const geojsonSource = ref({
  data: {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        properties: {},
        geometry: {
          type: 'LineString',
          coordinates: lineString.slice(0, 1)
        }
      }
    ]
  },
});

onMounted(() => {
  setInterval(() => {
    if (geojsonSource.value.data.features[ 0 ].geometry.coordinates.length >= lineString.length) {
      geojsonSource.value.data = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'LineString',
              coordinates: lineString.slice(0, 1)
            }
          }
        ]
      };
    } else {
      geojsonSource.value.data = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'LineString',
              coordinates: [
                ...geojsonSource.value.data.features[ 0 ].geometry.coordinates,
                lineString[ geojsonSource.value.data.features[ 0 ].geometry.coordinates.length ]
              ]
            }
          }
        ]
      };
    }
  }, 1000);
});

const layout = {
  'line-join': 'round',
  'line-cap' : 'round'
};

const paint = {
  'line-color': '#FF0000',
  'line-width': 8
};

</script>

<style lang="scss">
@import "maplibre-gl/dist/maplibre-gl.css";
</style>
```

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

### MglCanvasSource Component Props

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglCanvasSource

This section outlines the properties that can be passed to the MglCanvasSource component.

```APIDOC
## MglCanvasSource Component Props

### Description

This component allows you to add and manage canvas sources within your MapLibre GL map.

### Props

#### `sourceId` 
* **Type**: `string`
* **Required**: `true`
* **Default**: `undefined`
* **Description**: A unique identifier for the canvas source.

#### `coordinates` 
* **Type**: `Coordinates`
* **Required**: `false`
* **Default**: `undefined`
* **Description**: The geographic coordinates defining the extent of the canvas source.

#### `animate` 
* **Type**: `boolean`
* **Required**: `false`
* **Default**: `undefined`
* **Description**: If set to `true`, the canvas source will be animated.

#### `canvas` 
* **Type**: `undefined`
* **Required**: `false`
* **Default**: `undefined`
* **Description**: This prop is currently undefined and may be used for future canvas-related configurations.
```

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

### MglCustomControl Component

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglCustomControl

The MglCustomControl component allows rendering custom content as a control on the map using a default slot.

```APIDOC
## MglCustomControl Component

### Description
Render a custom control with your content in the default slot.

### Props

#### position
* **Type**: `ControlPosition`
* **Required**: `false`
* **Default**: `undefined`

Position on the map to which the control will be added. Valid values are 'top-left', 'top-right', 'bottom-left', and 'bottom-right'. Defaults to 'top-left'.

#### class (since 6.1.0)
* **Type**: `string`
* **Required**: `false`
* **Default**: `"maplibregl-ctrl maplibregl-ctrl-group"`

Set the classes on the control div.

### Slots

#### default
Slot to render the content of the control.

### Source
See source.
```

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

### Import RasterTileSource

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglRasterSource

Import the RasterTileSource component from the vue-maplibre-gl library. This is typically done at the top of your Vue component file.

```typescript
import { RasterTileSource } from '@indoorequal/vue-maplibre-gl';
```

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

### Add MapLibre Control with useControl

Source: https://indoorequal.github.io/vue-maplibre-gl/api/composables.html

The `useControl` composable allows you to add MapLibre GL JS controls that implement the `IControl` interface. It takes a factory function that returns the control instance.

```javascript
import { useControl } from '@indoorequal/vue-maplibre-gl';
import MaplibreInspect from '@maplibre/maplibre-gl-inspect';

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

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

### Layers

Source: https://indoorequal.github.io/vue-maplibre-gl/api

Components for rendering different types of map layers.

```APIDOC
## Layers

### MglBackgroundLayer

Background Layer
See the layer style specification
```

```APIDOC
### MglCircleLayer

Circle Layer
See the layer style specification
```

```APIDOC
### MglFillLayer

Fill Layer
See the layer style specification
```

```APIDOC
### MglFillExtrusionLayer

Fill Extrusion Layer
See the layer style specification
```

```APIDOC
### MglHeatmapLayer

Heatmap Layer
See the layer style specification
```

```APIDOC
### MglHillshadeLayer

Hill shade Layer
See the layer style specification
```

```APIDOC
### MglLineLayer

Line Layer
See the layer style specification
```

```APIDOC
### MglRasterLayer

Raster Layer
See the layer style specification
```

```APIDOC
### MglSymbolLayer

Symbol Layer
See the layer style specification
```

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

### Import MglLogoControl

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglLogoControl

Import the MglLogoControl component from the vue-maplibre-gl library. This is necessary to use the component in your Vue application.

```typescript
import { MglLogoControl } from '@indoorequal/vue-maplibre-gl';
```

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

### Import MglLineLayer Component

Source: https://indoorequal.github.io/vue-maplibre-gl/api/MglLineLayer

Import the MglLineLayer component from the vue-maplibre-gl library. This is typically done at the top of your Vue component file.

```typescript
import { MglLineLayer } from '@indoorequal/vue-maplibre-gl';
```

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

### Add a Custom Control to Map

Source: https://indoorequal.github.io/vue-maplibre-gl/guide/controls.html

The library provides a custom control component that supports `position` and `class` props. You can place your HTML content as a child of this component.

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