0

Does anyone know how to use the mapbox-gl-directions plugin in angular 14? I am trying to replicate this example: https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-directions/ but I can't find a way. So far I have managed to load the basic map in my service with:

import * as mapboxgl from 'mapbox-gl';

//var MapboxDirections = require('@mapbox/mapbox-gl-directions'); --> this doesn't work

public initializeMap(el: string){

    this.map = new mapboxgl.Map({
      center: this.center,
      container: el,
      style: 'styleUrl',
      zoom: 13
    });
    this.map.addControl(new mapboxgl.NavigationControl());
    // this.map.addControl(
    //   new MapboxDirections({
    //     accessToken: mapboxgl.accessToken
    //   }),
    //   'top-left'
    //   );
  }

For the mapbox-gl-directions I run npm i @mapbox/mapbox-gl-directions in order to install it.

Any help would be appreciated.

Billy
  • 17
  • 1
  • 4

1 Answers1

1

Use this code in the component and check this tutorial, but it is spanish enjoy

export class AppComponent implements OnInit {
  title = 'mapboxApp';

  mapa!: Mapboxgl.Map;

  ngOnInit(){
    Mapboxgl!.accessToken = environment.mapboxKey;
    this.mapa = new Mapboxgl.Map({
    container: 'mapa-mapbox', // container ID
    // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
    style: 'mapbox://styles/mapbox/streets-v11', // style URL
    center: [-75.76, 45.35], // starting position
    zoom: 16.6 // starting zoom
    });

    this.createMarker(-75.76, 45.35 )
  }

  createMarker(lng: number, lat: number) {

    const marker = new Mapboxgl.Marker({
      draggable: true
      }).setLngLat([lng, lat])
      .addTo(this.mapa);

      marker.on('drag', () => {
        console.log(marker.getLngLat());
        
      })

  }
}
Adesegun Koiki
  • 61
  • 4