Merge branch 'publisher-production' into feedback

* publisher-production: [docs] fix SDK support for symbol-sort-key (#8501) v1.1.1 fix #8481, unbounded memory growth in IE (#8490) fix race condition between caching and aborting (#8472) swap map-tiles example to use https (#8482) set antialias to true for custom layers and extrusion examples (#8474) update examples to use mapbox-gl-geocoder v4.4.1 (#8451) manually strip urls for faster cache matching (#8434) (#8449)
mapbox · Jul 18, 2019 · 380377f · 380377f
2 parents ecb4840 + 783ae48
commit 380377f
Show file tree

Hide file tree

Showing 21 changed files with 69 additions and 37 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,11 @@
+## 1.1.1
+
+## 🐞 Bug fixes
+
+* Fix unbounded memory growth caused by failure to cancel requests to the cache ([#8472](https://github.com/mapbox/mapbox-gl-js/pull/8472))
+* Fix unbounded memory growth caused by failure to cancel requests in IE ([#8481](https://github.com/mapbox/mapbox-gl-js/issues/8481))
+* Fix performance of getting tiles from the cache ([#8489](https://github.com/mapbox/mapbox-gl-js/pull/8449))
+
 ## 1.1.0
 
 ## ✨ Minor features and improvements

diff --git a/docs/pages/example/3d-buildings.html b/docs/pages/example/3d-buildings.html
@@ -6,7 +6,8 @@
     zoom: 15.5,
     pitch: 45,
     bearing: -17.6,
-    container: 'map'
+    container: 'map',
+    antialias: true
 });
 
 // The 'building' layer in the mapbox-streets vector source contains building-height

diff --git a/docs/pages/example/3d-extrusion-floorplan.html b/docs/pages/example/3d-extrusion-floorplan.html
@@ -6,7 +6,8 @@
     center: [-87.61694, 41.86625],
     zoom: 15.99,
     pitch: 40,
-    bearing: 20
+    bearing: 20,
+    antialias: true
 });
 
 map.on('load', function() {

diff --git a/docs/pages/example/add-3d-model.html b/docs/pages/example/add-3d-model.html
@@ -1,13 +1,14 @@
-<script src='https://unpkg.com/three@0.102.0/build/three.min.js'></script>
-<script src="https://unpkg.com/three@0.102.0/examples/js/loaders/GLTFLoader.js"></script>
+<script src='https://unpkg.com/three@0.106.2/build/three.min.js'></script>
+<script src="https://unpkg.com/three@0.106.2/examples/js/loaders/GLTFLoader.js"></script>
 <div id='map'></div>
 <script>
 var map = window.map = new mapboxgl.Map({
     container: 'map',
     style: 'mapbox://styles/mapbox/light-v10',
     zoom: 17.5,
     center: [148.9819, -35.3981],
-    pitch: 60
+    pitch: 60,
+    antialias: true // create the gl context with MSAA antialiasing, so custom layers are antialiased
 });
 
 // parameters to ensure the model is georeferenced correctly on the map
@@ -57,7 +58,8 @@
         // use the Mapbox GL JS map canvas for three.js
         this.renderer = new THREE.WebGLRenderer({
             canvas: map.getCanvas(),
-            context: gl
+            context: gl,
+            antialias: true
         });
 
         this.renderer.autoClear = false;

diff --git a/docs/pages/example/custom-style-layer.html b/docs/pages/example/custom-style-layer.html
@@ -4,7 +4,8 @@
     container: 'map',
     zoom: 3,
     center: [7.5, 58],
-    style: 'mapbox://styles/mapbox/light-v10'
+    style: 'mapbox://styles/mapbox/light-v10',
+    antialias: true // create the gl context with MSAA antialiasing, so custom layers are antialiased
 });
 
 

diff --git a/docs/pages/example/dancing-buildings.html b/docs/pages/example/dancing-buildings.html
@@ -12,7 +12,8 @@
     },
     zoom: 15,
     pitch: 55,
-    container: 'map'
+    container: 'map',
+    antialias: true
 });
 
 map.addControl(new mapboxgl.FullscreenControl());

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/v4.4.0/mapbox-gl-geocoder.min.js'></script>
-<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.0/mapbox-gl-geocoder.css' type='text/css' />
+<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.min.js'></script>
+<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.css' type='text/css' />
 <div id='map'></div>
 
 <script>

