Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove support for building mapbox-gl with webpack and other non-browserify bundlers #3235

Merged
merged 3 commits into from
Sep 21, 2016
Merged

Remove support for building mapbox-gl with webpack and other non-browserify bundlers #3235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
26cded3
remove support for building mapbox-gl with webpack
mourner Sep 21, 2016
95be025
clarify usage of mapbox-gl with other module bundlers
mourner Sep 21, 2016
5e4de77
remove webpack config example
mourner Sep 21, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 8 additions & 30 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,12 @@ It is part of the [Mapbox GL ecosystem](https://github.com/mapbox/mapbox-gl) whi

[<img width="981" alt="Mapbox GL JS gallery" src="https://cloud.githubusercontent.com/assets/281306/14547142/a3c98294-025f-11e6-92f4-d6b0f50c8e89.png">](https://www.mapbox.com/gallery/)

## Using Mapbox GL JS with a `<script>` tag
## Using Mapbox vector tiles and styles

To use the [vector tiles](https://www.mapbox.com/maps/) and styles hosted on http://mapbox.com, you must [create an account](https://www.mapbox.com/studio/signup/) and then [obtain an access token](https://www.mapbox.com/studio/account/tokens/). You may learn more about access tokens [here](https://www.mapbox.com/help/define-access-token/).

## Using Mapbox GL JS with a `<script>` tag

```html
<!DOCTYPE html>
<html>
Expand All @@ -41,8 +43,6 @@ To use the [vector tiles](https://www.mapbox.com/maps/) and styles hosted on htt

## Using Mapbox GL JS with [Browserify](http://browserify.org/)

To use the [vector tiles](https://www.mapbox.com/maps/) and styles hosted on http://mapbox.com, you must [create an account](https://www.mapbox.com/studio/signup/) and then [obtain an access token](https://www.mapbox.com/studio/account/tokens/). You may learn more about access tokens [here](https://www.mapbox.com/help/define-access-token/).

Install the [`mapbox-gl` npm package](https://www.npmjs.com/package/mapbox-gl)

```bash
Expand All @@ -60,40 +60,18 @@ var map = new mapboxgl.Map({
});
```

## Using Mapbox GL JS with [Webpack](https://webpack.github.io/)

To use the [vector tiles](https://www.mapbox.com/maps/) and styles hosted on http://mapbox.com, you must [create an account](https://www.mapbox.com/studio/signup/) and then [obtain an access token](https://www.mapbox.com/studio/account/tokens/). You may learn more about access tokens [here](https://www.mapbox.com/help/define-access-token/).

Install the [`mapbox-gl` npm package](https://www.npmjs.com/package/mapbox-gl)
and the required loaders.

```bash
npm install --save mapbox-gl
npm install --save transform-loader
npm install --save json-loader
npm install --save webworkify-webpack
```

Add the [required additional options from webpack.config.example.js](webpack.config.example.js)
to your webpack configuration.
## Using Mapbox GL JS with other module systems

Instantiate `mapboxgl.Map`
Since our build system depends on Browserify, to use Mapbox GL with any other module bundlers like [Webpack](https://webpack.github.io/), [SystemJS](https://github.com/systemjs/systemjs), you have to require the distribution build instead of the package entry point:

```js
var mapboxgl = require('mapbox-gl');
mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
container: '<your HTML element id>',
style: 'mapbox://styles/mapbox/streets-v9'
});
var mapboxgl = require('mapbox-gl/dist/mapbox-gl.js');
```

### Using import

If you're using the ES6 module system, you can import `mapboxgl` like so:
If you're using the ES6 module system (e.g. with [Rollup](https://github.com/rollup/rollup) as a bundler), you can import `mapboxgl` like so:

```js
import mapboxgl from 'mapbox-gl';
import mapboxgl from 'mapbox-gl/dist/mapbox-gl.js';
```

## Third Party Projects
Expand Down
6 changes: 2 additions & 4 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,9 +75,7 @@
"unist-util-visit": "1.1.0",
"vinyl": "1.1.1",
"vinyl-fs": "2.4.3",
"watchify": "^3.7.0",
"webpack": "^1.13.1",
"webworkify-webpack": "^1.1.3"
"watchify": "^3.7.0"
},
"browserify": {
"transform": [
Expand Down Expand Up @@ -108,7 +106,7 @@
"open-changed-examples": "git diff --name-only mb-pages HEAD -- docs/_posts/examples/*.html | awk '{print \"http://127.0.0.1:4000/mapbox-gl-js/example/\" substr($0,33,length($0)-37)}' | xargs open",
"test": "run-s lint test-unit",
"test-suite": "run-s test-render test-query",
"test-unit": "tap --reporter dot --no-coverage test/js test/build/webpack.test.js",
"test-unit": "tap --reporter dot --no-coverage test/js",
"test-render": "node test/render.test.js",
"test-query": "node test/query.test.js",
"test-cov": "nyc --reporter=text-summary --cache run-s test-unit test-render test-query"
Expand Down
27 changes: 0 additions & 27 deletions test/build/webpack.test.js
View file
Open in desktop

This file was deleted.

5 changes: 0 additions & 5 deletions test/fixtures/webpack-entry.js
View file
Open in desktop

This file was deleted.

68 changes: 0 additions & 68 deletions webpack.config.example.js
View file
Open in desktop

This file was deleted.