Introduction

The NOBEARS Nuxt Mapbox Module provides a Nuxt 4 wrapper around Mapbox GL JS, offering a component-based API with built-in clustering support. It's designed to integrate seamlessly with Nuxt applications while maintaining full access to the Mapbox GL JS API.

Overview

The module exposes a set of Vue components that map directly to Mapbox GL JS concepts:

• Mapbox: Basic wrapper for the Mapbox GL JS instance for simple use cases
• MapboxMap: Core map component that initializes the Mapbox GL JS instance
• MapboxSource: Manages data sources (GeoJSON, Vector Tiles, Raster Tiles)
• MapboxLayer: Handles layer management with proper lifecycle hooks
• MapboxMarker: Renders markers with Vue components
• MapboxSupercluster: Implements efficient point clustering
• MapboxClusterMarker: Renders cluster markers with expandable functionality

Each component is built with TypeScript and provides proper type definitions for props, events, and exposed methods. The module also includes utility functions for common map operations like focusing features, expanding clusters, and managing viewport bounds.