visgl / visgl/react-map-gl

[Bug] maplibre localIdeographFontFamily Not effective

Open
#2,537 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
8.5k
Forks
1.4k
Avg merge
5d 17h
Merged PRs (30d)
3

Description

Description

maplibre localIdeographFontFamily Not effective

Html takes effect. react doesn't take effect

Expected Behavior

No response

Steps to Reproduce
<title>Use locally generated ideographs</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- <link
        rel="stylesheet"
        href="https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.css"
    /> -->
    <script src="https://unpkg.com/maplibre-gl@5.5.0/dist/maplibre-gl.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        html,
        body,
        #map {
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="map"></div>

    <script>
        const map = new maplibregl.Map({
            container: "map",
            style: "https://api.maptiler.com/maps/streets-v2-light/style.json?key=dYcvRTJBEWnehsE2z5LQ",
            center: [120.3049, 31.4751],
            zoom: 12,
            localIdeographFontFamily: '"Apple LiSung", serif',
        });
        console.log(map);
    </script>
</body>
Environment
  • Framework version:
  • Map library:
  • Browser:
  • OS:
Logs

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the React map initialization corresponding to the supplied HTML Map constructor example and compare how localIdeographFontFamily is passed through the React wrapper. Reproduce the discrepancy using the MapTiler style and maplibre-gl 5.5.0 example; done means the React integration applies the local font family as the HTML example does.

Written by the indexing model from the issue text.

Assessment

Tech stack
react
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.