Implements mapbox-gl-draw features

[alcaidio]

https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-draw/

[dmytro-gokun]

This is an open source project. If you need a new feature implemented - you are welcome to create a PR, discuss implementation details etc. I do not think anyone will do it for you unless they need it for themselves.

[eloquia]

Is there any progress on this? I'm willing to help out if there's some direction.

Currently I'm trying to figure out how to begin. It seems like the MapService in the ngx-mapbox-gl library would be able to pretty easily consume the MapboxDrawControl

[eloquia]

Even though there are some attempts at adding TypeScript definitions, I do not see them in either the DefinitelyTyped repo nor the mapbox-gl-draw repo. I guess it's time to create a fork and make a PR directly to the DefinitelyTyped repo

[dmytro-gokun]

@eloquia Absolutely! Please go ahead and create type definitions for mapbox-gl-draw.

[dmytro-gokun]

FYR: https://github.com/mapbox/mapbox-gl-draw/pull/877

[eloquia]

Yeah, I'm thinking that it's a tsconfig thing that I need to update in order to get their TypeScript definitions, because my intellisense is complaining that it can't pull the preexisting definitions.

The definitions that they use are very... loose. Everything is pretty much an Object because they are actually GeoJSON Objects.

DefinitelyTyped doesn't have any PRs for the mapbox-gl-draw library: https://github.com/DefinitelyTyped/DefinitelyTyped/pulls?utf8=%E2%9C%93&q=is%3Apr+mapboxgl. And according to the GH issue you linked, they're still using this workaround to get the Type definitions in their project. I'll see how to proceed and report back

EDIT: So there is no index.d.ts file in @mapbox/mapbox-gl-draw, so I will have to add them to DefinitelyTyped

[dmytro-gokun]

@eloquia Yes, you need to create a new type definitions for mapbox-gl-draw in DefinitelyTyped. The PR I've referenced above may serve as a starting point, but nothing more.

[eloquia]

Thanks for linking the starting point. I'll have to get more comfortable with the draw plugin and then I'll link to the DefinitelyTyped PR when I submit it. Hopefully it won't take too long

[eloquia]

Just as a status update, I've been pretty stuck between the Type definition file and the ngx-mapbox-gl project. It's like the definitions don't seem to line up. I'll keep trying though.

If anyone else wants to follow along and give it a shot, I pasted the following type definitions into node_modules/@types/mapbox__mapbox-gl-draw/index.d.ts while in the ngx-mapbox-gl project and am trying to build out a single Draw feature

// TypeScript definitions file for @mapbox/mapbox-gl-draw.
// This file is based on the Readme.md file in the repository and should be manually updated once the interface changes.

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
}