javascriptmapbox-gl-js

How to enable Mapbox GL JS "devtools" mode?

In Mapbox GL JS's 3.2.0 change-log notes, they say that they introduced a new feature:

Add a debug UI for the development build of GL JS, enabled with devtools: true in Map options.

If I add devtools: true to the Map options though, nothing happens. How do I enable this mode?

Solution

  • First, set the aforementioned option when creating the Map:

    const map = new mapboxgl.Map({
      container: 'map',
      devtools: true,
});

    Then, you need to load an alternate, development build version of the library. Instead of this import:

    import * as mapboxgl from 'mapbox-gl';

    Use:

    import * as mapboxgl from 'mapbox-gl/dist/mapbox-gl-dev';

    The CDN serves a file called mapbox-gl-dev, but it doesn't seem to allow dev tools, so I'm not sure what it's for.

    Once these changes are made, reload the map. There will be a collapsed widget in the top right of the map with debugging options

    Collapsed devtools

    Expanded devtools