Mapbox typescript

Question

I managed to get Leaflet working with Angular 2 and Webpack by completing this project.

angular 2 start sheet

I see the typing configured in "browser.d.ts":

/// <reference path="browser\ambient\leaflet\leaflet.d.ts" /> 

webpack.config.js defines the entry point:

 ... entry: { 'polyfills': './src/polyfills.ts', 'libs': './src/libs.ts', 'main': './src/main.ts' }, ... 

The "libs.ts" contains the import of the "Flyer" module:

 import 'leaflet'; 

I use Atom as a code editor. Now it recognizes all the classes and methods of the Flyer. Now I can do something similar in Angular 2:

 import {Map, TileLayer} from 'leaflet'; ... this.baseMaps = { StreetMap: new TileLayer('mapbox.streets') }; 

This is where my problems begin. I am trying to use mapbox.js. What I did, I installed the mapbox.js library and tickets:

 npm install mapbox.js --save typings install mapbox --save 

This is where I am stuck. For life, I can’t understand how to do what Leaflet managed to do.

 import 'mapbox'; 

Does not work.

 ERROR in ./src/libs.ts Module not found: Error: Cannot resolve module 'mapbox' in C:\Develop\angular2-webpack-starter\src @ ./src/libs.ts 3:0-17 

I see that "browser.d.ts" has the following:

 /// <reference path="browser\ambient\leaflet\leaflet.d.ts" /> /// <reference path="browser\ambient\mapbox\mapbox.d.ts" /> 

I thought maybe Mapbox would work because it extends the Leaflet library?

It seems that I can basically do something like this, which is the standard javascript way:

 this.baseMaps = { StreetMap: L.mapbox.tileLayer('mapbox.streets') }; 

But not this:

 this.baseMaps = { StreetMap: new TileLayer('mapbox.streets') }; 

This obviously doesn't work either:

 import {Map, TileLayer} from 'mapbox'; 

What am I doing wrong?

Answer 1

You can simply use the mapbox.js NPM module and it will contain everything you need.

npm install mapbox.js --save

See this example. We use Webpack to load the module, and with TypeScript you need to explicitly specify import * for untyped modules.

 import * as L from 'mapbox.js'; const map = L.mapbox.map('mapContainer', 'mapbox.streets'); // do stuff. 

Answer 2

For someone like me who just wanted to get a card to show in his project, here's how I got it. Based mainly on the Angular2 Mapbox-gl Starter .

Adding Mapbox-gl to Angular 2 - Webpack and Typescript

Install the necessary packages ...
npm install mapbox-gl --save
npm install @types/mapbox-gl --save
npm install @types/geojson --save

Add stuff to webpack ...

 module.exports = function(options) { return { resolve: { alias: { 'mapbox-gl': '../node_modules/mapbox-gl/dist/mapbox-gl.js' } }, module: { postLoaders: [ { include: /node_modules\/mapbox-gl-shaders/, loader: 'transform', query: 'brfs' } ] } } } 

Add map.service.ts (for some reason I had to use the full relative paths in the import) ...

 import { Injectable } from '@angular/core'; import * as mapboxgl from '../../../../node_modules/mapbox-gl/dist/mapbox-gl.js'; import { Map } from '../../../../node_modules/mapbox-gl/dist/mapbox-gl.js'; @Injectable() export class MapService { map: Map<any, any>; constructor() { (mapboxgl as any).accessToken = 'YOUR_MAPBOX_TOKEN_HERE'; } } 

Add maps to your component ...

 import { Component } from '@angular/core'; import { MapService } from '../../api/resources/map.service'; import { Map } from '../../../../node_modules/mapbox-gl/dist/mapbox-gl.js'; @Component({ selector: 'my-component', styles: [ require('./my-component.component.less') ], template: require('./my-component.component.html'), providers: [ MapService ] }) export class MyComponentComponent { constructor(private mapService: MapService) { } ngOnInit() { let map = new Map({ container: 'map', style: 'mapbox://styles/mapbox/light-v9', zoom: 5, center: [-78.880453, 42.897852] }); this.mapService.map = map; } } 

Add div map to your html ...

 // my-component.component.html <div id="map" class="mapboxgl-map"></div> 

For styles, I use LESS , so I imported mapbox styles ...

 // my-component.component.less @import (less) '../../../../node_modules/mapbox-gl/dist/mapbox-gl.css';