Vue MapLibre GL

Vue 3 components and composables for MapLibre GL JS - Build interactive maps with ease

A comprehensive Vue 3 component library for MapLibre GL JS that provides an intuitive, reactive way to build interactive maps in your Vue applications.

✨ Features

• 🗺️ Interactive Maps - Create beautiful, interactive maps with MapLibre GL JS
• 🧩 Component-Based - Use Vue components for markers, layers, controls, and more
• 🎯 TypeScript Support - Full TypeScript support with comprehensive type definitions
• 🚀 Performance - Optimized for performance with efficient rendering
• 🔧 Composables - Powerful composables for map interactions and state management
• 📱 Responsive - Mobile-friendly maps that work across all devices

📦 Installation

Using Yarn (Recommended)

yarn add vue3-maplibre-gl

Using npm

npm install vue3-maplibre-gl

Using pnpm

pnpm add vue3-maplibre-gl

🚀 Quick Start

<template>
  <MapLibreMap
    :map-style="mapStyle"
    :center="[0, 0]"
    :zoom="2"
    style="height: 400px"
  >
    <MapLibreMarker :lng-lat="[0, 0]">
      <div class="marker">📍</div>
    </MapLibreMarker>
  </MapLibreMap>
</template>

<script setup>
import { MapLibreMap, MapLibreMarker } from 'vue3-maplibre-gl';
import 'vue3-maplibre-gl/dist/style.css';

const mapStyle = 'https://demotiles.maplibre.org/style.json';
</script>

📚 Documentation

• Getting Started - Learn the basics
• Installation Guide - Detailed setup instructions
• API Reference - Complete component documentation
• Examples - Live examples and demos

🛠️ Development

# Clone the repository
git clone https://github.com/danh121097/vue-mapbox-gl.git
cd vue-mapbox-gl

# Install dependencies
yarn install

# Start development server
yarn dev

# Build the library
yarn build

# Run documentation
yarn docs:dev

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Built on top of MapLibre GL JS
• Inspired by the Vue.js ecosystem and community

📞 Support

• 📖 Documentation
• 🐛 Issues
• 💬 Discussions