{"id":48469883,"url":"https://github.com/danh121097/vue-maptiler-gl","last_synced_at":"2026-04-07T06:02:43.905Z","repository":{"id":330950753,"uuid":"1124564512","full_name":"danh121097/vue-maptiler-gl","owner":"danh121097","description":"Vue 3 components and composables for MapTiler GL JS - Build interactive maps with ease","archived":false,"fork":false,"pushed_at":"2025-12-29T09:04:14.000Z","size":232,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-01-01T06:48:47.088Z","etag":null,"topics":["component","composables","interactive-maps","maps","maptiler","maptiler-sdk","typescript","vue3","vuejs"],"latest_commit_sha":null,"homepage":"https://vue-maptiler-gl.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/danh121097.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-29T08:27:16.000Z","updated_at":"2025-12-29T09:04:18.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/danh121097/vue-maptiler-gl","commit_stats":null,"previous_names":["danh121097/vue-maptiler-gl"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/danh121097/vue-maptiler-gl","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danh121097%2Fvue-maptiler-gl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danh121097%2Fvue-maptiler-gl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danh121097%2Fvue-maptiler-gl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danh121097%2Fvue-maptiler-gl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danh121097","download_url":"https://codeload.github.com/danh121097/vue-maptiler-gl/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danh121097%2Fvue-maptiler-gl/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31501903,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T03:10:19.677Z","status":"ssl_error","status_checked_at":"2026-04-07T03:10:13.982Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","composables","interactive-maps","maps","maptiler","maptiler-sdk","typescript","vue3","vuejs"],"created_at":"2026-04-07T06:02:41.967Z","updated_at":"2026-04-07T06:02:43.890Z","avatar_url":"https://github.com/danh121097.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue3 MapTiler GL\n\n[![npm](https://img.shields.io/npm/v/vue3-maptiler-gl)](https://www.npmjs.com/package/vue3-maptiler-gl) [![Downloads](https://img.shields.io/npm/dt/vue3-maptiler-gl)](https://www.npmjs.com/package/vue3-maptiler-gl) [![Stars](https://img.shields.io/github/stars/danh121097/vue-mapTiler-gl?style=flat-square)](https://github.com/danh121097/vue-mapTiler-gl/stargazers) [![License](https://img.shields.io/npm/l/vue3-maptiler-gl)](https://github.com/danh121097/vue-mapTiler-gl/blob/main/LICENSE)\n\n\u003e **The most comprehensive Vue 3 library for MapTiler GL JS** - Build interactive maps with 10+ components and 15+ composables\n\nA 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.\n\n## ✨ Features\n\n- 🗺️ **Interactive Maps** - High-performance vector maps with WebGL rendering\n- 🧩 **10+ Vue Components** - MapTiler, GeoJsonSource, FillLayer, CircleLayer, LineLayer, SymbolLayer, Marker, PopUp, Image, GeolocateControls\n- 🔧 **15+ Composables** - Complete map management, animations, events, and utilities\n- 🎯 **Full TypeScript Support** - Comprehensive type definitions and interfaces\n- ⚡ **High Performance** - Optimized rendering with automatic resource cleanup\n- 📱 **Mobile-Friendly** - Touch controls and responsive design for all devices\n- 🌐 **Self-Contained** - Bundled CSS and automatic dependency management\n- 🔄 **Reactive Data Binding** - Seamless integration with Vue 3's reactivity system\n\n## 📦 Installation\n\n### Using Yarn (Recommended)\n\n```bash\nyarn add vue3-maptiler-gl\n```\n\n### Using npm\n\n```bash\nnpm install vue3-maptiler-gl\n```\n\n### Using pnpm\n\n```bash\npnpm add vue3-maptiler-gl\n```\n\n## 🚀 Quick Start\n\n```vue\n\u003ctemplate\u003e\n  \u003cMapTiler :options=\"mapOptions\" style=\"height: 500px\" @load=\"onMapLoad\"\u003e\n    \u003c!-- GeoJSON Data Source --\u003e\n    \u003cGeoJsonSource :data=\"geoJsonData\"\u003e\n      \u003cFillLayer :style=\"fillStyle\" /\u003e\n      \u003cCircleLayer :style=\"circleStyle\" /\u003e\n    \u003c/GeoJsonSource\u003e\n\n    \u003c!-- Interactive Marker --\u003e\n    \u003cMarker :lnglat=\"[0, 0]\" :draggable=\"true\"\u003e\n      \u003cdiv class=\"marker\"\u003e📍\u003c/div\u003e\n    \u003c/Marker\u003e\n\n    \u003c!-- Popup --\u003e\n    \u003cPopUp :lnglat=\"[0, 0]\" :show=\"true\"\u003e\n      \u003cdiv class=\"popup-content\"\u003e\n        \u003ch3\u003eWelcome to Vue3 MapTiler GL!\u003c/h3\u003e\n        \u003cp\u003eInteractive maps made easy with Vue 3\u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/PopUp\u003e\n\n    \u003c!-- Geolocation Control --\u003e\n    \u003cGeolocateControls position=\"top-right\" /\u003e\n  \u003c/MapTiler\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { ref } from 'vue';\nimport {\n  MapTiler,\n  GeoJsonSource,\n  FillLayer,\n  CircleLayer,\n  Marker,\n  PopUp,\n  GeolocateControls,\n} from 'vue3-maptiler-gl';\nimport 'vue3-maptiler-gl/dist/style.css';\n\nconst mapOptions = ref({\n  style: 'YOUR_STYLE',\n  center: [0, 0],\n  zoom: 2,\n});\n\nconst geoJsonData = ref({\n  type: 'FeatureCollection',\n  features: [\n    {\n      type: 'Feature',\n      geometry: { type: 'Point', coordinates: [0, 0] },\n      properties: { name: 'Sample Point' },\n    },\n  ],\n});\n\nconst fillStyle = ref({\n  'fill-color': '#088',\n  'fill-opacity': 0.8,\n});\n\nconst circleStyle = ref({\n  'circle-radius': 6,\n  'circle-color': '#007cbf',\n});\n\nfunction onMapLoad(map) {\n  console.log('Map loaded:', map);\n}\n\u003c/script\u003e\n\n\u003cstyle\u003e\n.marker {\n  font-size: 24px;\n  cursor: pointer;\n}\n\n.popup-content {\n  padding: 10px;\n  max-width: 200px;\n}\n\u003c/style\u003e\n```\n\n## 🧩 Components\n\nVue3 MapTiler GL provides 10+ reactive Vue components:\n\n| Component             | Description                                                   |\n| --------------------- | ------------------------------------------------------------- |\n| **MapTiler**          | Main map container with comprehensive event handling          |\n| **GeoJsonSource**     | Reactive data source for GeoJSON data with clustering support |\n| **FillLayer**         | Render filled polygons with customizable styling              |\n| **CircleLayer**       | Display point data as circles with dynamic sizing             |\n| **LineLayer**         | Render linear features like routes and boundaries             |\n| **SymbolLayer**       | Display icons and text labels                                 |\n| **Marker**            | HTML markers with drag support and custom content             |\n| **PopUp**             | Interactive popup windows with custom HTML                    |\n| **Image**             | Manage and load images for map styles                         |\n| **GeolocateControls** | User location tracking with comprehensive events              |\n\n## 🔧 Composables\n\n15+ powerful composables for advanced map functionality:\n\n### Map Management\n\n- `useCreateMapTiler` - Enhanced map creation with error handling\n- `useMapTiler` - Simplified map state management\n\n### Layer Management\n\n- `useCreateFillLayer` - Fill layer creation and management\n- `useCreateCircleLayer` - Circle layer for point visualization\n- `useCreateLineLayer` - Line layer for linear features\n- `useCreateSymbolLayer` - Symbol layer for icons and text\n\n### Source Management\n\n- `useCreateGeoJsonSource` - GeoJSON source with reactive data\n- `useGeoJsonSource` - Simplified source management\n\n### Controls\n\n- `useGeolocateControl` - User location tracking\n\n### Events\n\n- `useMapEventListener` - Map event handling\n- `useLayerEventListener` - Layer-specific events\n\n### Utilities\n\n- `useFlyTo` - Smooth map animations\n- `useEaseTo` - Easing animations\n- `useJumpTo` - Instant position changes\n- `useBounds` - Bounds management\n- `useZoom` - Zoom controls\n- `useLogger` - Consistent logging\n\n## 🎯 TypeScript Support\n\nVue3 MapTiler GL includes comprehensive TypeScript support:\n\n```typescript\nimport { ref } from 'vue';\nimport {\n  MapTiler,\n  GeoJsonSource,\n  FillLayer,\n  type MapTiler,\n  type FillLayerStyle,\n  type GeoJSONSourceSpecification,\n} from 'vue3-maptiler-gl';\n\nconst mapOptions = ref\u003cMapTilerProps['options']\u003e({\n  style: 'YOUR_STYLE',\n  center: [0, 0],\n  zoom: 2,\n});\n\nconst fillStyle = ref\u003cFillLayerStyle\u003e({\n  'fill-color': '#088',\n  'fill-opacity': 0.8,\n});\n\nconst geoJsonData = ref\u003cGeoJSONSourceSpecification['data']\u003e({\n  type: 'FeatureCollection',\n  features: [],\n});\n```\n\n## 🌟 Advanced Example with Composables\n\n```vue\n\u003cscript setup\u003e\nimport { ref } from 'vue';\nimport {\n  useCreateMapTiler,\n  useFlyTo,\n  useMapEventListener,\n  useCreateGeoJsonSource,\n} from 'vue3-maptiler-gl';\n\nconst mapContainer = ref();\nconst mapStyle = ref('YOUR_STYLE');\n\n// Create map with enhanced error handling\nconst { mapInstance, setCenter, setZoom } = useCreateMapTiler(\n  mapContainer,\n  mapStyle,\n  {\n    onLoad: (map) =\u003e console.log('Map loaded:', map),\n    onError: (error) =\u003e console.error('Map error:', error),\n    debug: true,\n  },\n);\n\n// Add smooth animations\nconst { flyTo } = useFlyTo({ map: mapInstance });\n\n// Create reactive data source\nconst { setData } = useCreateGeoJsonSource({\n  map: mapInstance,\n  id: 'my-source',\n  data: { type: 'FeatureCollection', features: [] },\n});\n\n// Listen to map events\nuseMapEventListener({\n  map: mapInstance,\n  event: 'click',\n  handler: (event) =\u003e {\n    flyTo({\n      center: event.lngLat,\n      zoom: 12,\n      duration: 2000,\n    });\n  },\n});\n\u003c/script\u003e\n```\n\n## 📚 Documentation\n\n- **[Getting Started](https://danh121097.github.io/vue-maptiler-gl/guide/getting-started)** - Learn the basics and see examples\n- **[Installation Guide](https://danh121097.github.io/vue-maptiler-gl/guide/installation)** - Detailed setup instructions\n- **[Configuration](https://danh121097.github.io/vue-maptiler-gl/guide/configuration)** - Advanced configuration options\n- **[Components API](https://danh121097.github.io/vue-maptiler-gl/api/components)** - Complete component documentation\n- **[Composables API](https://danh121097.github.io/vue-maptiler-gl/api/composables)** - Composables reference\n- **[TypeScript Types](https://danh121097.github.io/vue-maptiler-gl/api/types)** - Type definitions\n- **[Live Examples](https://danh121097.github.io/vue-maptiler-gl/examples/)** - Interactive demos\n\n## 🛠️ Development\n\n```bash\n# Clone the repository\ngit clone https://github.com/danh121097/vue-maptiler-gl.git\ncd vue-maptiler-gl\n\n# Install dependencies\nyarn install\n\n# Start development server\nyarn dev\n\n# Build the library\nyarn build\n\n# Run documentation\nyarn docs:dev\n```\n\n## 🌟 Why Choose Vue3 MapTiler GL?\n\n- **🎯 Vue 3 Native** - Built specifically for Vue 3 with Composition API support\n- **🗺️ MapTiler GL JS** - Uses the open-source MapTiler GL JS for high-performance rendering\n- **🧩 Component-Based** - 10+ Vue components for maps, layers, sources, markers, and controls\n- **🔧 Powerful Composables** - 15+ composables for map management, animations, and utilities\n- **📚 Comprehensive Documentation** - Detailed guides, API references, and examples\n- **⚡ High Performance** - Optimized for performance with automatic resource cleanup\n- **🌐 Open Source** - MIT licensed with active community support\n- **📱 Mobile Ready** - Touch-friendly controls and responsive design\n\n## 🤝 Contributing\n\nContributions 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.\n\n### Development Setup\n\n```bash\n# Clone the repository\ngit clone https://github.com/danh121097/vue-maptiler-gl.git\ncd vue-maptiler-gl\n\n# Install dependencies\nyarn install\n\n# Start development server\nyarn dev\n\n# Run tests\nyarn test\n\n# Build the library\nyarn build\n\n# Run documentation\nyarn docs:dev\n```\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- Built on top of [MapTiler GL JS](https://docs.maptiler.com/) - The open-source mapping library\n- Inspired by the Vue.js ecosystem and community\n- Thanks to all contributors and users who make this project better\n\n## 📞 Support\n\n- 📖 [Documentation](https://danh121097.github.io/vue-maptiler-gl/) - Comprehensive guides and API reference\n- 🐛 [Issues](https://github.com/danh121097/vue-maptiler-gl/issues) - Bug reports and feature requests\n- 💬 [Discussions](https://github.com/danh121097/vue-maptiler-gl/discussions) - Community discussions and questions\n- ⭐ [GitHub](https://github.com/danh121097/vue-maptiler-gl) - Star the project if you find it useful!\n\n---\n\n**Made with ❤️ for the Vue.js community**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanh121097%2Fvue-maptiler-gl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanh121097%2Fvue-maptiler-gl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanh121097%2Fvue-maptiler-gl/lists"}