OpenStreetMap
OpenStreetMapがVer.2.9から利用可能になりました。
使い方
js-open-street-map という class 属性を適用すれば、簡単に好きなページで利用できます。
さらに、data 属性を指定することで経度、緯度、zoom値などを指定できます。
| 属性 | 入力する値 | 例 |
|---|---|---|
| data-lat | 緯度 | 35.18531791793727 |
| data-lng | 経度 | 136.89938921481374 |
| data-zoom | zoom値 | 14 |
| data-lazy | 表示領域（viewport）に入るまで、組み込みJSの実行を遅延させるかどうか（true | false） | true |
| data-multiple | 複数のピンを表示するかどうか（true | false） | true |
| data-markers | ピンを表示させたい位置情報を | 区切りで指定できます。 | 35.170394,136.887383|35.176559,136.885409|35.172762,136.887447 |
| data-messages | 複数のピンを表示させる場合に、それぞれのピンに対して表示するメッセージを [[:split:]] 区切りで指定できます。 | メッセージ1[[:split:]]メッセージ2[[:split:]]メッセージ3 |
| data-msg | ピンが1つの場合に、表示するメッセージを指定できます。 | メッセージ |
<div class="js-open-street-map" data-lat="35.18531791793727" data-lng="136.89938921481374" data-zoom="14" data-lazy="true" style="width: 100%; height: 300px;"></div>
また、data-multipleという属性にtrueを設定し、data-markers属性に対してピンを立てたい位置情報を|区切りで記述します。そうすることで下のように複数ピンを表示することが可能になります。
<div class="js-open-street-map"
data-lazy="true"
data-multiple="true"
data-lat="35.172775"
data-lng="136.887466"
data-zoom="15"
data-markers='35.170394,136.887383|35.176559,136.885409|35.172762,136.887447'
style="width: 100%; height: 400px;"
></div>
さらに、data-messagesという属性を使えばpin一つ一つにコメントをつけることも可能です。メッセージを区切りたい場合は、[[:split:]]このような記号を使って分割します。
<div class="js-open-street-map"
data-lazy="true"
data-multiple="true"
data-lat="35.172775"
data-lng="136.887466"
data-zoom="15"
data-markers='35.170394,136.887383|35.176559,136.885409|35.172762,136.887447'
data-messages='<table><tr><td><a href="/realestate/entry-17.html">物件情報3</a></td></tr></table>[[:split:]]<table><tr><td><a href="/realestate/entry-16.html">物件情報2</a></td></tr></table>[[:split:]]<table><tr><td><a href="/realestate/entry-15.html">物件情報1</a></td></tr></table>'
style="width: 100%; height: 400px;"
></div>
表示領域（viewport）に入るまで、組み込みJSの実行を遅延させる
OpenStreetMap の地図が画面の下部に存在する場合、組み込みJSの実行を、表示領域（viewport）に入るまで遅延させることで、パフォーマンスを向上させることが可能です。
data-lazy 属性の値に true を指定することで、組み込みJSの実行を遅延させることができます。
<div class="js-open-street-map" data-lat="35.18531791793727" data-lng="136.89938921481374" data-zoom="14" data-lazy="true" style="width: 100%; height: 300px;" ></div>
設定
この機能の設定は、/js/config.js で設定されています。設定を変更する場合は、適用しているテーマ内にJavaScriptファイルを別途作成してください。詳しくは「組み込みJSについて：設定を編集する」を参照してください。
| 設定項目 | 説明 | デフォルト |
|---|---|---|
| openStreetMapMark | OpenStreetMap を表示する要素をセレクター形式で設定します。 | '.js-open-street-map' |
| openStreetMapTileLayer | 表示する OpenStreetMap のタイルレイヤーをURLで設定できます。 | 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' |
