From 7362b2218242cdb555ae373a5a074aa30b7405dc Mon Sep 17 00:00:00 2001 From: Asheem Mamoowala Date: Thu, 7 Mar 2019 22:40:56 -0800 Subject: [PATCH 1/3] Enable local ideograph generation for glyphs in the 'CJK Unified Ideographs' and 'Hangul Syllables' ranges, using the system default sans-serif font. --- debug/tinysdf.html | 7 ++++--- docs/pages/example/local-ideographs.js | 10 ++++++---- src/ui/map.js | 16 +++++++++++----- 3 files changed, 21 insertions(+), 12 deletions(-) diff --git a/debug/tinysdf.html b/debug/tinysdf.html index 5faa2b6d019..e4b7ad92658 100644 --- a/debug/tinysdf.html +++ b/debug/tinysdf.html @@ -60,7 +60,7 @@ layer.layout['text-field'] = "{name}"; } } - map.setStyle(style, map.style.glyphSource.localIdeographFontFamily); + map.setStyle(style); }); } @@ -69,7 +69,8 @@ zoom: 8.8, center: [121.574, 31.1489], style: 'mapbox://styles/mapbox/streets-v10', - hash: true + hash: true, + localIdeographFontFamily: false }); localizeLayers(originalMap); @@ -79,7 +80,7 @@ zoom: 8.8, center: [121.574, 31.1489], style: 'mapbox://styles/mapbox/streets-v10', - localIdeographFontFamily: '"Noto Sans", "Noto Sans CJK SC", sans-serif', + //Uses default localIdeographFontFamily 'sans-serif' hash: true }); diff --git a/docs/pages/example/local-ideographs.js b/docs/pages/example/local-ideographs.js index 0357d6c6574..1763d2c44ce 100644 --- a/docs/pages/example/local-ideographs.js +++ b/docs/pages/example/local-ideographs.js @@ -10,10 +10,12 @@ description: >- 'Hangul Syllables' Unicode ranges. In these ranges, font settings from the map's style will be ignored in favor of the locally available font. Keywords in the fontstack defined in the map's style (light/regular/medium/bold) will - be translated into a CSS 'font-weight'. When using this setting, keep in mind - that the fonts you select may not be available on all users' devices. It is - best to specify at least one broadly available fallback font class such as - 'sans-serif'. + be translated into a CSS 'font-weight'. + + This setting is enabled by default to use the system 'sans-serif' font. When + overriding this setting, keep in mind that the fonts you select may not be available + on all users' devices. It is best to specify at least one broadly available + fallback font class such as 'sans-serif'. tags: - internationalization pathname: /mapbox-gl-js/example/local-ideographs/ diff --git a/src/ui/map.js b/src/ui/map.js index 6b1141363b3..c4c872d041c 100755 --- a/src/ui/map.js +++ b/src/ui/map.js @@ -129,6 +129,7 @@ const defaultOptions = { renderWorldCopies: true, refreshExpiredTiles: true, maxTileCacheSize: null, + localIdeographFontFamily: 'sans-serif', transformRequest: null, fadeDuration: 300, crossSourceCollisions: true @@ -203,9 +204,10 @@ const defaultOptions = { * @param {Object} [options.fitBoundsOptions] A [`fitBounds`](#map#fitbounds) options object to use _only_ when fitting the initial `bounds` provided above. * @param {boolean} [options.renderWorldCopies=true] If `true`, multiple copies of the world will be rendered, when zoomed out. * @param {number} [options.maxTileCacheSize=null] The maximum number of tiles stored in the tile cache for a given source. If omitted, the cache will be dynamically sized based on the current viewport. - * @param {string} [options.localIdeographFontFamily=null] If specified, defines a CSS font-family - * for locally overriding generation of glyphs in the 'CJK Unified Ideographs' and 'Hangul Syllables' ranges. + * @param {string} [options.localIdeographFontFamily='sans-serif'] Defines a CSS + * font-family for locally overriding generation of glyphs in the 'CJK Unified Ideographs' and 'Hangul Syllables' ranges. * In these ranges, font settings from the map's style will be ignored, except for font-weight keywords (light/regular/medium/bold). + * Set to `false`, to enable font settings from the map's style for these glyph ranges. * The purpose of this option is to avoid bandwidth-intensive glyph server requests. (see [Use locally generated ideographs](https://www.mapbox.com/mapbox-gl-js/example/local-ideographs)) * @param {RequestTransformFunction} [options.transformRequest=null] A callback run before the Map makes a request for an external URL. The callback can be used to modify the url, set headers, or set the credentials property for cross-origin requests. * Expected to return an object with a `url` property and optionally `headers` and `credentials` properties. @@ -950,13 +952,17 @@ class Map extends Camera { * @param {Object} [options] * @param {boolean} [options.diff=true] If false, force a 'full' update, removing the current style * and building the given one instead of attempting a diff-based update. - * @param {string} [options.localIdeographFontFamily=null] If non-null, defines a css font-family - * for locally overriding generation of glyphs in the 'CJK Unified Ideographs' and 'Hangul Syllables' - * ranges. Forces a full update. + * @param {string} [options.localIdeographFontFamily='sans-serif'] Defines a CSS + * font-family for locally overriding generation of glyphs in the 'CJK Unified Ideographs' and 'Hangul Syllables' ranges. + * In these ranges, font settings from the map's style will be ignored, except for font-weight keywords (light/regular/medium/bold). + * Set to `false`, to enable font settings from the map's style for these glyph ranges. + * Forces a full update. * @returns {Map} `this` * @see [Change a map's style](https://www.mapbox.com/mapbox-gl-js/example/setstyle/) */ setStyle(style: StyleSpecification | string | null, options?: {diff?: boolean} & StyleOptions) { + options = extend({}, { localIdeographFontFamily: defaultOptions.localIdeographFontFamily}, options); + if ((!options || (options.diff !== false && !options.localIdeographFontFamily)) && this.style && style) { this._diffStyle(style, options); return this; From c5080179afb4157b979711c0b8eceb30a9c560cf Mon Sep 17 00:00:00 2001 From: Asheem Mamoowala Date: Tue, 12 Mar 2019 12:48:10 -0700 Subject: [PATCH 2/3] Disable local Ideograph generation for render tests --- test/suite_implementation.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/test/suite_implementation.js b/test/suite_implementation.js index c11d28faaf7..634648d295f 100644 --- a/test/suite_implementation.js +++ b/test/suite_implementation.js @@ -52,6 +52,7 @@ module.exports = function(style, options, _callback) { // eslint-disable-line im axonometric: options.axonometric || false, skew: options.skew || [0, 0], fadeDuration: options.fadeDuration || 0, + localIdeographFontFamily: options.localIdeographFontFamily || false, crossSourceCollisions: typeof options.crossSourceCollisions === "undefined" ? true : options.crossSourceCollisions }); @@ -156,7 +157,11 @@ module.exports = function(style, options, _callback) { // eslint-disable-line im map.addLayer(new customLayerImplementations[operation[1]](), operation[2]); map._render(); applyOperations(map, operations.slice(1), callback); - + } else if (operation[0] === 'setStyle') { + // Disable local ideograph generation (enabled by default) for + // consistent local ideograph rendering using fixtures in all runs of the test suite. + map.setStyle(operation[1], { localIdeographFontFamily: false }); + applyOperations(map, operations.slice(1), callback); } else { map[operation[0]](...operation.slice(1)); applyOperations(map, operations.slice(1), callback); From e2b3825f7f346e4471744472a0eb965b410de592 Mon Sep 17 00:00:00 2001 From: Asheem Mamoowala Date: Tue, 12 Mar 2019 12:48:16 -0700 Subject: [PATCH 3/3] Update handling of default options in Map#setStyle --- src/ui/map.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/map.js b/src/ui/map.js index c4c872d041c..c2c6697f3f7 100755 --- a/src/ui/map.js +++ b/src/ui/map.js @@ -963,7 +963,7 @@ class Map extends Camera { setStyle(style: StyleSpecification | string | null, options?: {diff?: boolean} & StyleOptions) { options = extend({}, { localIdeographFontFamily: defaultOptions.localIdeographFontFamily}, options); - if ((!options || (options.diff !== false && !options.localIdeographFontFamily)) && this.style && style) { + if ((options.diff !== false && !options.localIdeographFontFamily) && this.style && style) { this._diffStyle(style, options); return this; } else {