diff --git a/docs/pages/example/map-tiles.html b/docs/pages/example/map-tiles.html
@@ -7,7 +7,7 @@
         "sources": {
             "raster-tiles": {
                 "type": "raster",
-                "tiles": ["http://tile.stamen.com/watercolor/{z}/{x}/{y}.jpg"],
+                "tiles": ["https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg"],
                 "tileSize": 256,
                 "attribution": 'Map tiles by <a target="_top" rel="noopener" href="http://stamen.com">Stamen Design</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" rel="noopener" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" rel="noopener" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>'
             }

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/v4.4.0/mapbox-gl-geocoder.min.js'></script>
-<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.0/mapbox-gl-geocoder.css' type='text/css' />
+<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.min.js'></script>
+<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.css' type='text/css' />
 <div id='map'></div>
 
 <script>

diff --git a/docs/pages/example/mapbox-gl-geocoder-custom-render.html b/docs/pages/example/mapbox-gl-geocoder-custom-render.html
@@ -1,5 +1,5 @@
-<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.0/mapbox-gl-geocoder.min.js'></script>
-<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.0/mapbox-gl-geocoder.css' type='text/css' />
+<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.min.js'></script>
+<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.css' type='text/css' />
 <style>
 .geocoder-dropdown-item{
     padding: 5px

diff --git a/docs/pages/example/mapbox-gl-geocoder-limit-region.html b/docs/pages/example/mapbox-gl-geocoder-limit-region.html
@@ -1,5 +1,5 @@
-<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.0/mapbox-gl-geocoder.min.js'></script>
-<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.0/mapbox-gl-geocoder.css' type='text/css' />
+<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.min.js'></script>
+<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.css' type='text/css' />
 <div id='map'></div>
 
 <script>

diff --git a/docs/pages/example/mapbox-gl-geocoder-outside-the-map.html b/docs/pages/example/mapbox-gl-geocoder-outside-the-map.html
@@ -1,5 +1,5 @@
-<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.0/mapbox-gl-geocoder.min.js'></script>
-<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.0/mapbox-gl-geocoder.css' type='text/css' />
+<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.min.js'></script>
+<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.css' type='text/css' />
 <style>
     .geocoder {
         position:absolute;

diff --git a/docs/pages/example/mapbox-gl-geocoder-with-flyto.html b/docs/pages/example/mapbox-gl-geocoder-with-flyto.html
@@ -1,5 +1,5 @@
-<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.0/mapbox-gl-geocoder.min.js'></script>
-<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.0/mapbox-gl-geocoder.css' type='text/css' />
+<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.min.js'></script>
+<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.css' type='text/css' />
 <div id='map'></div>
 
 <script>

diff --git a/docs/pages/example/mapbox-gl-geocoder-with-language.html b/docs/pages/example/mapbox-gl-geocoder-with-language.html
@@ -1,5 +1,5 @@
-<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.0/mapbox-gl-geocoder.min.js'></script>
-<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.0/mapbox-gl-geocoder.css' type='text/css' />
+<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.min.js'></script>
+<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.css' type='text/css' />
 <div id='map'></div>
 
 <script>

diff --git a/docs/pages/example/mapbox-gl-geocoder.html b/docs/pages/example/mapbox-gl-geocoder.html
@@ -1,5 +1,5 @@
-<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.0/mapbox-gl-geocoder.min.js'></script>
-<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.0/mapbox-gl-geocoder.css' type='text/css' />
+<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.min.js'></script>
+<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.css' type='text/css' />
 <div id='map'></div>
 
 <script>

diff --git a/docs/pages/example/point-from-geocoder-result.html b/docs/pages/example/point-from-geocoder-result.html
@@ -1,5 +1,5 @@
-<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.0/mapbox-gl-geocoder.min.js'></script>
-<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.0/mapbox-gl-geocoder.css' type='text/css' />
+<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.min.js'></script>
+<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.4.1/mapbox-gl-geocoder.css' type='text/css' />
 <style>
 #geocoder-container > div {
     min-width:50%;

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mapbox-gl",
   "description": "A WebGL interactive maps library",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "main": "dist/mapbox-gl.js",
   "style": "dist/mapbox-gl.css",
   "license": "SEE LICENSE IN LICENSE.txt",

diff --git a/src/style-spec/reference/v8.json b/src/style-spec/reference/v8.json
@@ -966,7 +966,13 @@
       "type": "number",
       "doc": "Sorts features in ascending order based on this value. Features with a higher sort key will appear above features with a lower sort key when they overlap. Features with a lower sort key will have priority over other features when doing placement.",
       "sdk-support": {
-          "js": "0.53.0"
+        "basic functionality": {
+          "js": "0.53.0",
+          "android": "7.4.0",
+          "ios": "4.11.0",
+          "macos": "0.14.0"
+        },
+        "data-driven styling": {}
       },
       "expression": {
         "interpolated": false,

diff --git a/src/util/actor.js b/src/util/actor.js
@@ -56,12 +56,16 @@ class Actor {
         }, buffers);
         if (callback) {
             return {
-                cancel: () => this.target.postMessage({
-                    targetMapId,
-                    sourceMapId: this.mapId,
-                    type: '<cancel>',
-                    id: String(id)
-                })
+                cancel: () => {
+                    // Set the callback to null so that it never fires after the request is aborted.
+                    this.callbacks[id] = null;
+                    this.target.postMessage({
+                        targetMapId,
+                        sourceMapId: this.mapId,
+                        type: '<cancel>',
+                        id: String(id)
+                    });
+                }
             };
         }
     }

diff --git a/src/util/ajax.js b/src/util/ajax.js
@@ -102,6 +102,7 @@ function makeFetchRequest(requestParameters: RequestParameters, callback: Respon
         signal: controller.signal
     });
     let complete = false;
+    let aborted = false;
 
     const cacheIgnoringSearch = hasCacheDefeatingSku(request.url);
 
@@ -110,6 +111,8 @@ function makeFetchRequest(requestParameters: RequestParameters, callback: Respon
     }
 
     const validateOrFetch = (err, cachedResponse, responseIsFresh) => {
+        if (aborted) return;
+
         if (err) {
             // Do fetch in case of cache error.
             // HTTP pages in Edge trigger a security error that can be ignored.
@@ -152,6 +155,7 @@ function makeFetchRequest(requestParameters: RequestParameters, callback: Respon
             requestParameters.type === 'json' ? response.json() :
             response.text()
         ).then(result => {
+            if (aborted) return;
             if (cacheableResponse && requestTime) {
                 // The response needs to be inserted into the cache after it has completely loaded.
                 // Until it is fully loaded there is a chance it will be aborted. Aborting while
@@ -172,6 +176,7 @@ function makeFetchRequest(requestParameters: RequestParameters, callback: Respon
     }
 
     return { cancel: () => {
+        aborted = true;
         if (!complete) controller.abort();
     }};
 }

diff --git a/src/util/tile_request_cache.js b/src/util/tile_request_cache.js
@@ -73,17 +73,20 @@ function stripQueryParameters(url: string) {
 export function cacheGet(request: Request, callback: (error: ?any, response: ?Response, fresh: ?boolean) => void) {
     if (!window.caches) return callback(null);
 
+    const strippedURL = stripQueryParameters(request.url);
+
     window.caches.open(CACHE_NAME)
         .catch(callback)
         .then(cache => {
-            cache.match(request, { ignoreSearch: true })
+            // manually strip URL instead of `ignoreSearch: true` because of a known
+            // performance issue in Chrome https://github.com/mapbox/mapbox-gl-js/issues/8431
+            cache.match(strippedURL)
                 .catch(callback)
                 .then(response => {
                     const fresh = isFresh(response);
 
                     // Reinsert into cache so that order of keys in the cache is the order of access.
                     // This line makes the cache a LRU instead of a FIFO cache.
-                    const strippedURL = stripQueryParameters(request.url);
                     cache.delete(strippedURL);
                     if (fresh) {
                         cache.put(strippedURL, response.clone());