Merge branch 'master' into tilesize

mapbox · May 31, 2019 · e2eff01 · e2eff01
2 parents 739a020 + 884db58
commit e2eff01
Show file tree

Hide file tree

Showing 154 changed files with 1,552 additions and 757 deletions.
diff --git a/.flowconfig b/.flowconfig
@@ -22,3 +22,10 @@
 
 [options]
 server.max_workers=4
+
+[strict]
+nonstrict-import
+unclear-type
+untyped-import
+untyped-type-import
+sketchy-null
diff --git a/.github/ISSUE_TEMPLATE/Feature_request.md b/.github/ISSUE_TEMPLATE/Feature_request.md
@@ -49,6 +49,6 @@ Where do the concepts set new precedents?
 <!--
 How you would implement the design in Javascript?
 How you would implement the design in C++?
-What parts of the Mapbox GL ecosystem will need to change to accomodate this design?
+What parts of the Mapbox GL ecosystem will need to change to accommodate this design?
 Are there any important edge cases?
 -->
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,4 +1,23 @@
-## 0.54.0-beta.1
+## 1.0.0
+
+### ⚠️ Breaking changes
+
+This release replaces the existing “map views” pricing model in favor of a “map load” model. Learn more in [a recent blog post about these changes](https://blog.mapbox.com/new-pricing-46b7c26166e7).
+
+**By upgrading to this release, you are opting in to the new map loads pricing.**
+
+**Why is this change being made?**
+
+This change allows us to implement a more standardized and predictable method of billing GL JS map usage. You’ll be charged whenever your website or web application loads, not by when users pan and zoom around the map, incentivizing developers to create highly interactive map experiences. The new pricing structure also creates a significantly larger free tier to help developers get started building their applications with Mapbox tools while pay-as-you-go pricing and automatic volume discounts help your application scale with Mapbox. Session billing also aligns invoices with metrics web developers already track and makes it easier to compare usage with other mapping providers.
+
+**What is changing?**
+- Add SKU token to Mapbox API requests [#8276](https://github.com/mapbox/mapbox-gl-js/pull/8276)
+
+When (and only when) loading tiles from a Mapbox API with a Mapbox access token set (`mapboxgl.accessToken`), a query parameter named `sku` will be added to all requests for vector, raster and raster-dem tiles. Every map instance uses a unique `sku` value, which is refreshed every 12 hours. The token itself is comprised of a token version (always “1”), a sku ID (always “01”) and a random 10-digit base-62 number. The purpose of the token is to allow for metering of map sessions on the server-side. A session lasts from a new map instantiation until the map is destroyed or 12 hours passes, whichever comes first.
+
+For further information on the pricing changes, you can read our [blog post](https://blog.mapbox.com/new-pricing-46b7c26166e7) and check out our new [pricing page](https://www.mapbox.com/pricing), which has a price calculator. As always, you can also contact our team at [https://support.mapbox.com](https://support.mapbox.com).
+
+## 0.54.0
 
 ### Breaking changes
 
@@ -24,15 +43,19 @@
 - Added `rel="noopener"` attributes to links that lead to external websites (such as Mapbox logo and OpenStreetMap edit link) for improved security. [#7914](https://github.com/mapbox/mapbox-gl-js/pull/7914)
 - Added tile size info when `map.showTileBoundaries` is turned on. [#7963](https://github.com/mapbox/mapbox-gl-js/pull/7963)
 - Significantly improved load times of the benchmark suite. [#8066](https://github.com/mapbox/mapbox-gl-js/pull/8066)
+- Improved behavior of `canvasSource.pause` to be more reliable and able to render a single frame. [#8130](https://github.com/mapbox/mapbox-gl-js/pull/8130)
 
 ### Bug fixes
 
+- Fixed a bug in Mac Safari 12+ where controls would disappear until you interact with the map. [8193](https://github.com/mapbox/mapbox-gl-js/pull/8193)
 - Fixed a memory leak when calling `source.setData(url)` many times. [#8035](https://github.com/mapbox/mapbox-gl-js/pull/8035)
 - Fixed a bug where marker lost focus when dragging. [#7799](https://github.com/mapbox/mapbox-gl-js/pull/7799)
 - Fixed a bug where `map.getCenter()` returned a reference to an internal `LngLat` object instead of cloning it, leading to potential mutability bugs. [#7922](https://github.com/mapbox/mapbox-gl-js/pull/7922)
 - Fixed a bug where default HTML marker positioning was slightly off. [#8074](https://github.com/mapbox/mapbox-gl-js/pull/8074)
 - Fixed a bug where adding a fill extrusion layer for non-polygon layers would lead to visual artifacts. [#7685](https://github.com/mapbox/mapbox-gl-js/pull/7685)
 - Fixed intermittent Flow failures on CI. [#8061](https://github.com/mapbox/mapbox-gl-js/pull/8061)
+- Fixed a bug where calling `Map#removeFeatureState` does not remove the state from some tile zooms [#8087](https://github.com/mapbox/mapbox-gl-js/pull/8087)
+- Fixed a bug where `removeFeatureState` didn't work on features with `id` equal to `0`. [#8150](https://github.com/mapbox/mapbox-gl-js/pull/8150)
 
 ## 0.53.1
 

diff --git a/bench/lib/fetch_style.js b/bench/lib/fetch_style.js
@@ -1,10 +1,12 @@
 // @flow
 
 import type {StyleSpecification} from '../../src/style-spec/types';
-import {normalizeStyleURL} from '../../src/util/mapbox';
+import { RequestManager } from '../../src/util/mapbox';
+
+const requestManager = new RequestManager();
 
 export default function fetchStyle(value: string | StyleSpecification): Promise<StyleSpecification> {
     return typeof value === 'string' ?
-        fetch(normalizeStyleURL(value)).then(response => response.json()) :
+        fetch(requestManager.normalizeStyleURL(value)).then(response => response.json()) :
         Promise.resolve(value);
 }
diff --git a/bench/lib/tile_parser.js b/bench/lib/tile_parser.js
@@ -7,7 +7,7 @@ import assert from 'assert';
 import deref from '../../src/style-spec/deref';
 import Style from '../../src/style/style';
 import { Evented } from '../../src/util/evented';
-import { normalizeSourceURL, normalizeTileURL } from '../../src/util/mapbox';
+import { RequestManager } from '../../src/util/mapbox';
 import WorkerTile from '../../src/source/worker_tile';
 import StyleLayerIndex from '../../src/style/style_layer_index';
 
@@ -17,23 +17,28 @@ import type { OverscaledTileID } from '../../src/source/tile_id';
 import type { TileJSON } from '../../src/types/tilejson';
 
 class StubMap extends Evented {
-    _transformRequest(url) {
-        return {url};
+    _requestManager: RequestManager;
+
+    constructor() {
+        super();
+        this._requestManager = new RequestManager();
     }
 }
 
+const mapStub = new StubMap();
+
 function createStyle(styleJSON: StyleSpecification): Promise<Style> {
     return new Promise((resolve, reject) => {
-        const style = new Style((new StubMap(): any));
+        const style = new Style((mapStub: any));
         style.loadJSON(styleJSON);
         style
             .on('style.load', () => resolve(style))
             .on('error', reject);
     });
 }
 
-function fetchTileJSON(sourceURL: string): Promise<TileJSON> {
-    return fetch(normalizeSourceURL(sourceURL))
+function fetchTileJSON(requestManager: RequestManager, sourceURL: string): Promise<TileJSON> {
+    return fetch(requestManager.normalizeSourceURL(sourceURL))
         .then(response => response.json());
 }
 
@@ -95,15 +100,15 @@ export default class TileParser {
 
         return Promise.all([
             createStyle(this.styleJSON),
-            fetchTileJSON((this.styleJSON.sources[this.sourceID]: any).url)
+            fetchTileJSON(mapStub._requestManager, (this.styleJSON.sources[this.sourceID]: any).url)
         ]).then(([style: Style, tileJSON: TileJSON]) => {
             this.style = style;
             this.tileJSON = tileJSON;
         });
     }
 
     fetchTile(tileID: OverscaledTileID) {
-        return fetch(normalizeTileURL(tileID.canonical.url(this.tileJSON.tiles)))
+        return fetch(this.style.map._requestManager.normalizeTileURL(tileID.canonical.url(this.tileJSON.tiles)))
             .then(response => response.arrayBuffer())
             .then(buffer => ({tileID, buffer}));
     }

diff --git a/bench/styles/benchmarks.js b/bench/styles/benchmarks.js
@@ -11,7 +11,7 @@ import QueryBox from '../benchmarks/query_box';
 
 import getWorkerPool from '../../src/util/global_worker_pool';
 
-const locations = locationsWithTileID(styleBenchmarkLocations);
+const locations = locationsWithTileID(styleBenchmarkLocations.features);
 
 mapboxgl.accessToken = accessToken;
 

diff --git a/bench/versions/benchmarks.js b/bench/versions/benchmarks.js
@@ -21,7 +21,7 @@ import FilterEvaluate from '../benchmarks/filter_evaluate';
 
 import getWorkerPool from '../../src/util/global_worker_pool';
 
-const styleLocations = locationsWithTileID(styleBenchmarkLocations);
+const styleLocations = locationsWithTileID(styleBenchmarkLocations.features);
 
 mapboxgl.accessToken = accessToken;
 

diff --git a/debug/wms.html b/debug/wms.html
@@ -31,7 +31,7 @@
 map.on('load', function() {
     map.addSource('wms-test', {
         "type": "raster",
-        "tiles": ['https://geodata.state.nj.us/imagerywms/Natural2015?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=Natural2015'
+        "tiles": ['https://img.nj.gov/imagerywms/Natural2015?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=Natural2015'
         ],
         "tileSize": 256
     });

diff --git a/docs/README.md b/docs/README.md
@@ -33,7 +33,7 @@ In the `.html` file, write the HTML and JavaScript constituting the example.
 * Do **not** use custom styles from your personal account. Use only the default `mapbox` account styles.
 * When embedding literal JSON (GeoJSON or Mapbox style snippets) into script code, double-quote property names and string values. Elsewhere, use single-quoted strings.
 
-Every example **must** have an accompanying image:
+Every example **must** have an accompanying image. To get an image, run the site locally and take a screenshot of the rendered map in the example:
 
 1. Run `npm run create-image <example-file-name> <mapbox-access-token>`. The script will take a screenshot of the map in the example and save it to `docs/img/src/`. Commit the image.
 2. Run `npm run start-docs` to verify that your example image is loading as expected.

diff --git a/docs/components/application-wrapper.js b/docs/components/application-wrapper.js
@@ -1,7 +1,6 @@
 import React from 'react';
 
 if (typeof window !== 'undefined') {
-    window.MapboxPageShellProduction = true;
   import(/* webpackChunkName: "assembly-js" */ '@mapbox/mbx-assembly/dist/assembly.js');
 }
 

diff --git a/docs/components/example.js b/docs/components/example.js
@@ -66,6 +66,8 @@ ${html}
 
         render() {
             const {frontMatter} = this.props;
+            frontMatter.language = ['JavaScript'];
+            frontMatter.contentType = 'example';
             return (
                 <PageShell meta={frontMatter}>
                     <div className='relative prose'>

diff --git a/docs/components/markdown-page-shell.js b/docs/components/markdown-page-shell.js
@@ -14,6 +14,9 @@ class MarkdownPageshell extends React.Component {
         if (!meta.pathname) {
             meta.pathname = location.pathname;
         }
+        if (frontMatter.contentType) meta.contentType = frontMatter.contentType;
+        if (frontMatter.language) meta.language = frontMatter.language;
+        if (frontMatter.level) meta.level = frontMatter.level;
         return (
             <PageShell meta={meta} {...this.props}>
                 <div className="prose">

diff --git a/docs/components/page_shell.js b/docs/components/page_shell.js
@@ -217,7 +217,7 @@ class PageShell extends React.Component {
         };
 
         return (
-            <ReactPageShell darkHeaderText={true} includeFooter={false} {...this.props}>
+            <ReactPageShell site="Mapbox GL JS" darkHeaderText={true} includeFooter={false} {...this.props}>
                 <Helmet>
                     <link
                         rel="canonical"

diff --git a/docs/documentation.yml b/docs/documentation.yml
@@ -15,7 +15,7 @@ toc:
   - CustomLayerInterface
   - name: Geography & Geometry
     description: |
-      `LngLat` and `LngLatBounds` represent points and rectanges in geographic
+      `LngLat` and `LngLatBounds` represent points and rectangles in geographic
       coordinates. `Point` represents points in screen coordinates.
   - LngLat
   - LngLatLike

diff --git a/docs/img/src/fill-pattern.png b/docs/img/src/fill-pattern.png
diff --git a/docs/img/src/mapbox-gl-geocoder-custom-render.png b/docs/img/src/mapbox-gl-geocoder-custom-render.png
diff --git a/docs/img/src/mapbox-gl-geocoder-proximity-bias.png b/docs/img/src/mapbox-gl-geocoder-proximity-bias.png
diff --git a/docs/img/src/mapbox-gl-geocoder-with-flyto.png b/docs/img/src/mapbox-gl-geocoder-with-flyto.png
diff --git a/docs/img/src/mapbox-gl-geocoder-with-language.png b/docs/img/src/mapbox-gl-geocoder-with-language.png
diff --git a/docs/img/src/placeholder.png b/docs/img/src/placeholder.png
diff --git a/docs/pages/api.js b/docs/pages/api.js
@@ -9,9 +9,11 @@ import LinkerStack from 'documentation/src/output/util/linker_stack';
 import ApiItem from '../components/api-item';
 
 const meta = {
-    title: 'Mapbox GL JS API',
+    title: 'API Reference',
     description: 'The Mapbox GL JS API documentation to render interactive maps from vector tiles and Mapbox styles.',
-    pathname: '/mapbox-gl-js/api'
+    pathname: '/mapbox-gl-js/api/',
+    contentType: 'API',
+    lanaguage: ['JavaScript']
 };
 
 const linkerStack = new LinkerStack({})

diff --git a/docs/pages/example/fill-pattern.html b/docs/pages/example/fill-pattern.html
@@ -0,0 +1,49 @@
+<div id='map'></div>
+
+<script>
+var map = new mapboxgl.Map({
+    container: 'map',
+    style: 'mapbox://styles/mapbox/streets-v9',
+    zoom: 1
+});
+
+map.on('load', function() {
+    // Add GeoJSON data
+    map.addSource('source', {
+        "type": "geojson",
+        "data": {
+            "type": "Feature",
+            "properties": {},
+            "geometry": {
+                "type": "Polygon",
+                "coordinates": [[
+                    [-30, -25],
+                    [-30, 35],
+                    [30, 35],
+                    [30, -25],
+                    [-30, -25]
+                ]]
+            }
+        }
+    });
+
+    // Load an image to use as the pattern
+    map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/64px-Cat_silhouette.svg.png', function(err, image) {
+        // Throw an error if something went wrong
+        if (err) throw err;
+
+        // Declare the image
+        map.addImage('pattern', image);
+
+        // Use it
+        map.addLayer({
+            "id": "pattern-layer",
+            "type": "fill",
+            "source": "source",
+            "paint": {
+                "fill-pattern": "pattern"
+            }
+        });
+    });
+});
+</script>
diff --git a/docs/pages/example/fill-pattern.js b/docs/pages/example/fill-pattern.js
@@ -0,0 +1,10 @@
+/*---
+title: Add a pattern to a polygon
+description: Use [fill-pattern](https://docs.mapbox.com/mapbox-gl-js/style-spec/#paint-fill-fill-pattern) to draw a polygon from a repeating image pattern.
+tags:
+  - layers
+pathname: /mapbox-gl-js/example/fill-pattern/
+---*/
+import Example from '../../components/example';
+import html from './fill-pattern.html';
+export default Example(html);
diff --git a/docs/pages/example/forward-geocode-custom-data.html b/docs/pages/example/forward-geocode-custom-data.html
@@ -1,5 +1,5 @@
-<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v3.1.6/mapbox-gl-geocoder.min.js'></script>
-<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v3.1.6/mapbox-gl-geocoder.css' type='text/css' />
+<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.min.js'></script>
+<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.css' type='text/css' />
 <div id='map'></div>
 
 <script>
@@ -163,6 +163,7 @@
     accessToken: mapboxgl.accessToken,
     localGeocoder: forwardGeocoder,
     zoom: 14,
-    placeholder: "Enter search e.g. Lincoln Park"
+    placeholder: "Enter search e.g. Lincoln Park",
+    mapboxgl: mapboxgl
 }));
 </script>
diff --git a/docs/pages/example/jump-to.html b/docs/pages/example/jump-to.html
@@ -73,7 +73,6 @@
     ]
 };
 
-mapboxgl.accessToken = 'pk.eyJ1IjoibWFsLXdvb2QiLCJhIjoiY2oyZ2t2em50MDAyMzJ3cnltMDFhb2NzdiJ9.X-D4Wvo5E5QxeP7K_I3O8w';
 var map = new mapboxgl.Map({
     container: 'map',
     style: 'mapbox://styles/mapbox/streets-v11',

diff --git a/docs/pages/example/mapbox-gl-geocoder-accept-coordinates.html b/docs/pages/example/mapbox-gl-geocoder-accept-coordinates.html
@@ -1,5 +1,5 @@
-<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v3.1.6/mapbox-gl-geocoder.min.js'></script>
-<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v3.1.6/mapbox-gl-geocoder.css' type='text/css' />
+<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.min.js'></script>
+<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.css' type='text/css' />
 <div id='map'></div>
 
 <script>
@@ -28,7 +28,7 @@
                 type: "Point",
                 coordinates: [lng, lat]
             },
-            place_name: 'Lat: ' + lat + ', Lng: ' + lng, // eslint-disable-line camelcase
+            place_name: 'Lat: ' + lat + ' Lng: ' + lng, // eslint-disable-line camelcase
             place_type: ['coordinate'], // eslint-disable-line camelcase
             properties: {},
             type: 'Feature'
@@ -62,6 +62,7 @@
     accessToken: mapboxgl.accessToken,
     localGeocoder: coordinatesGeocoder,
     zoom: 4,
-    placeholder: "Try: -40, 170"
+    placeholder: "Try: -40, 170",
+    mapboxgl: mapboxgl
 }));
 </script>
diff --git a/docs/pages/example/mapbox-gl-geocoder-custom-render.html b/docs/pages/example/mapbox-gl-geocoder-custom-render.html
@@ -0,0 +1,39 @@
+<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.min.js'></script>
+<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.css' type='text/css' />
+<style>
+.geocoder-dropdown-item{
+    padding: 5px
+}
+.geocoder-dropdown-icon{
+    margin-right: 10px;
+}
+.geocoder-dropdown-text{
+    color: #5a3fc0;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: larger;
+}
+</style>
+<div id='map'></div>
+
+<script>
+var map = new mapboxgl.Map({
+    container: 'map',
+    style: 'mapbox://styles/mapbox/streets-v9',
+    center: [-79.4512, 43.6568],
+    zoom: 13
+});
+
+var geocoder = new MapboxGeocoder({
+    accessToken: mapboxgl.accessToken,
+    types: 'poi',
+    // see https://docs.mapbox.com/api/search/#geocoding-response-object for information about the schema of each response feature
+    render: function(item) {
+        // extract the item's maki icon or use a default
+        var maki = item.properties.maki || 'marker';
+        return "<div class='geocoder-dropdown-item'><img class='geocoder-dropdown-icon' src='https://unpkg.com/@mapbox/maki@6.1.0/icons/" + maki + "-15.svg'><span class='geocoder-dropdown-text'>" + item.text + "</span></div>";
+    },
+    mapboxgl: mapboxgl
+});
+map.addControl(geocoder);
+
+</script>
diff --git a/docs/pages/example/mapbox-gl-geocoder-custom-render.js b/docs/pages/example/mapbox-gl-geocoder-custom-render.js
@@ -0,0 +1,12 @@
+/*---
+title: Use a custom render function with a geocoder
+description: >-
+  Use a custom html rendering function with the [mapbox-gl-geocoder](https://github.com/mapbox/mapbox-gl-geocoder)
+  to customize how the dropdown menu is displayed.
+tags:
+  - geocoder
+pathname: /mapbox-gl-js/example/mapbox-gl-geocoder-custom-render/
+---*/
+import Example from '../../components/example';
+import html from './mapbox-gl-geocoder-custom-render.html';
+export default Example(html);