スタイル付きGeoJSONをLeafletで表示する

スタイル付きGeoJSON規約に合わせて作成したGeoJSONファイルを，Leafletで表示したときの話．

スタイル付きGeoJSONをLeafletで表示する

拙作のAndroidアプリ「地図ロイド」には，

簡易作図機能

があり，アプリ上で作図してその結果をGeoJSONファイルとして出力できます．

これを拙作のクラウドサービスと連動させて，作図したGeoJSONファイルを，Web画面でも表示できるようにしようとしたときの話です．

Webでの地図表示には，Leafletを使っています．

↑

スタイル付きGeoJSON規約の扱い

この機能が生成するGeoJSONファイルは，

国土地理院のスタイル付きGeoJSON規約

に合わせて描画スタイルを保持しています．このスタイルをどうやってLeafletで解釈するかですが，こちらのサンプルがまさにそのものです．

スタイル付きGeoJSONの読み込みサンプル

このサンプルのソースを拝見して，実装すればできます．

注意点としては，ヘッダ部にあるstyle宣言のうち，

<style>
.leaflet-div-icon {background: none;white-space: nowrap;border:none;}
</style>

は必須です．これがないと，「テキスト」が縦書きになってしまいます．

↑

テキスト(DivIcon)の位置調整

その「テキスト」ですが，テキストが描画される位置とgeojson属性の緯度経度の関係が明確ではなく， Leafletでの挙動によりけりというところがあります．

そのためアプリの地図ロイドでは，geojsonで与えられた緯度経度をテキスト中心点とする仕様にして，描画しています．

地図ロイド GeoJSONへのスタイル設定

今回は，Webでも地図ロイドと同じ画面を再現したかったため， Leafletでも同じように緯度経度をテキスト中心点とするように， CSSを設定しました．

先ほどの leaflet-div-icon クラスのスタイルも含みますが，こんな感じです．

<style>
.leaflet-div-icon {
    background:none;
    white-space:nowrap;
    border:none;
    width:600px !important;
    margin-left:-300px !important;
    margin-top:-12px !important;
}
.leaflet-div-icon div, .leaflet-div-icon span {
    display:block;
    text-align:center;
    line-height:1rem;
    margin-top:-.5rem;
}
</style>

親div(leaflet-div-iconクラス)の左上が，緯度経度の位置になっている様子ですので，ここがテキスト部(子のdivまたはspan)の中心になるように調整しています．

600pxおよびその半分の300pxという数値が出てしまっていますが，これはテキスト部が収まる幅であれば何でもいいです． CSS力が足りないので数値で記述せざるを得なくなっており，ここはいまいちです．．．

地図ロイド(Android)の画面

大釜温泉と重なっている「初日2」というのがテキストです．両者でほぼ同じ見え方になりました．

Webの画面