9
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

FOSS4GAdvent Calendar 2024

Day 24

オリジナルの地図デザインを作る!その2(伊能図風マップ)

Last updated at Posted at 2024-12-23

スクリーンショット 2024-12-24 0.29.39.png

前回は夜景風のマップを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. 日本語書体が表示されない!?

スクリーンショット 2024-12-19 14.41.19.png

よく見ると欧文のみ書体が適用されているようです。
色々調べたところ、こちらのQiita記事に答えが書いてありました。

style.json の設定で、localIdeographFontFamily: false を追記します。この変更により、日本語書体が正しく反映されるようになりました!

スクリーンショット 2024-12-24 0.26.22.png

地図スタイルを整える

最後に、伊能図の特徴である道路線を赤く塗り、主要道路には黄色いぼかしを追加しました。色合いを調整し、完成です!

スクリーンショット 2024-12-24 0.29.39.png

▼▼ 完成した地図はこちらからご覧いただけます! ▼▼

おわりに

今回は日本語書体を変えることで、地図の印象をがらりと変化させることができました。
文字をpbf形式に変換する一手間が必要とはなりますが、地図の表現の幅が大きく広がることは間違いないでしょう。

例えば明朝体を使えば、このような昔の地図(旧版地図)風のデザインだって作れてしまいます!

スクリーンショット 2024-12-24 0.31.49.png

ぜひ、オリジナルの地図デザインを楽しんでみてください!

※今回もオープンデータであるOpenMapTiles, OpenStreetMapを利用しています。MapLibre, Maputnikも含めオープンソースに携わっている方々へ、重ねてお礼申し上げます🙏
©OpenStreetMap contributors

参考文献

9
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?