From 34a00265fed8507369f28d085263a7da9dff750c Mon Sep 17 00:00:00 2001 From: Lucas Wojciechowski Date: Tue, 17 Jan 2017 14:06:46 -0800 Subject: [PATCH] Update README for monorepo --- INSTALL.md | 81 +++++++++++++++++++++++++++++++++++++++++ README.md | 105 ++++++++--------------------------------------------- 2 files changed, 97 insertions(+), 89 deletions(-) create mode 100644 INSTALL.md diff --git a/INSTALL.md b/INSTALL.md new file mode 100644 index 00000000000..e99aeeec0ce --- /dev/null +++ b/INSTALL.md @@ -0,0 +1,81 @@ +# Getting started with Mapbox on the web + +### Using Mapbox vector tiles and styles + +To use the [vector tiles](https://www.mapbox.com/maps/) and styles hosted on [mapbox.com](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 with a ` + + + + +
+ + + + +``` + +### Using Mapbox with [Browserify](http://browserify.org/) + +Install the [`mapbox-gl` npm package](https://www.npmjs.com/package/mapbox-gl) + +```bash +npm install --save mapbox-gl +``` + +Instantiate `mapboxgl.Map` + +```js +var mapboxgl = require('mapbox-gl'); +mapboxgl.accessToken = ''; +var map = new mapboxgl.Map({ + container: '', + style: 'mapbox://styles/mapbox/streets-v9' +}); +``` + +### Using Mapbox with other module systems + +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/dist/mapbox-gl.js'); +``` + +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/dist/mapbox-gl.js'; +``` + +### Using Mapbox with [CSP](https://developer.mozilla.org/en-US/docs/Web/Security/CSP) + +You may use a Content Security Policy to restrict the resources your page has +access to, as a way of guarding against Cross-Site Scripting and other types of +attacks. If you do, Mapbox GL JS requires the following directives: + +``` +child-src blob: ; +img-src data: blob: ; +script-src 'unsafe-eval' ; +``` + +Requesting styles from Mapbox or other services will require additional +directives. For Mapbox, you can use this `connect-src` setting: + +``` +connect-src https://*.tiles.mapbox.com https://api.mapbox.com +``` diff --git a/README.md b/README.md index 5e3ccd0f49d..9270e495281 100644 --- a/README.md +++ b/README.md @@ -1,110 +1,37 @@ [![Build Status](https://circleci.com/gh/mapbox/mapbox-gl-js.svg?style=svg)](https://circleci.com/gh/mapbox/mapbox-gl-js) [![Coverage Status](https://coveralls.io/repos/github/mapbox/mapbox-gl-js/badge.svg?branch=master)](https://coveralls.io/github/mapbox/mapbox-gl-js?branch=master) -# Mapbox GL JS +[Mapbox provides is an ecosystem of libraries for rendering maps on the web, iOS, Android, Qt, macOS and more.](https://www.mapbox.com/maps/). This repository holds the files and issues shared among all platforms. -Mapbox GL JS is a Javascript & WebGL library that renders interactive maps from [vector tiles](https://www.mapbox.com/blog/vector-tiles/) and [Mapbox styles](https://www.mapbox.com/mapbox-gl-style-spec). +[Mapbox GL JS gallery](https://www.mapbox.com/gallery/) + +## Mapbox on the web -It is part of the [Mapbox GL ecosystem](https://github.com/mapbox/mapbox-gl) which includes [Mapbox GL Native](https://github.com/mapbox/mapbox-gl-native), a suite of compatible SDKs for native desktop and mobile applications. +This repository holds the files and issues that relate to the web platform. +- [Getting Started](https://github.com/mapbox/mapbox-gl-js/blob/master/INSTALL.md) - [API Documentation](https://www.mapbox.com/mapbox-gl-js/api) - [API Examples](https://www.mapbox.com/mapbox-gl-js/examples/) -- [Style Specification](https://www.mapbox.com/mapbox-gl-style-spec) -- [Gallery](https://www.mapbox.com/gallery/) - [Roadmap](https://www.mapbox.com/mapbox-gl-js/roadmap/) -- [Top Github Issues](https://mapbox.github.io/top-issues/#!mapbox/mapbox-gl-js) - -[Mapbox GL JS gallery](https://www.mapbox.com/gallery/) - -## 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 ` - - - - -
- - - - -``` - -## Using Mapbox GL JS with [Browserify](http://browserify.org/) +- [Contributor Documentation](https://github.com/mapbox/mapbox-gl-js/blob/master/CONTRIBUTING.md) -Install the [`mapbox-gl` npm package](https://www.npmjs.com/package/mapbox-gl) +## Mapbox on iOS, Android, Qt, macOS ... -```bash -npm install --save mapbox-gl -``` +The [`mapbox/mapbox-gl-native` repository](https://github.com/mapbox/mapbox-gl-native) holds the files and issues that relate to the Andriod, iOS, macOS, Qt, and other platforms. -Instantiate `mapboxgl.Map` +## Mapbox styles -```js -var mapboxgl = require('mapbox-gl'); -mapboxgl.accessToken = ''; -var map = new mapboxgl.Map({ - container: '', - style: 'mapbox://styles/mapbox/streets-v9' -}); -``` +The [`mapbox/mapbox-gl-styles` repository](https://github.com/mapbox/mapbox-gl-styles) contains some open source map styles. -## Using Mapbox GL JS with other module systems +## Mapbox plugins & utilities -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: +* [mapbox-gl-draw](https://github.com/mapbox/mapbox-gl-draw) – Adds support for drawing and editing features on Mapbox GL JS maps +* [mapbox-gl-filter-simplify](https://github.com/mapbox/mapbox-gl-filter-simplify) – Simplifies and complexifies filters in Mapbox GL Styles -```js -var mapboxgl = require('mapbox-gl/dist/mapbox-gl.js'); -``` +## Third party plugins & utilities -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/dist/mapbox-gl.js'; -``` - -## Third Party Projects - -These projects are written and maintained by the GL JS community. Feel free to open a PR add your own projects to this list. We :heart: third party projects! +These projects are maintained by the GL JS community. Feel free to open a PR add your own projects to this list. We :heart: third party projects! - [Typescript Definitions on DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/mapbox-gl) - [wtMapbox: Webtoolkit Integration](https://github.com/yvanvds/wtMapbox) - [deck.gl: Advanced WebGL visualization layers](https://github.com/uber/deck.gl) - [echartslayer: echarts extension for mapboxgl](https://github.com/lzxue/echartLayer) - - -## Using Mapbox GL JS with [CSP](https://developer.mozilla.org/en-US/docs/Web/Security/CSP) - -You may use a Content Security Policy to restrict the resources your page has -access to, as a way of guarding against Cross-Site Scripting and other types of -attacks. If you do, Mapbox GL JS requires the following directives: - -``` -child-src blob: ; -img-src data: blob: ; -script-src 'unsafe-eval' ; -``` - -Requesting styles from Mapbox or other services will require additional -directives. For Mapbox, you can use this `connect-src` setting: - -``` -connect-src https://*.tiles.mapbox.com https://api.mapbox.com -``` - -## Contributing to Mapbox GL JS - -See [CONTRIBUTING.md](https://github.com/mapbox/mapbox-gl-js/blob/master/CONTRIBUTING.md).