nuxt-mapbox

Nuxt-Mapbox

Elegant Mapbox integration with Nuxt

• ✨  Release Notes

Features

• 🏗  Easily add Mapbox to your Nuxt app with Vue components
• 🌎  useMapbox Composable for easy access
• 📖  Supports many map instances across routes

TODO

• Popup
• Marker
• Add rest of global properties to config
• Event Listeners
• Unit tests
• Custom Control Component?

Quick Setup

• Add nuxt-mapbox dependency to your project

# Using pnpm
pnpm add -D nuxt-mapbox

# Using yarn
yarn add --dev nuxt-mapbox

# Using npm
npm install --save-dev nuxt-mapbox

• Add nuxt-mapbox to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'nuxt-mapbox'
  ]
})

Usage

View the Mapbox GL JS Docs for reference.

Map instances are created with components. You can provide all the options through component props

Example:

    <MapboxMap
      map-id="{ID}"
      style="position: absolute; top: 0; bottom: 0; left: 250px; width: 500px;"
      :options="{
        style: 'mapbox://styles/mapbox/light-v11', // style URL
        center: [-68.137343, 45.137451], // starting position
        zoom: 5 // starting zoom
      }"
    >

You can add Layers & Controls by nesting their components inside the Map

Examples:

    <MapboxMap>
      <MapboxSource 
        source-id="geojson"
        :source="{
          type: 'geojson',
          data: '/test.geojson'
        }"
      />
      <MapboxLayer
        source-id="geojson"
        :layer="{
          source: 'geojson',
          id: 'geojson-layer',
          type: 'fill'
        }"
      />
    </MapboxMap>

    <MapboxMap>
      <MapboxLayer
        source-id="{ID}"
        :source="{
          type: 'geojson',
          data: '/test.geojson'
        }"
        :layer="{
          source: '{ID}',
          id: 'geojson-layer',
          type: 'fill'
        }"
      />
      <MapboxFullscreenControl />
    </MapboxMap>

You can access the map instance with the useMapbox composable. You must provide the map id.

The map instance will not be available until the page is fully loaded, so you must access it through a callback

    const map = useMapbox(mapId, (map) => {
      // Do whatever with map here
    })

You can access the map instance directly with _useMapboxInstance

NOTE: The map instance will be null until is initialized so you cannot access it directly on setup. Use a watcher as shown or useMapbox instead:

    const map = _useMapboxInstance(mapId)
    watch(map, () => {
      if (map.value)
        // Do whatever with map
    })

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release