Cartographic features for Japanese maps

By: Jaime Chen

As we continue to enhance our maps in Japan, here’s a look at our favorite cartographic features available to add to any map or visualization.

GL rendering for CJK glyphs

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Global Japanese labels

All maps have Japanese-language labels available anywhere in the world from our global dataset.

Image may be NSFW.
Clik here to view.

Image may be NSFW.
Clik here to view.

Bilingual labels with formatted text

Display two languages at the same time using a format expression:

map.setLayoutProperty(layer, 'text-field', ['format',
     ['get', 'name_ja'], { 'font-scale': 1.2 },
     '\n', {},
     ['get', 'name_en'], {
          'font-scale': 0.8
     }
]);

Image may be NSFW.
Clik here to view.

Local glyph generation for CJK

Using local glyphs for CJK text instead of embedded fonts can have significant performance improvements for your map. CJK glyphs are detailed and heavy in terms of file size, so we offer a feature to bypass remotely loading fonts and default to a local font that’s already on your user’s phone or computer.

Image may be NSFW.
Clik here to view.

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"
});

Vertical layout for CJK text on line labels

When designing labels for roads or other line-based features, you can display your text vertically along the line’s path.

Image may be NSFW.
Clik here to view.

Sign up to get started building your own maps with CJK features.

Jaime Chen - Service Owner: Product, Design, Engineering for Map Design - Mapbox | LinkedIn

Image may be NSFW.
Clik here to view.

Cartographic features for Japanese maps was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.