How to import mapbox-gl-draw in Angular 2/4?

Question

I import the module into my Angular 2/4 application as follows:

import { MapboxDraw } from '@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw'; 

and using it in one of the following components:

 var draw = new MapboxDraw({ displayControlsDefault: false, controls: { polygon: true, trash: true } }); map.addControl(draw); 

but I get an error when opening the page:

 ERROR TypeError: __WEBPACK_IMPORTED_MODULE_4__mapbox_mapbox_gl_draw_dist_mapbox_gl_draw__.MapboxDraw is not a constructor 

What is the best way to import mapbox-gl-draw?

Answer 1

This is a minimal sample application that runs on my machine: it is based on this small github project: https://github.com/haoliangyu/ngx-mapboxgl-starter p>

 import { Component } from '@angular/core'; import * as mapboxgl from 'mapbox-gl'; import * as MapboxDraw from 'mapbox-gl-draw'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { ngOnInit() { mapboxgl.accessToken = 'your Token'; let map = new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/light-v9', zoom: 5, center: [-78.880453, 42.897852] }); let Draw = new MapboxDraw(); map.addControl(Draw) map.on('load', function() { // ALL YOUR APPLICATION CODE }); } } 

 #map { width: 500px; height: 500px; } 

 <div id='map'></div> 

Note that I use 'mapbox-gl-draw' instead of '@mapbox/mapbox-gl-draw' . Therefore, you can try installing this package through npm install mapbox-gl-draw . I tried a later one, but for me this throws an error. Also, don't forget to add the required CSS screenshot of mapbox-gl-draw.

Answer 2

I have npm npm install @mapbox/mapbox-gl-draw installed

added css to angular-cli.json

 "../node_modules/@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css", 

Component

 import { Component } from '@angular/core'; import * as mapboxgl from 'mapbox-gl'; import * as MapboxDraw from '@mapbox/mapbox-gl-draw'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { static t; ngOnInit() { mapboxgl.accessToken = 'Token'; AppComponent.t.map= new mapboxgl.Map({ container: 'map', style: 'mapbox://styles/mapbox/light-v9', zoom: 5, center: [-78.880453, 42.897852] }); const draw = new MapboxDraw({ displayControlsDefault: false, controls: { polygon: true, trash: true } }); AppComponent.t.map.addControl(draw); } }