Typescript definition d.ts for mapbox-gl-draw

Question

I was trying to create a typed definition for the mapbox-gl-draw project. But failed. Could somebody give some hints?

The javascript file is like this

'use strict';

var Setup = require('./src/setup');
var Options = require('./src/options');
var API = require('./src/api');
const Constants = require('./src/constants');

var Draw = function(options) {
  options = Options(options);

  var ctx = {
    options: options
  };

  var api = API(ctx);
  ctx.api = api;

  var setup = Setup(ctx);
  api.addTo = setup.addTo;
  api.remove = setup.remove;
  api.types = Constants.types;
  api.options = options;

  return api;
};

module.exports = Draw;

window.mapboxgl = window.mapboxgl || {};
window.mapboxgl.Draw = Draw;

My index.d.ts is like

declare namespace mapboxgl {
    export function Draw(options?:any):any

}
declare module 'mapbox-gl-draw' {
    export = mapboxgl;
}

Answer 1

For this javascript:

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v8',
  center: [40, -74.50],
  zoom: 9
});

you could for example create mapOptions:

interface MapOptions {
 container?: string;
 style?: string,
 center?: number[];
 zoom?: number;
}


declare module "mapbox-gl-draw" {

}

Answer 2

The best types for this extension are currently sitting in this git issue:

https://github.com/mapbox/mapbox-gl-draw/issues/842

It's not clear why they haven't been submitted successfully to DefinitelyTyped. Included for posterity below:

declare module '@mapbox/mapbox-gl-draw' {

import {Feature, FeatureCollection} from 'geojson'
  import {IControl} from 'mapbox-gl'
  import {IMapboxDrawControls} from '@mapbox/mapbox-gl-draw'

  namespace MapboxDraw {
    export interface IMapboxDrawControls {
      point?: boolean,
      line_string?: boolean,
      polygon?: boolean
      trash?: boolean,
      combine_features?: boolean,
      uncombine_features?: boolean
    }
  }

  class MapboxDraw implements IControl {

    getDefaultPosition: () => string

    constructor(options?: {
      displayControlsDefault?: boolean,
      keybindings?: boolean,
      touchEnabled?: boolean,
      boxSelect?: boolean,
      clickBuffer?: number,
      touchBuffer?: number,
      controls?: IMapboxDrawControls,
      styles?: object[],
      modes?: object,
      defaultMode?: string,
      userProperties?: boolean
    });

    public add(geojson: object): string[]

    public get(featureId: string): Feature | undefined

    public getFeatureIdsAt(point: { x: number, y: number }): string[]

    public getSelectedIds(): string[]

    public getSelected(): FeatureCollection

    public getSelectedPoints(): FeatureCollection

    public getAll(): FeatureCollection

    public delete(ids: string | string[]): this

    public deleteAll(): this

    public set(featureCollection: FeatureCollection): string[]

    public trash(): this

    public combineFeatures(): this

    public uncombineFeatures(): this

    public getMode(): string

    public changeMode(mode: string, options?: object): this

    public setFeatureProperty(featureId: string, property: string, value: any): this

    onAdd(map: mapboxgl.Map): HTMLElement

    onRemove(map: mapboxgl.Map): any

  }

  export = MapboxDraw
}

Answer 3

Update August 2021

---

They are now available at DefinitelyTyped 🙌🏼

DefinitelyTyped GitHub reference

NPM reference

Use: npm install --save-dev @types/mapbox__mapbox-gl-draw