解説 Geolonia Maps のスタイル一覧

Geolonia が公式に提供しているスタイルです。論理名を data-style や style に渡すだけで切り替えられます。スタイルそのものの考え方は地図のスタイルとはを参照してください。

論理名内容
geolonia/basic-v2標準のスタイル。指定を省略したときはこれが使われます
geolonia/gsi国土地理院のベクトルタイルを使ったスタイル
geolonia/midnight濃紺を基調とした暗色のスタイル
geolonia/red-planet暗い赤を基調としたスタイル
geolonia/notebook白を基調とした淡い色のスタイル
geolonia/homeworkNatural Earth による世界規模の簡素なスタイル
geoloniamaps/smartcity-base国土地理院の最適化ベクトルタイルを使ったスタイル

このほかに非推奨のスタイルが2つあります。

以下、それぞれの見え方です。同じ場所と縮尺で並べています。

geolonia/basic-v2

標準のスタイルです。data-style を書かなかったときはこれが使われます。OpenStreetMap のデータを元にしています。

<!doctype html>
<html>
  <head><meta charset="UTF-8"><style>.geolonia{width:100%;height:340px}</style></head>
  <body>
    <div class="geolonia" data-lat="35.68" data-lng="139.76" data-zoom="12"
         data-style="geolonia/basic-v2"></div>
    <script src="https://cdn.geolonia.com/embed/v5/embed?geolonia-api-key=YOUR-API-KEY"></script>
  </body>
</html>

geolonia/gsi

国土地理院のベクトルタイルを使ったスタイルです。日本国内の表現が地理院地図に近くなります。

<!doctype html>
<html>
  <head><meta charset="UTF-8"><style>.geolonia{width:100%;height:340px}</style></head>
  <body>
    <div class="geolonia" data-lat="35.68" data-lng="139.76" data-zoom="12"
         data-style="geolonia/gsi"></div>
    <script src="https://cdn.geolonia.com/embed/v5/embed?geolonia-api-key=YOUR-API-KEY"></script>
  </body>
</html>

geolonia/midnight

濃紺を基調とした暗色のスタイルです。暗い画面に地図を置くときや、地図の上に色の濃いデータを重ねるときに使えます。

<!doctype html>
<html>
  <head><meta charset="UTF-8"><style>.geolonia{width:100%;height:340px}</style></head>
  <body>
    <div class="geolonia" data-lat="35.68" data-lng="139.76" data-zoom="12"
         data-style="geolonia/midnight"></div>
    <script src="https://cdn.geolonia.com/embed/v5/embed?geolonia-api-key=YOUR-API-KEY"></script>
  </body>
</html>

geolonia/red-planet

暗い赤を基調としたスタイルです。

<!doctype html>
<html>
  <head><meta charset="UTF-8"><style>.geolonia{width:100%;height:340px}</style></head>
  <body>
    <div class="geolonia" data-lat="35.68" data-lng="139.76" data-zoom="12"
         data-style="geolonia/red-planet"></div>
    <script src="https://cdn.geolonia.com/embed/v5/embed?geolonia-api-key=YOUR-API-KEY"></script>
  </body>
</html>

geolonia/notebook

白を基調とした淡い色のスタイルです。地図そのものを目立たせず、重ねたデータを主役にしたいときに向きます。

<!doctype html>
<html>
  <head><meta charset="UTF-8"><style>.geolonia{width:100%;height:340px}</style></head>
  <body>
    <div class="geolonia" data-lat="35.68" data-lng="139.76" data-zoom="12"
         data-style="geolonia/notebook"></div>
    <script src="https://cdn.geolonia.com/embed/v5/embed?geolonia-api-key=YOUR-API-KEY"></script>
  </body>
</html>

geolonia/homework

Natural Earth を使った世界規模の簡素なスタイルです。国境と国名を中心に、9 layer だけで構成されています。街区や道路は入っていないので、日本国内を拡大する用途には向きません。次の例は縮尺を下げて世界全体を出しています。

<!doctype html>
<html>
  <head><meta charset="UTF-8"><style>.geolonia{width:100%;height:340px}</style></head>
  <body>
    <div class="geolonia" data-lat="35" data-lng="139" data-zoom="2"
         data-style="geolonia/homework"></div>
    <script src="https://cdn.geolonia.com/embed/v5/embed?geolonia-api-key=YOUR-API-KEY"></script>
  </body>
</html>

geoloniamaps/smartcity-base

国土地理院の最適化ベクトルタイルを PMTiles 形式で読むスタイルです。論理名が geoloniamaps/ から始まる唯一のスタイルです。

<!doctype html>
<html>
  <head><meta charset="UTF-8"><style>.geolonia{width:100%;height:340px}</style></head>
  <body>
    <div class="geolonia" data-lat="35.68" data-lng="139.76" data-zoom="12"
         data-style="geoloniamaps/smartcity-base"></div>
    <script src="https://cdn.geolonia.com/embed/v5/embed?geolonia-api-key=YOUR-API-KEY"></script>
  </body>
</html>

非推奨のスタイル

次の2つは geolonia/basic-v2 に置き換えられた古いスタイルです。いまも配信されているので指定すれば動きますが、新しく書くときは geolonia/basic-v2 を使ってください。参照しているベクトルタイルが basic-v2 と異なります。

geolonia/basic

初期の標準スタイルです。農林水産省の筆ポリゴン（農地の区画）を含むため、農村部を拡大すると区画ごとの境界が出ます。

<!doctype html>
<html>
  <head><meta charset="UTF-8"><style>.geolonia{width:100%;height:340px}</style></head>
  <body>
    <div class="geolonia" data-lat="35.68" data-lng="139.76" data-zoom="12"
         data-style="geolonia/basic"></div>
    <script src="https://cdn.geolonia.com/embed/v5/embed?geolonia-api-key=YOUR-API-KEY"></script>
  </body>
</html>

geolonia/basic-v1

一世代前の標準スタイルです。配色は basic-v2 に近いものの、参照しているベクトルタイルが異なります。

<!doctype html>
<html>
  <head><meta charset="UTF-8"><style>.geolonia{width:100%;height:340px}</style></head>
  <body>
    <div class="geolonia" data-lat="35.68" data-lng="139.76" data-zoom="12"
         data-style="geolonia/basic-v1"></div>
    <script src="https://cdn.geolonia.com/embed/v5/embed?geolonia-api-key=YOUR-API-KEY"></script>
  </body>
</html>

言語

各スタイルには日本語版と英語版があり、地名などのラベルの言語が変わります。data-lang や lang オプションで切り替えられます。詳しくは地図の表示言語を切り替えるにはを参照してください。