3

I am using Aurelia/Typescript + Mapbox in a project of mine. But I am having troubles using mapbox-gl and mapbox-gl-directions in combination with typscript.

For mapbox-gl I am using this typscript definition file. I can initialize a map and and markers/layers to it etc.

Firstly, what I am trying to do is add markers (starting point and destination, which works) and add a line between them with a logical route. For the line between the markers I am trying to use mapbox-gl-directions. Sadly mapbox-gl-directions is not included in this definition file, so I am trying to create one for myself.

I have created the following typescript definition file. It obvious that a lot is still missing, but this should get me started.

declare namespace mapboxgl {
    export class Directions extends Control {
        constructor(options?: DirectionOptions);
    }

    export interface DirectionOptions {
        unit?: string; 
        profile?: string;
        container?: string;
        proximity?: Array<number>;
    }
}

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

I created a custom component Map for the mapbox-gl map. These are my imports on the .ts. file. They work fine and I get both .js files in my dist folder when I run the project.

import * as mapboxgl from 'mapbox-gl';
import * as mapboxgldirections from 'mapbox-gl-directions';

The problems start when I try to use the directions in my initializeMap function.

initializeMap = () : void => {
       this.map = new mapboxgl.Map({
            container: this.options.mapElement,
            style: this.options.style,
            center: [this.options.startLongitude, this.options.startLatitude],
            zoom: this.options.startingZoom
       });  
       // It gives an error on the following line
       this.map.addControl(new mapboxgldirections.Directions());
   }

I get the following error:

 mapbox-gl-directions.js:4 Uncaught ReferenceError: mapboxgl is not defined

It looks like mapbox-gl-directions has a dependency on mapbox-gl and should be used after mapbox-gl is included, which is only logical. But it is generating the map with no problems, so why is mapbox not defined, even though I use mapbox.Map without any problems?

It is a lot of information but here is the question. How can I make sure mapbox-gl is ready when I try to use mapbox-gl-directions?

Note that I installed both modules with NPM

 npm install mapbox-gl --save
 npm install mapbpx-gl-directions --save

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.