https://github.com/danh121097/vue-maptiler-gl
Vue 3 components and composables for MapTiler GL JS - Build interactive maps with ease
https://github.com/danh121097/vue-maptiler-gl
component composables interactive-maps maps maptiler maptiler-sdk typescript vue3 vuejs
Last synced: about 2 months ago
JSON representation
Vue 3 components and composables for MapTiler GL JS - Build interactive maps with ease
- Host: GitHub
- URL: https://github.com/danh121097/vue-maptiler-gl
- Owner: danh121097
- License: mit
- Created: 2025-12-29T08:27:16.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2025-12-29T09:04:14.000Z (5 months ago)
- Last Synced: 2026-01-01T06:48:47.088Z (5 months ago)
- Topics: component, composables, interactive-maps, maps, maptiler, maptiler-sdk, typescript, vue3, vuejs
- Language: TypeScript
- Homepage: https://vue-maptiler-gl.vercel.app
- Size: 227 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue3 MapTiler GL
[](https://www.npmjs.com/package/vue3-maptiler-gl) [](https://www.npmjs.com/package/vue3-maptiler-gl) [](https://github.com/danh121097/vue-mapTiler-gl/stargazers) [](https://github.com/danh121097/vue-mapTiler-gl/blob/main/LICENSE)
> **The most comprehensive Vue 3 library for MapTiler GL JS** - Build interactive maps with 10+ components and 15+ composables
A powerful, feature-rich Vue 3 component library that provides an intuitive, reactive way to build interactive maps in your Vue applications using MapTiler GL JS.
## ✨ Features
- 🗺️ **Interactive Maps** - High-performance vector maps with WebGL rendering
- 🧩 **10+ Vue Components** - MapTiler, GeoJsonSource, FillLayer, CircleLayer, LineLayer, SymbolLayer, Marker, PopUp, Image, GeolocateControls
- 🔧 **15+ Composables** - Complete map management, animations, events, and utilities
- 🎯 **Full TypeScript Support** - Comprehensive type definitions and interfaces
- ⚡ **High Performance** - Optimized rendering with automatic resource cleanup
- 📱 **Mobile-Friendly** - Touch controls and responsive design for all devices
- 🌐 **Self-Contained** - Bundled CSS and automatic dependency management
- 🔄 **Reactive Data Binding** - Seamless integration with Vue 3's reactivity system
## 📦 Installation
### Using Yarn (Recommended)
```bash
yarn add vue3-maptiler-gl
```
### Using npm
```bash
npm install vue3-maptiler-gl
```
### Using pnpm
```bash
pnpm add vue3-maptiler-gl
```
## 🚀 Quick Start
```vue
📍
Welcome to Vue3 MapTiler GL!
Interactive maps made easy with Vue 3
import { ref } from 'vue';
import {
MapTiler,
GeoJsonSource,
FillLayer,
CircleLayer,
Marker,
PopUp,
GeolocateControls,
} from 'vue3-maptiler-gl';
import 'vue3-maptiler-gl/dist/style.css';
const mapOptions = ref({
style: 'YOUR_STYLE',
center: [0, 0],
zoom: 2,
});
const geoJsonData = ref({
type: 'FeatureCollection',
features: [
{
type: 'Feature',
geometry: { type: 'Point', coordinates: [0, 0] },
properties: { name: 'Sample Point' },
},
],
});
const fillStyle = ref({
'fill-color': '#088',
'fill-opacity': 0.8,
});
const circleStyle = ref({
'circle-radius': 6,
'circle-color': '#007cbf',
});
function onMapLoad(map) {
console.log('Map loaded:', map);
}
.marker {
font-size: 24px;
cursor: pointer;
}
.popup-content {
padding: 10px;
max-width: 200px;
}
```
## 🧩 Components
Vue3 MapTiler GL provides 10+ reactive Vue components:
| Component | Description |
| --------------------- | ------------------------------------------------------------- |
| **MapTiler** | Main map container with comprehensive event handling |
| **GeoJsonSource** | Reactive data source for GeoJSON data with clustering support |
| **FillLayer** | Render filled polygons with customizable styling |
| **CircleLayer** | Display point data as circles with dynamic sizing |
| **LineLayer** | Render linear features like routes and boundaries |
| **SymbolLayer** | Display icons and text labels |
| **Marker** | HTML markers with drag support and custom content |
| **PopUp** | Interactive popup windows with custom HTML |
| **Image** | Manage and load images for map styles |
| **GeolocateControls** | User location tracking with comprehensive events |
## 🔧 Composables
15+ powerful composables for advanced map functionality:
### Map Management
- `useCreateMapTiler` - Enhanced map creation with error handling
- `useMapTiler` - Simplified map state management
### Layer Management
- `useCreateFillLayer` - Fill layer creation and management
- `useCreateCircleLayer` - Circle layer for point visualization
- `useCreateLineLayer` - Line layer for linear features
- `useCreateSymbolLayer` - Symbol layer for icons and text
### Source Management
- `useCreateGeoJsonSource` - GeoJSON source with reactive data
- `useGeoJsonSource` - Simplified source management
### Controls
- `useGeolocateControl` - User location tracking
### Events
- `useMapEventListener` - Map event handling
- `useLayerEventListener` - Layer-specific events
### Utilities
- `useFlyTo` - Smooth map animations
- `useEaseTo` - Easing animations
- `useJumpTo` - Instant position changes
- `useBounds` - Bounds management
- `useZoom` - Zoom controls
- `useLogger` - Consistent logging
## 🎯 TypeScript Support
Vue3 MapTiler GL includes comprehensive TypeScript support:
```typescript
import { ref } from 'vue';
import {
MapTiler,
GeoJsonSource,
FillLayer,
type MapTiler,
type FillLayerStyle,
type GeoJSONSourceSpecification,
} from 'vue3-maptiler-gl';
const mapOptions = ref({
style: 'YOUR_STYLE',
center: [0, 0],
zoom: 2,
});
const fillStyle = ref({
'fill-color': '#088',
'fill-opacity': 0.8,
});
const geoJsonData = ref({
type: 'FeatureCollection',
features: [],
});
```
## 🌟 Advanced Example with Composables
```vue
import { ref } from 'vue';
import {
useCreateMapTiler,
useFlyTo,
useMapEventListener,
useCreateGeoJsonSource,
} from 'vue3-maptiler-gl';
const mapContainer = ref();
const mapStyle = ref('YOUR_STYLE');
// Create map with enhanced error handling
const { mapInstance, setCenter, setZoom } = useCreateMapTiler(
mapContainer,
mapStyle,
{
onLoad: (map) => console.log('Map loaded:', map),
onError: (error) => console.error('Map error:', error),
debug: true,
},
);
// Add smooth animations
const { flyTo } = useFlyTo({ map: mapInstance });
// Create reactive data source
const { setData } = useCreateGeoJsonSource({
map: mapInstance,
id: 'my-source',
data: { type: 'FeatureCollection', features: [] },
});
// Listen to map events
useMapEventListener({
map: mapInstance,
event: 'click',
handler: (event) => {
flyTo({
center: event.lngLat,
zoom: 12,
duration: 2000,
});
},
});
```
## 📚 Documentation
- **[Getting Started](https://danh121097.github.io/vue-maptiler-gl/guide/getting-started)** - Learn the basics and see examples
- **[Installation Guide](https://danh121097.github.io/vue-maptiler-gl/guide/installation)** - Detailed setup instructions
- **[Configuration](https://danh121097.github.io/vue-maptiler-gl/guide/configuration)** - Advanced configuration options
- **[Components API](https://danh121097.github.io/vue-maptiler-gl/api/components)** - Complete component documentation
- **[Composables API](https://danh121097.github.io/vue-maptiler-gl/api/composables)** - Composables reference
- **[TypeScript Types](https://danh121097.github.io/vue-maptiler-gl/api/types)** - Type definitions
- **[Live Examples](https://danh121097.github.io/vue-maptiler-gl/examples/)** - Interactive demos
## 🛠️ Development
```bash
# Clone the repository
git clone https://github.com/danh121097/vue-maptiler-gl.git
cd vue-maptiler-gl
# Install dependencies
yarn install
# Start development server
yarn dev
# Build the library
yarn build
# Run documentation
yarn docs:dev
```
## 🌟 Why Choose Vue3 MapTiler GL?
- **🎯 Vue 3 Native** - Built specifically for Vue 3 with Composition API support
- **🗺️ MapTiler GL JS** - Uses the open-source MapTiler GL JS for high-performance rendering
- **🧩 Component-Based** - 10+ Vue components for maps, layers, sources, markers, and controls
- **🔧 Powerful Composables** - 15+ composables for map management, animations, and utilities
- **📚 Comprehensive Documentation** - Detailed guides, API references, and examples
- **⚡ High Performance** - Optimized for performance with automatic resource cleanup
- **🌐 Open Source** - MIT licensed with active community support
- **📱 Mobile Ready** - Touch-friendly controls and responsive design
## 🤝 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.
### Development Setup
```bash
# Clone the repository
git clone https://github.com/danh121097/vue-maptiler-gl.git
cd vue-maptiler-gl
# Install dependencies
yarn install
# Start development server
yarn dev
# Run tests
yarn test
# Build the library
yarn build
# Run documentation
yarn docs:dev
```
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## 🙏 Acknowledgments
- Built on top of [MapTiler GL JS](https://docs.maptiler.com/) - The open-source mapping library
- Inspired by the Vue.js ecosystem and community
- Thanks to all contributors and users who make this project better
## 📞 Support
- 📖 [Documentation](https://danh121097.github.io/vue-maptiler-gl/) - Comprehensive guides and API reference
- 🐛 [Issues](https://github.com/danh121097/vue-maptiler-gl/issues) - Bug reports and feature requests
- 💬 [Discussions](https://github.com/danh121097/vue-maptiler-gl/discussions) - Community discussions and questions
- ⭐ [GitHub](https://github.com/danh121097/vue-maptiler-gl) - Star the project if you find it useful!
---
**Made with ❤️ for the Vue.js community**