---
title: "Mapbox GL | Grafana Plugins documentation"
description: "Learn how to build interactive 3D maps with Mapbox GL JS mapping technology in the Business Text panel."
---

# Mapbox GL

This example demonstrates external resource usage in the Business Text plugin. The idea comes from [Josiah Solomon](https://github.com/yosiasz).

Follow the outlined steps to display [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/example/3d-buildings/) on your Grafana dashboard.

[](/media/docs/grafana/panels-visualizations/business-text/mapboxgl.png)

## Content

HTML ![Copy code to clipboard](/media/images/icons/icon-copy-small-2.svg) Copy

```html
<div id="map" />
```

## After Content Ready

> Warning
> 
> Plug-in libraries may change their versions and the code in the example may not work or cause an error.

Use the following for the **JavaScript &gt; After Content Ready**:

js ![Copy code to clipboard](/media/images/icons/icon-copy-small-2.svg) Copy

```js
import("https://cdn.jsdelivr.net/npm/mapbox-gl@3.5.1/+esm").then(
  ({ default: mapboxGl }) => {
    console.log("mapboxgl", mapboxGl);

    mapboxGl.accessToken = "TOKEN";
    const map = new mapboxGl.Map({
      // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
      style: "mapbox://styles/mapbox/light-v11",
      center: [-74.0066, 40.7135],
      zoom: 15.5,
      pitch: 45,
      bearing: -17.6,
      container: "map",
      antialias: true,
    });

    map.on("style.load", () => {
      // Insert the layer beneath any symbol layer.
      const layers = map.getStyle().layers;
      const labelLayerId = layers.find(
        (layer) => layer.type === "symbol" && layer.layout["text-field"]
      ).id;

      // The 'building' layer in the Mapbox Streets
      // vector tileset contains building height data
      // from OpenStreetMap.
      map.addLayer(
        {
          id: "add-3d-buildings",
          source: "composite",
          "source-layer": "building",
          filter: ["==", "extrude", "true"],
          type: "fill-extrusion",
          minzoom: 15,
          paint: {
            "fill-extrusion-color": "#aaa",

            // Use an 'interpolate' expression to
            // add a smooth transition effect to
            // the buildings as the user zooms in.
            "fill-extrusion-height": [
              "interpolate",
              ["linear"],
              ["zoom"],
              15,
              0,
              15.05,
              ["get", "height"],
            ],
            "fill-extrusion-base": [
              "interpolate",
              ["linear"],
              ["zoom"],
              15,
              0,
              15.05,
              ["get", "min_height"],
            ],
            "fill-extrusion-opacity": 0.6,
          },
        },
        labelLayerId
      );
    });
  }
);
```