Basic 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="<MAP_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, Sources & Controls by nesting their respective components inside the Map

Examples:

<MapboxMap
  map-id="<MAP_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
  }"
>
  <MapboxSource 
    source-id="<MAP_ID>"
    :source="{
      type: 'geojson',
      data: '/test.geojson'
    }"
  />
  <MapboxLayer
    :layer="{
      source: '<MAP_ID>',
      id: 'geojson-layer',
      type: 'fill'
    }"
  />
  <MapboxGeolocateControl position="top-left" />
</MapboxMap>
Edit this page on GitHub