Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Style labels with local fonts 🔗

Apply local fonts to your style’s text labels. This option is suitable if you don’t need every user to see exactly the same font, or if you want to avoid relying on a third-party content delivery network (CDN). For maximum compatibility, the text-font property should include fonts commonly found on multiple platforms.

// src/main.rs 

use maplibre_gl_js::interface::MapOptions;
use yew::{Html, function_component, html, use_effect, use_state};

#[function_component(App)]
fn app() -> Html {
    let map_rendered = use_state(|| false);
    use_effect(move || {
        if *map_rendered {
            return;
        }
        MapOptions::new("map")
            .with_zoom(9.)
            .with_center([137.9150899566626, 36.25956997955441])
            .with_style(serde_json::json!({
                "version": 8,
                "sources": {
                    "satellite": {
                        "type": "raster",
                        "tiles": [
                            "https://tiles.maps.eox.at/wmts/1.0.0/s2cloudless-2020_3857/default/g/{z}/{y}/{x}.jpg",
                        ],
                        "tileSize": 256,
                    },
                    "places": {
                        "type": "geojson",
                        "data": {
                            "type": "FeatureCollection",
                            "features": [
                                {
                                    "type": "Feature",
                                    "properties": {
                                        "name": "安曇野市",
                                    },
                                    "geometry": {
                                        "type": "Point",
                                        "coordinates": [137.9054972, 36.3044083],
                                    }
                                },
                                {
                                    "type": "Feature",
                                    "properties": {
                                        "name": "松本市",
                                    },
                                    "geometry": {
                                        "type": "Point",
                                        "coordinates": [137.9687141, 36.2382047],
                                    }
                                }
                            ]
                        }
                    }
                },
                "layers": [
                    {
                        "id": "satellite",
                        "type": "raster",
                        "source": "satellite",
                    },
                    {
                        "id": "places",
                        "type": "symbol",
                        "source": "places",
                        "layout": {
                            "text-font": ["Hiragino Mincho ProN", "Noto Serif CJK JP", "MS Mincho"],
                            "text-size": 24,
                            "text-field": ["get", "name"],
                        },
                        "paint": {
                            "text-color": "white",
                        },
                    },
                ],
            }))
            .build()
            .expect("Creating a map should work");
        map_rendered.set(true);
    });
    html! { <div id="map"></div> }
}

fn main() {
    wasm_logger::init(wasm_logger::Config::new(log::Level::Trace));
    console_error_panic_hook::set_once();
    yew::Renderer::<App>::new().render();
}
<!-- index.html -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon"type="image/x-icon" href="data:image/x-icon;,">
    <title>Style labels with local fonts</title>
    <link rel="scss" data-trunk href="scss/style.scss" />
    <script src="https://unpkg.com/maplibre-gl@^5.18.0/dist/maplibre-gl.js"></script>
    <link href="https://unpkg.com/maplibre-gl@^5.18.0/dist/maplibre-gl.css" rel="stylesheet" />
  </head>
  <body>loading...</body>
</html>

/* scss/style.scss */

body { margin: 0; padding: 0; }
html, body, body > div { height: 100%; }