nuxt-mapbox v1.5.9
Nuxt-Mapbox
Elegant Mapbox integration with Nuxt
Features
- 🏗 Easily add Mapbox to your Nuxt app with Vue components
- 🌎 useMapbox Composable for easy access
- 👷 defineMapboxMarker & defineMapboxPopup for making custom components
- 📖 Supports many map instances across routes
TODO
PopupMarkerAdd rest of global properties to configEvent Listeners- Unit tests
- Custom Control Component?
Quick Setup
- Add
nuxt-mapbox
&mapbox-gl
dependencies to your project
# Using pnpm
pnpm add -D nuxt-mapbox mapbox-gl
# Using yarn
yarn add --dev nuxt-mapbox mapbox-gl
# Using npm
npm install --save-dev nuxt-mapbox mapbox-gl
- Add
nuxt-mapbox
to themodules
section ofnuxt.config.ts
export default defineNuxtConfig({
modules: [
'nuxt-mapbox'
]
})
- Add your Mapbox API key to the
mapbox
section ofnuxt.config.ts
export default defineNuxtConfig({
modules: [
'nuxt-mapbox'
],
mapbox: {
accessToken: '{API_KEY}'
}
})
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
useMapbox(mapId, (map) => {
// Do whatever with map here
})
You can access the map instance ref 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
})
Custom Popups & Markers
While it is recommended to use the default popup & marker components, making your own is easy using defineMapboxMarker & defineMapboxPopup.
By passing a template ref you can put custom html directly into your component
Examples:
const popup = defineMapboxPopup(popupId, options, templateRef)
popup?.setLngLat(lnglat)
NOTE: Because of the way markers are implemented in Mapbox, if passing a template ref to defineMapboxPopup you have to define properties in a callback like so:
const markerRef = defineMapboxMarker(markerId, options, templateRef, (marker) => {
marker.setLngLat([110, 6])
})
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
9 days ago
9 days ago
11 days ago
11 days ago
11 days ago
2 months ago
2 months ago
3 months ago
3 months ago
4 months ago
4 months ago
6 months ago
7 months ago
5 months ago
7 months ago
6 months ago
6 months ago
5 months ago
6 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
5 months ago
5 months ago
6 months ago
7 months ago
11 months ago
10 months ago
10 months ago
11 months ago
10 months ago
11 months ago
11 months ago
11 months ago
10 months ago
8 months ago
8 months ago
9 months ago
10 months ago
9 months ago
10 months ago
11 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
10 months ago
12 months ago
10 months ago
9 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
9 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago