title: Mapbox Typescript
body: <p>I managed to get Leaflet working with Angular 2 and Webpack by following this project.</p>
  
  <p><a href="https://github.com/haoliangyu/angular2-leaflet-starter" rel="noreferrer">angular 2 leaflet starter</a></p>
  
  <p>I can see the typings configured in "browser.d.ts":</p>
  
  <pre><code>/// &lt;reference path="browser\ambient\leaflet\leaflet.d.ts" /&gt;
  </code></pre>
  
  <p>webpack.config.js defines an entry point:</p>
  
  <pre><code>...
  entry: {
      'polyfills': './src/polyfills.ts',
      'libs': './src/libs.ts',
      'main': './src/main.ts'
  },
  ...
  </code></pre>
  
  <p>The "libs.ts" contains the import of the Leaflet module:</p>
  
  <pre><code>import 'leaflet';
  </code></pre>
  
  <p>I'm using Atom as a code editor. It now recognises all the Leaflet classes and methods. I can now do things like this in Angular 2:</p>
  
  <pre><code>import {Map, TileLayer} from 'leaflet';
  ...
  this.baseMaps = {
      StreetMap: new TileLayer('mapbox.streets')
  };
  </code></pre>
  
  <p>Here is where my problems start. I'm trying to use mapbox.js. What I did was I installed mapbox.js library and typings:</p>
  
  <pre><code>npm install mapbox.js --save
  typings install mapbox --save
  </code></pre>
  
  <p>This is where I'm stuck. For the life of me I can't figure out how to do what Leaflet managed to do.</p>
  
  <pre><code>import 'mapbox';
  </code></pre>
  
  <p>Doesn't work.</p>
  
  <pre><code>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
  </code></pre>
  
  <p>I can see "browser.d.ts" has the following:</p>
  
  <pre><code>/// &lt;reference path="browser\ambient\leaflet\leaflet.d.ts" /&gt;
  /// &lt;reference path="browser\ambient\mapbox\mapbox.d.ts" /&gt;
  </code></pre>
  
  <p>I thought maybe Mapbox will just work, because it extends the Leaflet library?</p>
  
  <p>It seems that I can basically do something like this, which is the standard javascript way:</p>
  
  <pre><code>this.baseMaps = {
      StreetMap: L.mapbox.tileLayer('mapbox.streets')
  };
  </code></pre>
  
  <p>But not this:</p>
  
  <pre><code>this.baseMaps = {
      StreetMap: new TileLayer('mapbox.streets')
  };
  </code></pre>
  
  <p>This obviously doesn't work either:</p>
  
  <pre><code>import {Map, TileLayer} from 'mapbox';
  </code></pre>
  
  <p>What am I doing wrong? </p>