Examples
Styles (11)Add a default markerAdd an animated icon to the mapAdd a generated icon to the mapGenerate and add a missing icon to the mapAdd an icon to the mapAdd a stretchable image to the mapDisplay a map with a custom styleRender world copiesDisplay a satellite mapChange a map's styleDisplay a mapLayers (32)Display buildings in 3DExtrude polygons for 3D indoor mappingAdd a 3D modelAnimate a lineAdjust a layer's opacityAnimate a series of imagesAnimate a pointChange building color based on zoom levelChange the case of labelsDisplay HTML clusters with custom propertiesChange a layer's color with buttonsCreate and style clustersAdd a custom style layerStyle circles with a data-driven propertyStyle lines with a data-driven propertyDisplay and style rich text labelsAdd a pattern to a polygonAdd a GeoJSON lineAdd a new layer below labelsDraw GeoJSON pointsAdd a GeoJSON polygonCreate a heatmap layerAdd hillshadingCreate a gradient line using an expressionAdd multiple geometries from one GeoJSON sourceUse a fallback imageStyle ocean depth dataShow and hide layersChange worldview of administrative boundariesUpdate a choropleth layer by zoom levelVariable label placementVisualize population densitySources (10)Add a canvas sourceJoin local JSON data with vector tile geometriesAdd an imageAdd live realtime dataUpdate a feature in realtimeAdd a raster tile sourceAdd a third party vector tile sourceAdd a vector tile sourceAdd a videoAdd a WMS sourceUser interaction (21)Customize camera animationsAnimate 3D buildings based on ambient soundsDisable map rotationFilter features within map viewFilter symbols by text inputFilter symbols by toggling a listCreate a hover effectDisplay a non-interactive mapChange a map's languageMeasure distancesGet coordinates of the mouse pointerHighlight features containing similar dataSelect features around a clicked pointGet features under the mouse pointerRestrict map panning to an areaCreate a time sliderToggle interactionsHighlight features within a bounding boxFit to the bounds of a LineStringCreate a draggable pointCreate a draggable MarkerCamera (12)Animate map camera around a pointAnimate a point along a routeCenter the map on a clicked symbolFit a map to a bounding boxSlowly fly to a locationFly to a locationNavigate the map with game-like controlsJump to a series of locationsOffset the vanishing point using paddingPlay map locations as a slideshowFly to a location based on scroll positionSet pitch and bearingControls and overlays (17)Animate a markerChange the default position for attributionAdd custom icons with MarkersDisable scroll zoomView a fullscreen mapLocate the userDisplay driving directionsShow drawn polygon areaSwipe between mapsAdd a geocoderAdd a marker using a place nameDisplay map navigation controlsShow polygon information on clickDisplay a popup on clickDisplay a popup on hoverDisplay a popupAttach a popup to a marker instanceGeocoder (9)Supplement forward geocoding search results from another data sourceAccept coordinates as input to a geocoderUse a custom render function with a geocoderLimit geocoder results to a named regionUse the geocoder without a mapPlace the geocoder input outside the mapLocalize the geocoder to a given languageUse a custom camera animation with a geocoderSet a point after Geocoder resultBrowser support (1)Check if Mapbox GL JS is supportedInternationalization support (2)Use locally generated ideographsAdd support for right-to-left scripts

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, 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'. Note that Mapbox Studio sets this value to false by default.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Use locally generated ideographs</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.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>
// TO MAKE THE MAP APPEAR YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [120.3049, 31.4751],
zoom: 12,
localIdeographFontFamily: "'Noto Sans', 'Noto Sans CJK SC', sans-serif"
});
</script>
</body>
</html>
Was this example helpful?