Export control component, for custom control directives

[raysuelzer]

I want to be able to implement a custom directive for the mapbox-draw plugin. By exposing the ControlComponent directive, I can create a directive in the same pattern that you use for the other control directives.

[raysuelzer]

Here is an example of my use case. It is much cleaner to be able to do this. My goal eventually once I get a decent working directive for this control is to put in a PR to make it part of controls. But, in the mean time this will allow me a clean way to work on the directive in my app.

@Directive({
  // tslint:disable-next-line:directive-selector
  selector: '[mglExtensionDraw]'
})
export class DrawControlDirective implements OnInit {
  /* Init inputs */
  @Input() drawOptions?: DrawOptions;

  constructor(
    private mapService: MapService,
    @Host() private controlComponent: ControlComponent
  ) { }

  ngOnInit() {
    this.mapService.mapCreated$.subscribe(() => {
      if (this.controlComponent.control) {
        throw new Error('Another control is already set for this control');
      }
      const options: DrawOptions = this.drawOptions || {};

      this.controlComponent.control = new MapboxDraw(options);
      this.mapService.addControl(this.controlComponent.control, this.controlComponent.position);
    });
  }
}

In the template:

            <mgl-map [style]="'mapbox://styles/mapbox/streets-v9?optimize=true'"
                (load)="mapLoaded($event)"
                [zoom]="[5]" [center]="[-98.50, 39]">
                <mgl-control mglExtensionDraw></mgl-control>
            </mgl-map>

Final result:

[Wykks]

Sure, thanks !

Also address this #78 (comment)

[raysuelzer]

Any idea when this will go into a release?

[Wykks]

This week-end probably 😃