visgl · Pessimistress · Oct 30, 2020 · Oct 28, 2020 · Oct 28, 2020 · Oct 28, 2020
diff --git a/docs/get-started/using-with-map.md b/docs/get-started/using-with-map.md
@@ -39,6 +39,26 @@ If you are using react-map-gl, there are several ways to provide a token to your
 
 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. 
 
+Existing free vector tile services: 
+
+- [CARTO free basemaps](https://carto.com/basemaps) for non commercial applications:
+
+
+| POSITRON | DARK MATTER | VOYAGER  |
+| -------- |-------------| -------- |
+|<img src="https://carto.com/help/images/building-maps/basemaps/positron_labels.png"  /> | <img src="https://carto.com/help/images/building-maps/basemaps/dark_labels.png" /> | <img src="https://carto.com/help/images/building-maps/basemaps/voyager_labels.png" /> 
+| https://basemaps.cartocdn.com/gl/positron-gl-style/style.json|https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json|https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json
+
+
+| POSITRON NO LABELS     | DARK MATTER NO LABELS         | VOYAGER NO LABELS |
+| --------------- |---------------------   | -------- |
+|<img src="https://carto.com/help/images/building-maps/basemaps/positron_no_labels.png"  /> | <img src="https://carto.com/help/images/building-maps/basemaps/dark_no_labels.png" /> | <img src="https://carto.com/help/images/building-maps/basemaps/voyager_no_labels.png" /> 
+| https://basemaps.cartocdn.com/gl/positron-nolabels--gl-style/style.json|https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json|https://basemaps.cartocdn.com/gl/voyager-nolabels-gl-style/style.json
+|
+
+Ensure you follow the [Terms and Conditions](https://drive.google.com/file/d/0B3OBExqwT6KJNHp3U3VUamx6U1U/view) when using them.
+
+
 Open source tile schemas include: 
 
 - [TileZen schema](https://tilezen.readthedocs.io/en/latest/layers/)
@@ -48,7 +68,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/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,8 @@ 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 +75,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
@@ -36,7 +36,6 @@ const CONFIG = {
   },
 
   plugins: [
-    new webpack.EnvironmentPlugin(['MapboxAccessToken']),
     new HtmlWebpackPlugin({title: 'deck.gl example'})
   ]
 };

diff --git a/examples/gallery/build-tools/constants.js b/examples/gallery/build-tools/constants.js
@@ -8,7 +8,6 @@ const IMAGE_DIR = 'images';
 const MAPBOX_TOKEN = process.env.MapboxAccessToken;
 if (!MAPBOX_TOKEN) {
   console.log('Missing environment variable: MapboxAccessToken');
-  process.exit(1);
 }
 /* eslint-enable */
 

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
@@ -22,7 +22,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: -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
@@ -11,11 +11,9 @@
 
     const {MapboxLayer, ScatterplotLayer} = deck;
 
-    mapboxgl.accessToken = '<mapbox-access-token>';
-
     const map = new mapboxgl.Map({
       container: document.body,
-      style: 'mapbox://styles/mapbox/light-v9',
+      style: 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json',
       center: [-122.4, 37.79],
       zoom: 15,
       pitch: 60

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/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
@@ -16,10 +16,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

diff --git a/examples/get-started/react/mapbox/app.js b/examples/get-started/react/mapbox/app.js
@@ -3,9 +3,6 @@ import {render} from 'react-dom';
 import {StaticMap} from 'react-map-gl';
 import DeckGL, {GeoJsonLayer, ArcLayer} from 'deck.gl';
 
-// Set your mapbox token here
-const MAPBOX_TOKEN = process.env.MapboxAccessToken; // eslint-disable-line
-
 // source: Natural Earth http://www.naturalearthdata.com/ via geojson.xyz
 const AIR_PORTS =
   'https://d2ad6b4ur7yvpq.cloudfront.net/naturalearth-3.3.0/ne_10m_airports.geojson';
@@ -18,6 +15,8 @@ const INITIAL_VIEW_STATE = {
   pitch: 30
 };
 
+const MAP_STYLE = 'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json'
+
 function Root() {
   const onClick = info => {
     if (info.object) {
@@ -56,7 +55,7 @@ function Root() {
 
   return (
     <DeckGL initialViewState={INITIAL_VIEW_STATE} controller={true} layers={layers}>
-      <StaticMap mapboxApiAccessToken={MAPBOX_TOKEN} mapStyle="mapbox://styles/mapbox/light-v9" />
+      <StaticMap mapStyle={MAP_STYLE} />
     </DeckGL>
   );
 }

diff --git a/examples/get-started/react/mapbox/webpack.config.js b/examples/get-started/react/mapbox/webpack.config.js
@@ -36,7 +36,6 @@ const CONFIG = {
 
   // Optional: Enables reading mapbox token from environment variable
   plugins: [
-    new webpack.EnvironmentPlugin(['MapboxAccessToken']),
     new HtmlWebpackPlugin({title: 'deck.gl example'})
   ]
 };

diff --git a/examples/layer-browser/src/map.js b/examples/layer-browser/src/map.js
@@ -10,11 +10,6 @@ import {COORDINATE_SYSTEM, View} from '@deck.gl/core';
 import LayerInfo from './components/layer-info';
 import {RenderMetrics} from './render-metrics';
 
-/* eslint-disable no-process-env */
-const MapboxAccessToken =
-  process.env.MapboxAccessToken || // eslint-disable-line
-  'Set MapboxAccessToken environment variable or put your token here.';
-
 const NAVIGATION_CONTROL_STYLES = {
   margin: 10,
   position: 'absolute'
@@ -46,6 +41,9 @@ const INITIAL_VIEW_STATES = {
   }
 };
 
+const MAP_STYLE =
+  'https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json';
+
 const ViewportLabel = props => <div style={VIEW_LABEL_STYLES}>{props.children}</div>;
 
 export default class Map extends PureComponent {
@@ -160,11 +158,7 @@ export default class Map extends PureComponent {
           _onMetrics={this._onMetrics}
         >
           <View id="basemap">
-            <StaticMap
-              key="map"
-              mapStyle="mapbox://styles/mapbox/light-v9"
-              mapboxApiAccessToken={MapboxAccessToken || 'no_token'}
-            />
+            <StaticMap key="map" mapStyle={MAP_STYLE} />
             <ViewportLabel key="label">Map View</ViewportLabel>
           </View>
 

diff --git a/examples/layer-browser/webpack.config.js b/examples/layer-browser/webpack.config.js
@@ -48,10 +48,7 @@ const CONFIG = {
 
   node: {
     fs: 'empty'
-  },
-
-  // 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 deck.gl module

diff --git a/examples/playground/json-examples/3d-heatmap-minimap.json b/examples/playground/json-examples/3d-heatmap-minimap.json
@@ -15,13 +15,13 @@
     {
       "@@type": "MapView",
       "id": "main",
-      "mapStyle": "mapbox://styles/mapbox/dark-v9",
+      "mapStyle": "https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json",
       "controller": true
     },
     {
       "@@type": "MapView",
       "id": "minimap",
-      "mapStyle": "mapbox://styles/mapbox/light-v9",
+      "mapStyle": "https://basemaps.cartocdn.com/gl/positron-nolabels-gl-style/style.json",
       "width": "40%",
       "height": "40%",
       "x": "55%",

diff --git a/examples/playground/json-examples/3d-heatmap.json b/examples/playground/json-examples/3d-heatmap.json
@@ -14,7 +14,7 @@
     {
       "@@type": "MapView",
       "controller": true,
-      "mapStyle": "mapbox://styles/mapbox/dark-v9"
+      "mapStyle": "https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json"
     }
   ],
   "layers": [

diff --git a/examples/playground/json-examples/3d-tiles-cairo-vricon.json b/examples/playground/json-examples/3d-tiles-cairo-vricon.json
@@ -14,7 +14,7 @@
   "views": [
     {
       "@@type": "MapView",
-      "mapStyle": "mapbox://styles/mapbox/dark-v9",
+      "mapStyle": "https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json",
       "controller": true
     }
   ],

diff --git a/examples/playground/json-examples/3d-tiles-new-york.json b/examples/playground/json-examples/3d-tiles-new-york.json
@@ -14,7 +14,7 @@
   "views": [
     {
       "@@type": "MapView",
-      "mapStyle": "mapbox://styles/mapbox/dark-v9",
+      "mapStyle": "https://basemaps.cartocdn.com/gl/dark-matter-nolabels-gl-style/style.json",
       "controller": true
     }
   ],
-Original file line number
+Diff line change
@@ Expand Up / @@ -36,7 +36,6 @@ const CONFIG = { @@
       },
       plugins: [
-        new webpack.EnvironmentPlugin(['MapboxAccessToken']),
         new HtmlWebpackPlugin({title: 'deck.gl example'})
       ]
     };
@@ Expand Down @@