Charites でスタイルを編集する

地図の見た目を変更するにはスタイルファイルを編集して下さい。Geolonia の Embed API では MapLibre GL JS スタイルと同じオプションやプロパティを使うことができます。

レイヤーについて

style.yml は下の様になっています。地図の見た目を変更するには、layers より下で読み込まれているレイヤーファイルを書き換えて下さい。

version: 8
{ … 省略 … }
layers:
  - !!inc/file layers/background.yml
  - !!inc/file layers/landcover-grass.yml
  - !!inc/file layers/landcover-wood.yml
  - !!inc/file layers/landcover-grass-park.yml
  - !!inc/file layers/water.yml
  - !!inc/file layers/water-river-lake-ja.yml

レイヤータイプについて

レイヤーファイルは下の様になっています。面の見た目を変えるには fill、線は line 、点は symbol を type に指定して下さい。

id: highway-motorway
type: line
{ … 省略 … }
layout: ...
paint: ...

paint と layoutについて

色やアイコンなどの見た目を決めるには、paint と layout を使います。paint では主に色や透明度を指定し、layout ではアイコンの重なりや padding 等のレイアウトについての変更ができます。下の図のように、レイヤータイプごとに使える paint と layout の値は変わりますので、どんなオプションが使えるかは、MapLibre GL JS のドキュメントを参考にして下さい。

fill（面）
- paint
- layout
line（線）
- paint
- layout
symbol（点）
- paint
- layout

サンプルコード

高速道路を表示している highway-motorway.yml を見ると、レイヤータイプは line で、paint の line-color で、線の色を #FFFFFF にしています。layout では line-cap: round を使って線の両端を丸めています。

id: highway-motorway
type: line
{... 省略 ...}
paint:
  line-color: "#FFFFFF"
  line-width: 1.2
layout:
  line-cap: round
  line-join: round

MapLibre GL JS のドキュメントからオプションを探すには

Geolonia が用意しているスタイルを編集するだけで、オリジナルスタイルを作ることができますが、元のスタイルにないオプションを使いたい方は、下の手順で MapLibre GL JS のドキュメントをご覧ください。

https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/ にアクセスし、右のサイドバーで使いたいレイヤータイプを選んで下さい。

2.　そのタイプで使えるオプションの一覧が表示されます。

3.　使用したいオプションをクリックするとpaint か layout プロパティかを書いていますので、それに沿ってお使いください。