vue-mapbox-gl

You can customize the visual content of a marker using slots:

• default slot: Use this to provide custom HTML for the marker element. This is useful when you want to use an icon or a custom div instead of the default marker.
• popup slot: Use this to define the content that will be rendered inside the attached popup when the marker is clicked.

The StoreLocator component displays a clustered list of points of interest (POIs) on a map and in an adjacent filtered list. To use it, you must import the component, its CSS, and the required Mapbox GL and Geocoder CSS files.

<script setup>
  // Import the component and its CSS
  import { StoreLocator } from '@studiometa/vue-mapbox-gl';
  import '@studiometa/vue-mapbox-gl/index.css';

  // Import Mapbox required CSS stylesheets
  import 'mapbox-gl/dist/mapbox-gl.css';
  import '@mapbox/mapbox-gl-geocoder/lib/mapbox-gl-geocoder.css';
</script>

<template>
  <StoreLocator>
    <!-- Content goes here -->
  </StoreLocator>
</template>

The MapboxGeolocateControl component adds a button to the map that allows users to center the map on their current GPS location. Note that the button will not be displayed if the user has blocked access to their geolocation.

<script setup>
  import { MapboxMap, MapboxGeolocateControl } from '@studiometa/vue-mapbox-gl';
</script>

<MapboxMap
  style="height: 400px"
  access-token="..."
  map-style="mapbox://styles/mapbox/streets-v11">
  <MapboxGeolocateControl />
</MapboxMap>

To begin using @studiometa/vue-mapbox-gl, follow the introduction guide to understand the core concepts and setup requirements for integrating Mapbox GL components into your Vue 3 application.

[Introduction Guide](/guide/introduction/)

The MapboxImages component allows you to add multiple images to a Mapbox GL map simultaneously. These images can then be referenced in Mapbox GL layers using properties like icon-image, background-pattern, fill-pattern, and line-pattern. It acts as a bulk wrapper around the MapboxImage component.

To use it, provide a sources array containing image definitions. The component emits a ready event once all images are successfully loaded and added to the map.

<MapboxImages
  :sources="[
    { id: 'my-icon', src: 'https://example.com/icon.png' },
    { id: 'pattern', src: '/local-pattern.png', options: { sdf: true } }
  ]"
/>

The MapboxGeocoder component displays a search form to search for places using the Mapbox Geocoding API. It can be used inside a <MapboxMap> component or as a standalone component outside of a map.

Important Requirements:

• You must manually import the Mapbox Geocoder stylesheet: import '@mapbox/mapbox-gl-geocoder/lib/mapbox-gl-geocoder.css';.
• If using the component outside of a <MapboxMap>, you must provide the accessToken prop.
• This component requires @mapbox/mapbox-gl-geocoder version 4.5.0 or higher.

<template>
  <MapboxMap
    style="margin-top: 1em; height: 400px;"
    :access-token="MAPBOX_API_KEY"
    map-style="mapbox://styles/mapbox/streets-v11">
    <MapboxGeocoder />
  </MapboxMap>
</template>

<script>
  import '@mapbox/mapbox-gl-geocoder/lib/mapbox-gl-geocoder.css';
</script>

The MapboxNavigationControl component adds standard Mapbox navigation UI to your map, providing zoom buttons (+ and -) and a compass button for map rotation. It wraps the underlying Mapbox GL JS NavigationControl functionality.

<MapboxNavigationControl />

To ensure the components function correctly, you must manually install the following peer dependencies:

1. mapbox-gl: Required for all map components.
2. @mapbox/mapbox-gl-geocoder: Only required if you intend to use the MapboxGeocoder component.

# Install mapbox-gl
npm install mapbox-gl

# The geocoder package is only required if you use the `MapboxGeocoder` component
npm install @mapbox/mapbox-gl-geocoder

To use the library, import the necessary components like MapboxMap and MapboxMarker from @studiometa/vue-mapbox-gl. You must also import the Mapbox GL stylesheet (mapbox-gl/dist/mapbox-gl.css) for the map to render correctly. Provide your Mapbox access-token to the MapboxMap component.

<script setup>
  import { MapboxMap, MapboxMarker } from '@studiometa/vue-mapbox-gl';
  import 'mapbox-gl/dist/mapbox-gl.css';
</script>

<template>
  <MapboxMap access-token="...">
    <MapboxMarker position="[0, 0]" />
  </MapboxMap>
</template>