Use locally generated ideographs

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’.

This setting is enabled by default to use the system ‘sans-serif’ font. When overriding this setting, the fonts you select may not be available on all users’ devices. Specify at least one broadly available fallback font class such as ‘sans-serif’.


npm install --save @maptiler/sdk

main.js

import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';

config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
config.primaryLanguage = maptilersdk.Language.NON_LATIN;
const map = new Map({
    container: 'map',
    style: MapStyle.STREETS, 
    center: [120.3049, 31.4751],
    zoom: 12,
    localIdeographFontFamily: "'Noto Sans', 'Noto Sans CJK SC', sans-serif"
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Use locally generated ideographs</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="map"></div>
  <script type="module" src="./main.js"></script>
</body>
</html>

style.css

body {margin: 0; padding: 0;}
#map {position: absolute; top: 0; bottom: 0; width: 100%;}

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Use locally generated ideographs</title>
<script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js"></script>
<link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" rel="stylesheet" />
<style>
  body {margin: 0; padding: 0;}
  #map {position: absolute; top: 0; bottom: 0; width: 100%;}
</style>
</head>
<body>
<div id="map"></div>

<script>
    maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
    maptilersdk.config.primaryLanguage = maptilersdk.Language.NON_LATIN;
    const map = new maptilersdk.Map({
        container: 'map',
        style: maptilersdk.MapStyle.STREETS, 
        center: [120.3049, 31.4751],
        zoom: 12,
        localIdeographFontFamily: "'Noto Sans', 'Noto Sans CJK SC', sans-serif"
    });
</script>
</body>
</html>

Use locally generated ideographs

main.js

index.html

style.css

Change the case of labels

Display and style rich text labels

Set map language

Icon image URL inside a rich text format label

Use locally generated ideographs

NPM module setup

main.js

index.html

style.css

Basic JavaScript setup

Related examples

Change the case of labels

Display and style rich text labels

Set map language

Icon image URL inside a rich text format label