Introduction

The NOBEARS Nuxt Mapbox Module provides a Nuxt 3 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.

Technical 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.

Key Features

• Full TypeScript support with proper type definitions
• Reactive viewport management
• Efficient point clustering with Supercluster
• Custom marker rendering with Vue components
• Proper cleanup and memory management
• Direct access to Mapbox GL JS instance when needed

API Reference

The module's API is organized into several categories:

• Components - Vue components for map management
• Composables - Vue composables for map interaction
• Utils - Utility functions for common map operations

Each component and utility is documented with TypeScript types, examples, and usage patterns. The documentation assumes familiarity with Vue 3, Nuxt, and basic mapping concepts.

Browser Support

The module requires a browser that supports WebGL and modern JavaScript features. It's tested against:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Dependencies

• Vue 3.x
• Nuxt 3.x
• Mapbox GL JS 2.x
• Supercluster (for clustering support)