settukyo_osm_leaflet_markers


OpenStreetMap + Leafletで二つのマーカーを設置するまでの記事で、OpenStreetMap + Leafletで複数マーカーを設置する地図を出力できたので、SOY CMSのブログで地図アプリを作ろう１の記事から始まるSOY CMSでGoogle Mapsの出力をOpenStreetMapでリプレイスしてみることにする。


はじめにSOY CMSの記事で緯度経度情報を持てるように、


osm_soycms_map_app


カスタムフィールドアドバンスドかカスタムサーチフィールドで緯度経度のフィールドを設ける。

今回はカスタムサーチフィールドの方で話を進める事にして、緯度をcsf:id="lat"、経度をcsf:id="lng"で使えるようにした。

SOY CMS版カスタムサーチフィールド


続いて、地図ページで緯度経度の情報を持つ記事のみを取り出す為のラベルを設ける。


osm_soycms_map_app_label


今回はラベル名を地図にした。



続いて、地図を出力する為のページを作成する。

ページの種別は標準ページ、ブログページやSOY Appページのどれでも良い。


ページ作成後にOpenStreetMap + Leafletで二つのマーカーを設置するまでの記事で作成したHTMLをそのままコピペする。

ページを更新した後、ページの確認を行い、


settukyo_osm_leaflet_markers


地図が出力されることを確認する。

地図の出力が確認できたら、下記のようにHTML(実際にはJavaScript)のコードを修正する。


var features = [
	{
		"type":"Feature",
		"properties":{
			"name":"摂津峡",
			"url":"https://goo.gl/maps/pF6ukpbgf5tLBtTb7"
		},
		"geometry": {
			"type": "Point",
			"coordinates":[135.58724326280114, 34.877647854266584]	//注意：緯度経度の渡し方が逆になる
		}
	},
	{
		"type":"Feature",
		"properties":{
			"name":"山水館",
			"url":"https://goo.gl/maps/eresbZ5H4gJBajRV8"
		},
		"geometry": {
			"type": "Point",
			"coordinates":[135.5864828823669, 34.878894143428354]	//注意：緯度経度の渡し方が逆になる
		}
	}
];

を

var features = [
	<!-- block:id="map" -->
	{
		"type":"Feature",
		"properties":{
			"name":"<!-- cms:id="title_plain" /-->",
			"url":"<!-- cms:id="entry_url" /-->"
		},
		"geometry": {
			"type": "Point",
			"coordinates":[<!-- csf:id="lng" /-->, <!-- csf:id="lat" /-->]	//注意：緯度経度の渡し方が逆になる
		}
	},
	<!-- /block:id="map" -->
];

テンプレートの保存後に標準ページに新着記事一覧を表示する - SOY CMSを使ってみようの内容に従い、ラベルブロックで地図ラベルの記事を出力するように設定する。


これで設定は終了なので、あとは緯度経度情報を持つ記事をいくつか投稿し、


settukyo_osm_leaflet_markers


記事の投稿に応じて、マーカーが設置された地図が出力されるか確認してみる。