vue-map-gl

Vue 3 components for MapLibre GL JS and Mapbox GL JS. Modeled after react-map-gl.

Installation

MapLibre:

npm install vue-map-gl maplibre-gl

Mapbox:

npm install vue-map-gl mapbox-gl

Requires Vue 3.3+ and either maplibre-gl 5.0+ or mapbox-gl 3.0+.

Quick Start

<template>
  <div class="map-wrap">
    <Map
      :initialViewState="{ longitude: 116.4, latitude: 39.9, zoom: 4 }"
      mapStyle="https://demotiles.maplibre.org/style.json"
    />
  </div>
</template>

<script setup lang="ts">
import { Map } from 'vue-map-gl/maplibre'
import 'maplibre-gl/dist/maplibre-gl.css'
</script>

<style>
.map-wrap { width: 100%; height: 100%; }
</style>

Imports

// MapLibre
import { Map, Marker, Popup } from 'vue-map-gl/maplibre'

// Mapbox
import { Map, Marker, Popup } from 'vue-map-gl/mapbox'

You can also import directly from the underlying packages:

import { Map } from '@map-gl/vue-maplibre'
import { Map } from '@map-gl/vue-mapbox'

Components

| Component | Description | |-----------|-------------| | Map | Root map component | | Source | Data source (GeoJSON, raster, vector, etc.) | | Layer | Visual layer bound to a source | | Marker | Custom HTML marker | | Popup | Info popup anchored to a coordinate | | NavigationControl | Zoom and compass buttons | | ScaleControl | Distance scale bar | | GeolocateControl | Browser geolocation | | FullscreenControl | Fullscreen toggle | | AttributionControl | Attribution links | | TerrainControl | Terrain toggle (MapLibre only) | | LogoControl | MapLibre logo (MapLibre only) |

Documentation

See the monorepo for full documentation, examples, and development instructions.

License

MIT