GeoJSON 仕様

GeoJSON のスタイルを定義するための仕様について紹介します。

GeoJSON について

GeoJSON とは JSON によって空間情報を扱うためのファイルフォーマットです。

GeoJSON - Wikipedia

Simplestyle について

Simplestyle とは Mapbox 社が公開した GeoJSON にスタイル情報を埋め込むための仕様で、GitHub 等で採用されています。

smplestyle-spec

Geolonia の Embed API の GeoJSON 埋め込み機能でも同様に Simplestyle に対応しています。

<div
  class="geolonia"
  data-geojson="https://docs.geolonia.com/geojson/example.geojson"
></div>

Simplestyle のスキーマ

GeoJSON は、以下のようなルート要素を持っています。

{
  "type": "FeatureCollection",
  "features": []
}

features の中には feature オブジェクト(地物)が配列で保存されており、それらも含めると以下の通りになります。

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": []
      },
      "properties": {}
    },
    {
      "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": []
      },
      "properties": {}
    }
  ]
}

feature オブジェクトにはいくつかのタイプがあり、それは geometry プロパティの中にある type プロパティで指定されています。

Geolonia の Embed API が対応しているタイプは以下の3種類です。

  • Point: 特定の座標を示すためのマーカーを設置します。
  • LineString: 複数の座標を結ぶ線を設置します。
  • Polygon: 多角形の図形を設置します。

Geolonia では、これらのタイプに対して、以下で紹介するスタイル情報に対応しています。

タイプごとに指定可能なスタイル情報

上述した Point などの各 feature タイプに対してスタイルを指定するには、それぞれのオブジェクトの properties にスタイル情報を埋め込みます。

プロパティ 内容 Point LineString Polygon
title 地物のタイトル。
description 地物をクリックした際に表示されるコンテンツ
marker-size マーカーのサイズを smallmediumlarge のいずれかで指定    
marker-symbol マーカーのアイコン。    
marker-color マーカーの色。例: #7e7e7e    
stroke 線の色。例: #555555
stroke-opacity 線の透視度。例: 1.0  
stroke-width 線の太さ。例: 2  
fill 塗りつぶし色。例: #7e7e7e    
fill-opacity 塗りつぶし色の透明度。例: 0.6  
  • がついているものが対応しているプロパティです。
  • geojson.io を使用するとブラウザベースの GUI でスタイル情報を設定することができます。
  • marker-symbol については、一部のスタイルで意図したとおりのアイコンが表示されないことがあります。