Add a free vector tile services to avoid the usage of a token (visgl#…

…5079) Co-authored-by: Alberto Asuero <albertoasuero@gmail.com>
GlobalFishingWatch · Oct 30, 2020 · 67c347a · 67c347a
1 parent 306099d
commit 67c347a
Show file tree

Hide file tree

Showing 115 changed files with 11,763 additions and 654 deletions.
diff --git a/docs/api-reference/carto/basemap.md b/docs/api-reference/carto/basemap.md
@@ -2,6 +2,9 @@
 
 [CARTO basemaps](https://carto.com/basemaps/) are available and they can be used without a token.
 
+Ensure you follow the [Terms and Conditions](https://drive.google.com/file/d/0B3OBExqwT6KJNHp3U3VUamx6U1U/view) when using them.
+
+
 ## Usage
 
 To install the dependencies from NPM:
@@ -49,16 +52,23 @@ const deckgl = new deck.DeckGL({
 
 ## Supported basemaps
 
-There are three basemaps available today:
+There are several basemaps available today:
 
 * POSITRON
 * DARK_MATTER
 * VOYAGER
-
-| POSITRON        | DARK_MATTER           | VOYAGER  |
-| --------------- |:---------------------:| --------:|
-|![Positron](https://carto.com/help/images/building-maps/basemaps/positron_labels.png "Positron") | ![Dark-matter](https://carto.com/help/images/building-maps/basemaps/dark_labels.png "Dark-matter") | ![Voyager](https://carto.com/help/images/building-maps/basemaps/voyager_labels.png "Voyager") 
-
-Ensure you follow the [Terms and Conditions](https://drive.google.com/file/d/0B3OBExqwT6KJNHp3U3VUamx6U1U/view) when using them
+* POSITRON_NOLABELS
+* DARK_MATTER_NOLABELS
+* VOYAGER_NOLABELS
+
+
+| NAME | PREVIEW | STYLE URL  |
+| -----|---------| ---------- |
+| POSITRON | <img src="https://carto.com/help/images/building-maps/basemaps/positron_labels.png"  /> | https://basemaps.cartocdn.com/gl/positron-gl-style/style.json |
+| DARK_MATTER | <img src="https://carto.com/help/images/building-maps/basemaps/dark_labels.png"  /> | https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json |
+| VOYAGER | <img src="https://carto.com/help/images/building-maps/basemaps/voyager_labels.png"  /> | https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json |
+| POSITRON_NOLABELS | <img src="https://carto.com/help/images/building-maps/basemaps/positron_no_labels.png"  /> | https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json |
+| DARK_MATTER_NOLABELS | <img src="https://carto.com/help/images/building-maps/basemaps/dark_no_labels.png"  /> | https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json |
+| VOYAGER_NOLABELS | <img src="https://carto.com/help/images/building-maps/basemaps/voyager_no_labels.png"  /> | https://basemaps.cartocdn.com/gl/voyager-nolabels-gl-style/style.json |
 
 
diff --git a/docs/api-reference/core/deckgl.md b/docs/api-reference/core/deckgl.md
@@ -9,8 +9,7 @@ Make sure to read the [Using deck.gl Scripting API](/docs/get-started/using-stan
 
 ```js
 new deck.DeckGL({
-  mapboxApiAccessToken: '<your_token_here>',
-  mapStyle: 'mapbox://styles/mapbox/light-v9',
+  mapStyle: 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json',
   initialViewState: {
     longitude: -122.45,
     latitude: 37.8,

diff --git a/docs/get-started/using-standalone.md b/docs/get-started/using-standalone.md
@@ -59,8 +59,7 @@ The scripting API's [DeckGL](/docs/api-reference/core/deckgl.md) class extends t
 
 ```js
 new deck.DeckGL({
-  mapboxApiAccessToken: '<your_token_here>',
-  mapStyle: 'mapbox://styles/mapbox/light-v9',
+  mapStyle: 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json',
   initialViewState: {
     longitude: -122.45,
     latitude: 37.8,

diff --git a/docs/get-started/using-with-map.md b/docs/get-started/using-with-map.md
@@ -4,6 +4,11 @@ While deck.gl works independently without any map component, when visualizing ge
 
 deck.gl has been designed to work in tandem with popular JavaScript base map providers, especially Mapbox. Depending on your tech stack, deck.gl's support for a particular base map solution may come with different level of compatibility and limitations.
 
+In this document you will find how to use deck.gl with different providers and technologies. It is important to understand the difference between the JS library rendering and the basemap provider itself. For example you can use MapboxGL with Mapbox basemaps, but also with any other basemap provider that provides Mapbox Vector Tiles. 
+
+When using different basemaps you have to be sure to follow the terms and conditions of each service and their attribution requirements.
+
+
 ## Using deck.gl with Mapbox GL JS
 
 [mapbox-gl](https://github.com/mapbox/mapbox-gl-js) is a powerful open-source map renderer from [Mapbox](https://mapbox.com). deck.gl's `MapView` is designed to sync perfectly with the camera of Mapbox, at every zoom level and rotation angle.
@@ -22,7 +27,7 @@ When using deck.gl and Mapbox, there are two options you can choose from:
 
 All the [examples on this website](https://github.com/visgl/deck.gl/tree/master/examples/website) are implemented using the React integration. The `DeckGL` React component works especially well as the parent of a react-map-gl [StaticMap](https://visgl.github.io/react-map-gl/docs/api-reference/static-map), which automatically interprets the deck.gl view state (i.e. latitude, longitude, zoom etc). In this configuration your deck.gl layers will render as a perfectly synchronized geospatial overlay over the underlying map.
 
-### About Mapbox Tokens
+### Using Mapbox basemap service (with Mapbox token)
 
 The mapbox-gl library is open source and free to use. However, to load the map styles and tiles from Mapbox's data service, you will need to register on their website in order to retrieve an [access token](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/) required by the map component, which will be used to identify you and start serving up map tiles. The service will be free until a certain level of traffic is exceeded.
 
@@ -35,9 +40,17 @@ If you are using react-map-gl, there are several ways to provide a token to your
 * Pass it as a prop to the ReactMapGL instance `<ReactMapGL mapboxApiAccessToken={TOKEN} />`
 
 
-### Display Maps Without A Mapbox Token
+### Using other basemap services
+
+It is possible to use the map component without the Mapbox service, you need a URL that conforms to the [Mapbox Style Specification](https://www.mapbox.com/mapbox-gl-js/style-spec) and pass it to `ReactMapGL` using the `mapStyle` prop.
 
-It is possible to use the map component without the Mapbox service, if you use another tile source (for example, if you host your own map tiles). You will need a custom Mapbox GL style that points to your own [vector tile source](https://www.mapbox.com/mapbox-gl-js/style-spec/), and pass it to `ReactMapGL` using the `mapStyle` prop. This custom style must match the schema of your tile source. 
+You can use existing free vector tile services:
+
+- [CARTO free basemaps](https://carto.com/basemaps) for non commercial applications. Checkout [this guide](/docs/api-reference/carto/basemap.md) to start using it.
+
+### Hosting your own basemap service
+
+If you host your own map tiles, you will need a custom Mapbox GL style that points to your own [vector tile source](https://www.mapbox.com/mapbox-gl-js/style-spec/), this custom style must match the schema of your tile source. 
 
 Open source tile schemas include: 
 
@@ -48,7 +61,7 @@ Some useful resources for creating your own map service:
 
 - [Mapbox Vector Tile Spec](https://www.mapbox.com/developers/vector-tiles/)
 - [Open source tools](https://github.com/mapbox/awesome-vector-tiles)
-
+- [Maputnik Style editor](https://maputnik.github.io)
 
 ## Using deck.gl with Google Maps
 

diff --git a/examples/experimental/h3-grid/README.md b/examples/experimental/h3-grid/README.md
@@ -6,3 +6,7 @@ Copy the content of this folder to your project. Run
 npm install
 npm start
 ```
+
+### Basemap
+
+The basemap in this example is provided by [CARTO free basemap service](https://carto.com/basemaps). To use an alternative base map solution, visit [this guide](https://deck.gl/docs/get-started/using-with-map#using-other-basemap-services)
diff --git a/examples/experimental/h3-grid/src/app.js b/examples/experimental/h3-grid/src/app.js
@@ -8,9 +8,6 @@ import {StaticMap} from 'react-map-gl';
 import H3GridLayer from './h3-grid-layer';
 import {getMinZoom} from './h3-utils';
 
-// Set your mapbox token here
-const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line
-
 const CONTROL_PANEL_STYLE = {
   position: 'fixed',
   top: 20,
@@ -20,6 +17,7 @@ const CONTROL_PANEL_STYLE = {
   background: '#fff'
 };
 
+const MAP_STYLE = 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json';
 // `repeat` will draw multiple copies of the map at low zoom leveles
 const MAP_VIEW = new MapView({repeat: true});
 // hexagon per tile at minZoom
@@ -76,7 +74,7 @@ export default function App() {
         onViewStateChange={onViewStateChange}
         getTooltip={info => info.object}
       >
-        <StaticMap mapStyle="mapbox://styles/mapbox/light-v9" mapboxApiAccessToken={MAPBOX_TOKEN} />
+        <StaticMap mapStyle={MAP_STYLE} />
       </DeckGL>
       <div style={CONTROL_PANEL_STYLE}>
         <div>Resolution: {resolution}</div>

diff --git a/examples/experimental/h3-grid/webpack.config.js b/examples/experimental/h3-grid/webpack.config.js
@@ -3,7 +3,6 @@
 
 // avoid destructuring for older Node version support
 const resolve = require('path').resolve;
-const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 const CONFIG = {
@@ -35,10 +34,7 @@ const CONFIG = {
     }
   },
 
-  plugins: [
-    new webpack.EnvironmentPlugin(['MapboxAccessToken']),
-    new HtmlWebpackPlugin({title: 'deck.gl example'})
-  ]
+  plugins: [new HtmlWebpackPlugin({title: 'deck.gl example'})]
 };
 
 // This line enables bundling against src in this repo rather than installed deck.gl module

diff --git a/examples/gallery/src/arc-layer.html b/examples/gallery/src/arc-layer.html
@@ -52,8 +52,7 @@
     ];
 
     const deckgl = new DeckGL({
-      mapboxApiAccessToken: '<mapbox-access-token>',
-      mapStyle: 'mapbox://styles/mapbox/light-v9',
+      mapStyle: 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json',
       initialViewState: {
         longitude: -100,
         latitude: 40.7,

diff --git a/examples/gallery/src/bitmap-layer.html b/examples/gallery/src/bitmap-layer.html
@@ -21,8 +21,7 @@
 
     // MapBox example : https://docs.mapbox.com/mapbox-gl-js/example/image-on-a-map/
     new DeckGL({
-      mapboxApiAccessToken: '<mapbox-access-token>',
-      mapStyle: 'mapbox://styles/mapbox/dark-v9',
+      mapStyle: 'https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json',
       initialViewState: {
         longitude: -75.789,
         latitude: 41.874,

diff --git a/examples/gallery/src/boiler-plate.html b/examples/gallery/src/boiler-plate.html
@@ -12,8 +12,7 @@
     const {DeckGL, ScatterplotLayer, TextLayer} = deck;
 
     new DeckGL({
-      mapboxApiAccessToken: '<mapbox-access-token>',
-      mapStyle: 'mapbox://styles/mapbox/light-v9',
+      mapStyle: 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json',
       initialViewState: {
         longitude: -122.45,
         latitude: 37.78,

diff --git a/examples/gallery/src/column-layer.html b/examples/gallery/src/column-layer.html
@@ -19,8 +19,7 @@
   <script type="text/javascript">
     const {DeckGL, ColumnLayer} = deck;
     new DeckGL({
-      mapboxApiAccessToken: '<mapbox-access-token>',
-      mapStyle: 'mapbox://styles/mapbox/dark-v9',
+      mapStyle: 'https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json',
       initialViewState: {
         longitude: -122.4,
         latitude: 37.74,

diff --git a/examples/gallery/src/contour-layer.html b/examples/gallery/src/contour-layer.html
@@ -21,8 +21,7 @@
     const {DeckGL, ContourLayer} = deck;
 
     new DeckGL({
-      mapboxApiAccessToken: '<mapbox-access-token>',
-      mapStyle: 'mapbox://styles/mapbox/dark-v9',
+      mapStyle: 'https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json',
       initialViewState: {
         longitude: -119.3,
         latitude: 35.6,

diff --git a/examples/gallery/src/geojson-layer.html b/examples/gallery/src/geojson-layer.html
@@ -64,8 +64,7 @@
     });
 
     new DeckGL({
-      mapboxApiAccessToken: '<mapbox-access-token>',
-      mapStyle: 'mapbox://styles/mapbox/light-v9',
+      mapStyle: 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json',
       initialViewState: {
         latitude: 49.254,
         longitude: -123.13,

diff --git a/examples/gallery/src/great-circle-layer.html b/examples/gallery/src/great-circle-layer.html
@@ -42,8 +42,7 @@
     });
 
     new DeckGL({
-      mapboxApiAccessToken: '<mapbox-access-token>',
-      mapStyle: 'mapbox://styles/mapbox/dark-v9',
+      mapStyle: 'https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json',
       initialViewState: {
         longitude: -122.38,
         latitude: 37.6,

diff --git a/examples/gallery/src/hexagon-layer.html b/examples/gallery/src/hexagon-layer.html
@@ -61,8 +61,7 @@
     const {DeckGL, HexagonLayer} = deck;
 
     const deckgl = new DeckGL({
-      mapboxApiAccessToken: '<mapbox-access-token>',
-      mapStyle: 'mapbox://styles/mapbox/dark-v9',
+      mapStyle: 'https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json',
       initialViewState: {
         longitude: -1.4157,
         latitude: 52.2324,

diff --git a/examples/gallery/src/highway.html b/examples/gallery/src/highway.html
@@ -78,8 +78,7 @@
       maxZoom: 8
     },
     controller: true,
-    mapboxApiAccessToken: '<mapbox-access-token>',
-    mapStyle: 'mapbox://styles/mapbox/dark-v9',
+    mapStyle: 'https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json',
     pickingRadius: 5,
     layers: [],
     getTooltip

diff --git a/examples/gallery/src/line-layer.html b/examples/gallery/src/line-layer.html
@@ -31,8 +31,7 @@
     const {DeckGL, LineLayer} = deck;
 
     new DeckGL({
-      mapboxApiAccessToken: '<mapbox-access-token>',
-      mapStyle: 'mapbox://styles/mapbox/dark-v9',
+      mapStyle: 'https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json',
       initialViewState: {
         latitude: 51.51,
         longitude: -0.11,

diff --git a/examples/gallery/src/mapbox-layer.html b/examples/gallery/src/mapbox-layer.html
@@ -9,7 +9,7 @@
 
   <script type="text/javascript">
 
-    const {MapboxLayer, ScatterplotLayer} = deck;
+    const {MapboxLayer, ScatterplotLayer, ArcLayer} = deck;
 
     mapboxgl.accessToken = '<mapbox-access-token>';
 

diff --git a/examples/gallery/src/scatterplot-layer.html b/examples/gallery/src/scatterplot-layer.html
@@ -25,8 +25,7 @@
     const FEMALE_COLOR = [255, 0, 128];
 
     new DeckGL({
-      mapboxApiAccessToken: '<mapbox-access-token>',
-      mapStyle: 'mapbox://styles/mapbox/light-v9',
+      mapStyle: 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json',
       initialViewState: {
         longitude: -74,
         latitude: 40.76,

diff --git a/examples/gallery/src/screengrid-layer.html b/examples/gallery/src/screengrid-layer.html
@@ -22,8 +22,7 @@
     const {DeckGL, ScreenGridLayer} = deck;
 
     new DeckGL({
-      mapboxApiAccessToken: '<mapbox-access-token>',
-      mapStyle: 'mapbox://styles/mapbox/dark-v9',
+      mapStyle: 'https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json',
       initialViewState: {
         longitude: -119.3,
         latitude: 35.6,

diff --git a/examples/gallery/src/text-layer.html b/examples/gallery/src/text-layer.html
@@ -61,8 +61,7 @@
     const {DeckGL,TextLayer} = deck;
 
     const deckgl = new DeckGL({
-      mapboxApiAccessToken: '<mapbox-access-token>',
-      mapStyle: 'mapbox://styles/mapbox/dark-v9',
+      mapStyle: 'https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json',
       initialViewState: {
         longitude: -122.4,
         latitude: 37.74,

diff --git a/examples/gallery/src/tile-3d-layer.html b/examples/gallery/src/tile-3d-layer.html
@@ -26,8 +26,7 @@
   const {I3SLoader} = loaders;
 
   const deckgl = new DeckGL({
-    mapboxApiAccessToken: '<mapbox-access-token>',
-    mapStyle: 'mapbox://styles/mapbox/dark-v9',
+    mapStyle: 'https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json',
     initialViewState: INITIAL_VIEW_STATE,
     controller: true,
     layers: [

diff --git a/examples/gallery/src/viewport-transition.html b/examples/gallery/src/viewport-transition.html
@@ -54,8 +54,7 @@
 
     // Deck canvas
     const deckgl = new DeckGL({
-      mapboxApiAccessToken: '<mapbox-access-token>',
-      mapStyle: 'mapbox://styles/mapbox/light-v9',
+      mapStyle: 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json',
       initialViewState: {
         longitude: CITIES[0].longitude,
         latitude: CITIES[0].latitude,

diff --git a/examples/get-started/pure-js/mapbox/README.md b/examples/get-started/pure-js/mapbox/README.md
@@ -9,16 +9,6 @@ with [webpack-dev-server](https://webpack.js.org/guides/development/#webpack-dev
 
 ## Usage
 
-To run this example, you need a [Mapbox access token](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/). You can either set an environment variable:
-
-```bash
-export MapboxAccessToken=<mapbox_access_token>
-```
-
-Or set `mapboxgl.accessToken` directly in `app.js`.
-
-Other options can be found at [using with Mapbox GL](../../../../docs/get-started/using-with-mapbox-gl.md).
-
 To install dependencies:
 
 ```bash
@@ -30,3 +20,7 @@ yarn
 Commands:
 * `npm start` is the development target, to serve the app and hot reload.
 * `npm run build` is the production target, to create the final bundle and write to disk.
+
+### Basemap
+
+The basemap in this example is provided by [CARTO free basemap service](https://carto.com/basemaps). To use an alternative base map solution, visit [this guide](https://deck.gl/docs/get-started/using-with-map#using-other-basemap-services)
diff --git a/examples/get-started/pure-js/mapbox/app.js b/examples/get-started/pure-js/mapbox/app.js
@@ -14,12 +14,11 @@ const INITIAL_VIEW_STATE = {
   pitch: 30
 };
 
-// Set your mapbox token here
-mapboxgl.accessToken = process.env.MapboxAccessToken; // eslint-disable-line
+const MAP_STYLE = 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json';
 
 const map = new mapboxgl.Map({
   container: 'map',
-  style: 'mapbox://styles/mapbox/light-v9',
+  style: MAP_STYLE,
   // Note: deck.gl will be in charge of interaction and event handling
   interactive: false,
   center: [INITIAL_VIEW_STATE.longitude, INITIAL_VIEW_STATE.latitude],

diff --git a/examples/get-started/pure-js/mapbox/webpack.config.js b/examples/get-started/pure-js/mapbox/webpack.config.js
@@ -2,7 +2,6 @@
 // delete the local development overrides at the bottom of this file
 
 const {resolve} = require('path');
-const webpack = require('webpack');
 
 const CONFIG = {
   mode: 'development',
@@ -16,10 +15,7 @@ const CONFIG = {
       // From mapbox-gl-js README. Required for non-browserify bundlers (e.g. webpack):
       'mapbox-gl$': resolve('./node_modules/mapbox-gl/dist/mapbox-gl.js')
     }
-  },
-
-  // Optional: Enables reading mapbox token from environment variable
-  plugins: [new webpack.EnvironmentPlugin(['MapboxAccessToken'])]
+  }
 };
 
 // This line enables bundling against src in this repo rather than installed module