Skip to content

Mapbox GL JS

Mapbox GL JS is a commercial vector tile mapping library. Requires an access token.

Python Example

1
2
3
4
5
6
7
8
import os
from anymap_ts import MapboxMap

m = MapboxMap(center=[-122.4, 37.8], zoom=10)
m.add_basemap("OpenStreetMap")
m.add_geojson(geojson, name="cities")
m.fly_to(-122.4194, 37.7749, zoom=12)
m

Note: Set the MAPBOX_TOKEN environment variable or pass access_token to the constructor.

TypeScript Implementation

The MapboxRenderer extends MapLibreRenderer since Mapbox GL JS has a similar API:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import mapboxgl from 'mapbox-gl';
import { BaseMapRenderer } from '../core/BaseMapRenderer';
import type { MapWidgetModel } from '../types/anywidget';

export class MapboxRenderer extends BaseMapRenderer<mapboxgl.Map> {
  constructor(model: MapWidgetModel, el: HTMLElement) {
    super(model, el);

    // Set access token
    const token = model.get('access_token') as string;
    if (token) {
      mapboxgl.accessToken = token;
    }

    this.registerMethods();
  }

  protected createMap(): mapboxgl.Map {
    const center = this.model.get('center') as [number, number];
    const zoom = this.model.get('zoom');
    const style = this.model.get('style') as string || 'mapbox://styles/mapbox/streets-v12';

    return new mapboxgl.Map({
      container: this.mapContainer!,
      style,
      center,
      zoom,
    });
  }

  async initialize(): Promise<void> {
    this.createMapContainer();
    this.map = this.createMap();
    this.setupModelListeners();
    this.setupMapEvents();

    await new Promise<void>((resolve) => {
      this.map!.on('load', () => {
        this.isMapReady = true;
        this.processPendingCalls();
        resolve();
      });
    });
  }
}

Key Methods

Adding GeoJSON

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
private handleAddGeoJSON(args: unknown[], kwargs: Record<string, unknown>): void {
  const geojson = kwargs.data as FeatureCollection;
  const name = kwargs.name as string;
  const sourceId = `${name}-source`;

  // Add source
  this.map.addSource(sourceId, {
    type: 'geojson',
    data: geojson,
  });

  // Determine layer type
  const layerType = this.inferLayerType(geojson);

  // Add layer
  this.map.addLayer({
    id: name,
    type: layerType,
    source: sourceId,
    paint: this.getDefaultPaint(layerType),
  });
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
private handleFlyTo(args: unknown[], kwargs: Record<string, unknown>): void {
  const [lng, lat] = args as [number, number];

  this.map.flyTo({
    center: [lng, lat],
    zoom: kwargs.zoom as number,
    bearing: kwargs.bearing as number,
    pitch: kwargs.pitch as number,
    duration: kwargs.duration as number || 2000,
  });
}

Mapbox-Specific Features

3D Terrain

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
private handleSetTerrain(args: unknown[], kwargs: Record<string, unknown>): void {
  // Add terrain source
  this.map.addSource('mapbox-dem', {
    type: 'raster-dem',
    url: 'mapbox://mapbox.mapbox-terrain-dem-v1',
    tileSize: 512,
    maxzoom: 14,
  });

  // Enable terrain
  this.map.setTerrain({
    source: 'mapbox-dem',
    exaggeration: kwargs.exaggeration as number || 1.5,
  });

  // Add sky layer
  this.map.addLayer({
    id: 'sky',
    type: 'sky',
    paint: {
      'sky-type': 'atmosphere',
    },
  });
}

3D Buildings

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
private handleAdd3DBuildings(args: unknown[], kwargs: Record<string, unknown>): void {
  this.map.addLayer({
    id: '3d-buildings',
    source: 'composite',
    'source-layer': 'building',
    filter: ['==', 'extrude', 'true'],
    type: 'fill-extrusion',
    minzoom: 15,
    paint: {
      'fill-extrusion-color': '#aaa',
      'fill-extrusion-height': ['get', 'height'],
      'fill-extrusion-base': ['get', 'min_height'],
      'fill-extrusion-opacity': 0.6,
    },
  });
}

Source Files

  • Renderer: src/mapbox/MapboxRenderer.ts
  • Types: src/types/mapbox.ts

See also: Python notebook example