Examples

Explore practical examples of Vue MapLibre GL components and composables in action.

Getting Started

All examples use the same basic setup. Make sure you have Vue MapLibre GL installed:

npm install vue3-maplibre-gl

And import the CSS in your main application file:

import 'vue3-maplibre-gl/dist/style.css';

Available Examples

🗺️ Basic Map

Learn how to create a simple map with different styles and basic configuration options.

📍 Markers

Add interactive markers to your map with custom styling, drag functionality, and event handling.

🎨 Layers

Work with different layer types including fill, circle, line, and symbol layers with dynamic styling.

🎮 Controls

Add navigation controls, geolocation, and custom controls to enhance user interaction.

Example Structure

Each example includes:

• Live Demo: Interactive code that you can copy and use
• Source Code: Complete Vue component with explanations
• Key Features: Highlighted functionality and use cases
• Related APIs: Links to relevant components and composables

Running Examples Locally

You can run these examples in your local development environment:

1. Clone the repository
2. Install dependencies: yarn install
3. Start the development server: yarn dev
4. Navigate to the examples section

Contributing Examples

Have a great example to share? We welcome contributions! Please:

1. Fork the repository
2. Create a new example file in the appropriate category
3. Follow the existing example format
4. Submit a pull request

Need Help?

• Check the API documentation for component details
• Review composables documentation for advanced functionality
• Visit our GitHub repository for issues and discussions