Support for Maplibre directions

[arroui]

I'd like some indications on the best way to do this.

I would like to integrate the plug-in here https://github.com/maplibre/maplibre-gl-directions In the documentation, there is two control :

• BearingsControl
• LoadingControl

Both depends on an instance of MapLibreGlDirections My questions are :

• Should I keep the controls separate? If so, what would be the best way to share the instance?
• Should this be a part of the wrapper, or published independently ?

This is the code I've tried so far :

import {AfterContentInit, Directive, Host} from '@angular/core';
import MapLibreGlDirections, {BearingsControl} from "@maplibre/maplibre-gl-directions";
import {ControlComponent, MapService} from "@maplibre/ngx-maplibre-gl";

@Directive({
  selector: '[routingMglBearings]',
  standalone: true
})
export class BearingsControlDirective implements AfterContentInit {
  directions: MapLibreGlDirections;

  constructor(
    private mapService: MapService,
    @Host() private bearingsControl: ControlComponent<BearingsControl>,
  ) {
  }

  ngAfterContentInit() {
    this.mapService.mapCreated$.subscribe(() => {
      if (this.bearingsControl.control) {
        throw new Error('Another control is already set for this control');
      }

      this.directions = new MapLibreGlDirections(this.mapService.mapInstance)

      this.bearingsControl.control = new BearingsControl(this.directions, {});

      this.mapService.addControl(
        this.bearingsControl.control,
        this.bearingsControl.position
      );
    });
  }
}

[HarelM]

Since this requires installing a different library I think the best approach would be a separate package as well. In theory, we could have the code in this repo if needed, or not, depends on what you believe would be the best approach. I'm not deeply familiar with the directions library, but if all one need is to initialize it, I'm not sure this fancy directive is worth all the trouble, a simple instruction in the readme may solve this, wouldn't it?

[arroui]

I agree, Simply initialising it with the load event is better. A section in the ReadMe about plug-ins would help ?

<mgl-map
  (mapLoad)="setDirections($event)"
>

setDirections(map: any) {
    this.directions = new MapLibreGlDirections(map)

    map.addControl(this.directions);
 }

[HarelM]

We can add it to the showcase I guess. Might require some other changes, but it would have the most impact I believe.

But readme can work as well I guess.