🏗 Vue コンポーネントを使用して、Nuxt アプリに Mapbox を簡単に追加できます
🌎 簡単にアクセスできる useMapbox コンポーザブル
👷 カスタムコンポーネントを作成するための defineMapboxMarker & defineMapboxPopup
🎛️ 独自のコントロールを作成するための defineMapboxControl
📖 ルートをまたいで永続的な地図インスタンス

クイックセットアップ

nuxt-mapbox & mapbox-gl の依存関係をプロジェクトに追加します

npx nuxi@latest module add nuxt-mapbox
npm install --save-dev mapbox-gl

nuxt-mapbox を nuxt.config.ts の modules セクションに追加します

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

Mapbox API キーを nuxt.config.ts の mapbox セクションに追加します

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

使い方

リファレンスについては、Mapbox GL JS ドキュメントを参照してください。

地図インスタンスはコンポーネントで作成されます。すべてのオプションをコンポーネントのプロパティから指定できます

例

    <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
      }"
    />

Map 内にそれぞれのコンポーネントをネストすることで、レイヤー、ソース、およびコントロールを追加できます

例

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

開発

# 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

nuxt-mapbox

Nuxt-Mapbox

Nuxt との洗練された Mapbox 統合

📖 新しいドキュメントをご覧ください！

機能

クイックセットアップ

使い方

開発