避難所の数を表示したい

[ShogoHirasawa]

No description provided.

[ShogoHirasawa]

現状

理想形

https://maplibre.org/maplibre-gl-js-docs/example/cluster/

consoleのエラー

Uncaught (in promise) Error: Style is not done loading.
    at ie._checkLoaded (style.ts:374:19)
    at ie.addLayer (style.ts:652:14)
    at Map.addLayer (map.ts:1973:20)
    at (index):90:13

なぜエラーがおきているのかの予想

非同期処理がうまく行っていないのかもと予想。非同期処理とは何なのかをまずは理解する必要あり

参考になりそうな資料

https://teratail.com/questions/141224

https://qiita.com/cheez921/items/41b744e4e002b966391a

[ShogoHirasawa]

非同期処理の理解ができていなかった。

非同期処理の構造を理解できていなかったためのエラーだった。コードを書き直したところ以下のような表示になった。

openmaptilesの提供するフォントから選ばなきゃいけないっぽい。
以下を参考にすること
https://github.com/openmaptiles/fonts

[ShogoHirasawa]

フォント変更

フォントをOpen Sans Regularに変更したら無事にフェッチできた

[ShogoHirasawa]

フォントエラーの詳細

MapLibre GL JS Style Specificationによると、テキストフォントは設定しなければ自動的にOpen Sans Regular,Arial Unicode MS Regularになる仕様になっている。

MapLibre GL JS が用意しているstyle.jsonを使えば問題ないが、今回の場合は独自でstyle.jsonを作っている。今回使用しているstyle.jsonの中身を見るとフォントはopenmaptilesから取ってきていることがわかった。
style.jsonに以下の記述がある。

 "glyphs": "https://fonts.openmaptiles.org/{fontstack}/{range}.pbf",

以下のフォントファミリーからフォントを指定してあげることで、無事解決した。

• Arial はMapLibreでは提供していないので注意すること