前回は夜景風のマップをMaptunik、そしてMapLibreで作成しましたが、今回は江戸時代に伊能忠敬の作った「伊能図風」のマップを作りたいと思います!
▼ 完成した地図はコチラ!
本記事は前回の記事の続きになっています。まだご覧になっていない方は、ぜひ以下の記事からどうぞ!
伊能図について
ご存知の方は多いかと思いますが、伊能忠敬(いのうただたか)は、江戸時代後期に日本全国を測量し、精密な地図を作り上げた人物です。その成果である「伊能図」は、緻密な測量技術と芸術的な美しさを兼ね備えた、日本地図史に残る傑作とも言えるかと思います。
実際の伊能図は、国土地理院の「古地図コレクション」などで閲覧できます。
今回もMaputnikを使って、当時の地図の雰囲気を再現した「伊能図風」の地図スタイルを作成します。
Maputikで書体を変える
伊能図(当時の地図はそうですが)の特徴といえば、やはり筆で描かれた文字でしょう。この雰囲気を再現するため、筆書体を取り入れてみます。
今回使用したのはGoogle Fontsの「Yuji Syuku」という書体です。
1. フォントをpbf形式に変換
まずはフォントファイル(otf, ttf)をpbf形式に変換します。以下のサイトを利用しました。
2. Maputnikにフォントを設定する
変換したフォントをMaputnikで設定します。style.json
内に以下を追加します。
"glyphs": "https://ウェブサイト名/fonts/{fontstack}/{range}.pbf"
これで日本語書体が表示される、はずでした…
3. 日本語書体が表示されない!?
よく見ると欧文のみ書体が適用されているようです。
色々調べたところ、こちらのQiita記事に答えが書いてありました。
style.json
の設定で、localIdeographFontFamily: false
を追記します。この変更により、日本語書体が正しく反映されるようになりました!
地図スタイルを整える
最後に、伊能図の特徴である道路線を赤く塗り、主要道路には黄色いぼかしを追加しました。色合いを調整し、完成です!
▼▼ 完成した地図はこちらからご覧いただけます! ▼▼
おわりに
今回は日本語書体を変えることで、地図の印象をがらりと変化させることができました。
文字をpbf形式に変換する一手間が必要とはなりますが、地図の表現の幅が大きく広がることは間違いないでしょう。
例えば明朝体を使えば、このような昔の地図(旧版地図)風のデザインだって作れてしまいます!
ぜひ、オリジナルの地図デザインを楽しんでみてください!
※今回もオープンデータであるOpenMapTiles, OpenStreetMapを利用しています。MapLibre, Maputnikも含めオープンソースに携わっている方々へ、重ねてお礼申し上げます🙏
©OpenStreetMap contributors