Getting started

Import

All components

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

app.use(VueMaplibreGl)

Specific components

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

app.component('MglMap', MglMap);

Single-File-Components

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

Displaying a map

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