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

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

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

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

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

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

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

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

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

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

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

<style>
.leaflet-div-icon {background: none;white-space: nowrap;border:none;}
</style>
は必須です.これがないと,「テキスト」が縦書きになってしまいます.

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

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

そのためアプリの地図ロイドでは,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)の画面
0106-2.jpg

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

Webの画面
0106-1.jpg

kamolandをフォローしましょう


© 2018 KMIソフトウェア