Custom Components

While it is recommended to use the default components, making your own is easy with the built in composables!

Custom Popups & Markers

You can use defineMapboxPopup & defineMapboxMarker for custom marker & popup components By passing a template ref you can put custom html directly into your component.

Be sure to nest your custom components inside a map instance so the map-id can be auto injected. You can also pass the map ID manually into the functions.

If you pass options as a ref, the marker or popup will react to changes in settings.

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])
    })

Custom Map Component

If you would like to make your own map component, you can use defineMapboxInstance

Example:

    // NOTE: Map instance will be null on server & until it is loaded on client
    const map = defineMapboxInstance(MAP_DIV_ID, options);

Custom Geocoder

If you want to use the geocoder without the map, use MapboxCustomGeocoder instead. You can even use your own inputs!

Example:

  <MapboxCustomGeocoder v-model="result" />
  <MapboxCustomGeocoder>
    <input>
  </MapboxCustomGeocoder>

  const result = ref<MapboxGeocoder.Result>();