Skip to content

Commit

Permalink
Add a 'localIdeographFontFamily' example.
Browse files Browse the repository at this point in the history
  • Loading branch information
ChrisLoer committed Jul 4, 2017
1 parent 6e7f318 commit 2b577e7
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 3 deletions.
21 changes: 21 additions & 0 deletions docs/_posts/examples/3400-02-01-local-ideographs.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
---
layout: example
category: example
title: Use locally generated ideographs
description: Rendering Chinese/Japanese/Korean (CJK) ideographs and precomposed Hangul Syllables requires downloading large amounts of font data, which can significantly slow map load times. Use the 'localIdeographFontFamily' setting to speed up map load times by using locally available fonts instead of font data fetched from the server. This setting defines a CSS 'font-family' for locally overriding generation of glyphs in the 'CJK Unified Ideographs' and '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'.
tags:
- internationalization
---
<div id='map'></div>

<script>

var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [120.3049, 31.4751],
zoom: 12,
localIdeographFontFamily: "'Noto Sans', 'Noto Sans CJK SC', sans-serif"
});

</script>
6 changes: 3 additions & 3 deletions src/ui/map.js
Original file line number Diff line number Diff line change
Expand Up @@ -192,10 +192,10 @@ const defaultOptions = {
* @param {number} [options.pitch=0] The initial pitch (tilt) of the map, measured in degrees away from the plane of the screen (0-60). If `pitch` is not specified in the constructor options, Mapbox GL JS will look for it in the map's style object. If it is not specified in the style, either, it will default to `0`.
* @param {boolean} [options.renderWorldCopies=true] If `true`, multiple copies of the world will be rendered, when zoomed out.
* @param {number} [options.maxTileCacheSize=null] The maxiumum 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
* @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.
* In these ranges, font settings from the map's style will be mostly ignored, except for font-weight keywords (light/regular/medium/bold).
* The purpose of this option is to avoid bandwidth-intensive glyph server requests.
* In these ranges, font settings from the map's style will be ignored, except for font-weight keywords (light/regular/medium/bold).
* 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))
* @example
* var map = new mapboxgl.Map({
* container: 'map',
Expand Down

0 comments on commit 2b577e7

Please sign in to comment.