SOY CMSのブログとOpenStreetMapで地図アプリを作ろう
OpenStreetMap + Leafletで二つのマーカーを設置するまでの記事で、OpenStreetMap + Leafletで複数マーカーを設置する地図を出力できたので、SOY CMSのブログで地図アプリを作ろう１の記事から始まるSOY CMSでGoogle Mapsの出力をOpenStreetMapでリプレイスしてみることにする。
はじめにSOY CMSの記事で緯度経度情報を持てるように、
カスタムフィールドアドバンスドかカスタムサーチフィールドで緯度経度のフィールドを設ける。
今回はカスタムサーチフィールドの方で話を進める事にして、緯度をcsf:id="lat"、経度をcsf:id="lng"で使えるようにした。
続いて、地図ページで緯度経度の情報を持つ記事のみを取り出す為のラベルを設ける。
今回はラベル名を地図にした。
続いて、地図を出力する為のページを作成する。
ページの種別は標準ページ、ブログページやSOY Appページのどれでも良い。
ページ作成後にOpenStreetMap + Leafletで二つのマーカーを設置するまでの記事で作成したHTMLをそのままコピペする。
ページを更新した後、ページの確認を行い、
地図が出力されることを確認する。
地図の出力が確認できたら、下記のように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を使ってみようの内容に従い、ラベルブロックで地図ラベルの記事を出力するように設定する。
これで設定は終了なので、あとは緯度経度情報を持つ記事をいくつか投稿し、
記事の投稿に応じて、マーカーが設置された地図が出力されるか確認してみる。
OpenStreetMap + Leafletで二つのマーカーを設置する
OpenStreetMap + Leafletで設置したマーカーにクリックのイベントを追加したの記事で、地図上に配置したマーカーにクリックイベントを設けた。
今回は地図上にもう一つマーカーを設置してみることにする。
前回の記事のマーカーの設置に関する箇所のコードをピックアップしてみる。
var feature = {
"type" : "Feature",
"properties" : {
"name" : "摂津峡",
"url" : "https://goo.gl/maps/pF6ukpbgf5tLBtTb7" // ←Google Mapsでの摂津峡の共有リンクの短縮版
},
"geometry" : {
"type": "Point",
"coordinates" : [lng, lat] //注意：緯度経度の渡し方が逆になる
}
};
L.geoJSON(feature, {
onEachFeature: function(features, layer) {
if (features.properties && features.properties.url) {
layer.on('click', function(ele) { //PCでマーカーをクリック
location.href = features.properties.url;
});
layer.on('tap', function(ele) { //スマホでマーカーをタップ
location.href= features.properties.url;
});
}
}
}).addTo(map);
このコードでL.getJSONの第一引数に位置情報に関するオブジェクトが一つに対して、第二引数で繰り返しの処理になっている事に違和感を感じると前回の記事で記載した。
このコードに対して、下記のように変更してみる。
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] //注意：緯度経度の渡し方が逆になる
}
}
];
L.geoJSON(features, {
onEachFeature: function(features, layer) {
if (features.properties && features.properties.url) {
layer.on('click', function(ele) { //PCでマーカーをクリック
location.href = features.properties.url;
});
layer.on('tap', function(ele) { //スマホでマーカーをタップ
location.href= features.properties.url;
});
}
}
}).addTo(map);
※地図の中心の緯度経度も変更しているが、今回は省略する。
位置情報のオブジェクトを複数持てるように配列型の変数にして、L.getJSONの第一引数で位置情報の配列を渡す。
上記の変更後にブラウザを介してファイルを実行してみると、
複数のマーカーが設置された状態で地図が表示された。
マーカーの設置個数を増やしたい場合はfeaturesの値を増やすだけで良い。
OpenStreetMap + Leafletで設置したマーカーにクリックのイベントを追加した
前回のOpenStreetMap + Leafletを試してみたの記事に引き続き、OpenStreetMapについてを書く。
前回の記事では、自身のサイトにOpenStreetMapの地図を出力し、任意の箇所にマーカーを設置した。
今回は、マーカーをクリックしたら、任意のページ、例えば、該当する箇所のGoogle Mapsの詳細ページ等に遷移する動作を追加してみる。
最初に前回作成したコードを記載しておく。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>地図</title> <link rel="stylesheet" href="//unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/> <script src="//unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <style> #mapid { width: 400px; height: 300px; } </style> </head> <body> <div id="mapid"></div> </body> <script> //摂津峡の緯度(lat)経度(lng) var lat = 34.877647854266584; var lng = 135.58724326280114; /** 地図の出力ここから **/ // bodyタグ内にある <div id="mapid"></div>の箇所に指定の緯度経度で地図を描写する var map = L.map('mapid', { center: [lat,lng], zoom: 17, }); var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>', }); tileLayer.addTo(map); /** 地図の出力ここまで **/ //マーカーを設置 L.marker([lat, lng]).addTo(map); </script>
マーカーにクリック判定を付ける為、
L.marker([lat, lng]).addTo(map);
を
var feature = {
"type" : "Feature",
"properties" : {
"name" : "摂津峡",
"url" : "https://goo.gl/maps/pF6ukpbgf5tLBtTb7" // ←Google Mapsでの摂津峡の共有リンクの短縮版
},
"geometry" : {
"type": "Point",
"coordinates" : [lng, lat] //注意：緯度経度の渡し方が逆になる
}
};
L.geoJSON(feature).addTo(map);
上記のように書き換える。
Using GeoJSON with Leaflet - Leaflet - a JavaScript library for interactive maps
上記のコードが記載されているファイルをブラウザで実行してみるが、
出力された内容は以前と変わらない。
getJSON()でfeatureを渡す時に第二引数でオプションのオブジェクトを渡すと、マーカーにイベントを追加できるらしい。
そこでクリックやマウスのイベントを追加できるonEachFeatureの値を渡してみることにする。
onEachFeatureの値を渡す為に書き換えたコードは下記の通り。
L.geoJSON(feature).addTo(map);
の箇所を
L.geoJSON(feature, {
onEachFeature: function(features, layer) {
if (features.properties && features.properties.url) {
layer.on('click', function(ele) { //PCでマーカーをクリック
location.href = features.properties.url;
});
layer.on('tap', function(ele) { //スマホでマーカーをタップ
location.href= features.properties.url;
});
}
}
}).addTo(map);
このように書き換えた。
上記のコードが記載されているファイルをブラウザで実行してみると、
出力内容は変わらないが、
https://goo.gl/maps/pF6ukpbgf5tLBtTb7
マーカーをクリックすると、任意のページに遷移するようになっていた。
getJSONに値を渡す際、第一引数に一つのオブジェクトを渡し、第二引数に繰り返しに関する関数の値を渡す事に違和感があるけれども、ここらへんの話は次回にすることにする。
OpenStreetMap + Leafletを試してみた
当サイトのりょうことつよしの食べ歩きマップというページをGoogleのMaps JavaScript APIからOpenStreetMapを利用するように作り替えてみた。
Overview | Maps JavaScript API | Google Developers
OpenStreetMapは自由に利用でき、なおかつ編集機能のある世界地図を作る共同作業プロジェクトで、自身のサイトに出力する際に、GoogleのMaps JavaScript APIのような手続きが不要ですぐに使用できる。
自身のサイトに出力する時は、LeafletかOpenLayersといったJavaScriptのライブラリを使用するらしく、
Leaflet - a JavaScript library for interactive maps
今回はLeafletを使用してみた。
先にOpenStreetMap + Leafletにしてみた感想を書いてみると、使い始めるまでの手続きの時間がほぼなく、Google Mapsの方と同じぐらいのコード数でマーカー付きの地図を出力できた。
今回は記事では簡単な地図の表示をしてみることにする。
最初にOpenStreetMap + Leafletの練習で、
大阪府高槻市にある摂津峡にマーカーを置いてみる。
コードを書く前に上の写真の箇所の緯度経度情報を調べておくと、写真の岩場は緯度(lat)：34.877647854266584、経度(lng)：135.58724326280114であった。
それでは実際のコードに移る。
Leafletのチュートリアルに記載されているコードを参考にして下記のコードを書いてみた。
詳しい説明はコード内にコメントとして入れておく。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>地図</title> <link rel="stylesheet" href="//unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/> <script src="//unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <style> #mapid { width: 400px; height: 300px; } </style> </head> <body> <div id="mapid"></div> </body> <script> //摂津峡の緯度(lat)経度(lng) var lat = 34.877647854266584; var lng = 135.58724326280114; /** 地図の出力ここから **/ // bodyタグ内にある <div id="mapid"></div>の箇所に指定の緯度経度で地図を描写する var map = L.map('mapid', { center: [lat,lng], zoom: 17, }); var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>', }); tileLayer.addTo(map); /** 地図の出力ここまで **/ </script>
上記のコードが記載されているファイルをブラウザ経由で出力してみたら、
意図通り、上の写真の摂津峡の岩場付近を出力した。
次に該当の箇所にマーカーを設置してみる。
先程のコードのtileLayer.addTo(map);の行の下に
L.marker([lat, lng]).addTo(map);
の一行を加え、ブラウザで表示の確認をしてみると、
上のキャプチャのようになった。
この写真からではわからにくいが、写真の手前は水たまりで、写真の奥に川が有り、川は東側に位置するので、上のキャプチャのマーカーの位置は正しい事になる。
マーカー設置までのコードの行数が少ないのが良いね。
雑木林に一本のサザンカ
高槻の芥川緑地にて、雑木林内を歩ける場所でちょうど光が差し込む場所に低木で開花している木を見かけた。
おそらくサザンカだろうなと。
改めて冒頭の写真を見ると、写真右上から光が差込、右側の方が枝が茂っているように見え、茂りに合わせて花の数も多いように見える。
※木の左側の花は幹の近くに多いような…
確かサザンカの花には鳥が集まるイメージがあるので、雑木林の上から見たら、ぽっかりとあいた隙間に花がたくさんあるように見えるのかな？
関連記事
本山寺の枕状溶岩の上を歩いて土を見る
前回のアカガシのドングリを探しに本山寺への記事で高槻の本山寺へ行った旨を記載した。
高槻の本山寺といえば、枕状溶岩と出会いに高槻の本山寺へ２の記事で記載したように
大体の箇所が砂岩頁岩互層だけれども、
局所的に海底火山跡があり、粘性の低い枕状溶岩(玄武岩)で構成されている。
この枕状溶岩の露頭が大変興味深くて、
足元には非常に栽培しやすそうに見える黒ボク土のような黒い土が堆積している。
※砂岩頁岩互層の下に堆積している土については枕状溶岩と出会いに高槻の本山寺へ２の記事をご確認ください。
緑泥石から土の形成を考えるの記事で記載した通り、本山寺前で観測できる土は農業従事者にとって知っておくと優位に立てるものだと確信している。
前振りはここまでにしておいて、アカガシのドングリ拾いの際に、本山寺への旧参道？を通ると枕状溶岩の上を歩ける事を知ったので行ってみた。
はじめに砂岩頁岩互層の上を通る。
木の根元辺りで軽く露頭している箇所があるので見てみると、
細かくなった砂岩があった。
記録として木の根元で土化している箇所を見てみると、
色が薄くて目の細かい砂っぽい土であった。
ここから100メートル程歩いたところで、
目的の枕状溶岩の露頭の上にたどり着く。
落ちている石を見ると、緑泥石が風化しかかっていることがわかる。
更に風化している箇所が上の写真の感じ。
気になるのが木の根元の土だろう。
土の色が全然違う。
砂岩の箇所ではどんなに年季の入った木の下を探しても、こんなに黒い土は見当たらなかった。
砂岩と枕状溶岩(玄武岩)という極端に特徴の異なる母岩をこんなに近距離で観測出来るこの場所は貴重だ。
次にこれらの母岩で植生は異なるか？という事が気になるけれども、まだ森林を見る目は持ち合わせていないので、たくさんの場所を歩いて経験を積んだ時、再びここに来よう。
関連記事
アカガシのドングリを探しに本山寺へ
名古屋大学出版会から出版されている広木詔三著 森林の系統生態学 -ブナ科を中心ににアカガシとツクバネガシが標高によって棲み分けをしているという内容が記載されていた。
詳細は標高500m付近で高い方にアカガシ、低い方にツクバネガシが棲み分けているというものだった。
標高を視野に入れて、新たなドングリのなる木を探しに行くことにした。
先日、あくあぴあ芥川にて、標高約520mのところにある高槻の本山寺にスギ林とカシ林があることを知った。
本山寺といえば、枕状溶岩と出会いに高槻の本山寺への記事で山の山頂付近にある海底火山跡を見る為にいったところだ。
山と渓谷社から出版されている林将之著 くらべてわかる木の葉っぱを持って本山寺に向かった。
そろそろ本山寺に到着する辺りから
本に記載されているアカガシの樹皮らしきものを度々見かけるようになった。
この木の根元の落葉をかき分けると、
ドングリが出てきた。
持参した本に記載されている内容によると、アカガシの殻斗は毛がふさふさしているらしく、触ると毛特有の触り心地なので、この木がアカガシである可能性は高そうだ。
この木から展開されている葉には鋸歯がなく、縁が波打っている。
この形態も持参した本に記載されている内容そのものだ。
このドングリを広い、本山寺に向かってみると、境内にある看板にアカガシ林の保護に関する紹介の張り紙があった。
今回のアカガシ探しで興味深かったこととして、アカガシが現れ始める直前の標高に生えていたブナ科の木がアラカシらしき木で、アカガシが現れてからアラカシの木を見なくなった。
本山寺のある山ではアカガシとアラカシが標高によって棲み分けを行っているのだろうか？
また一つ新たな森を見る目が増した。
ハニワ工場公園で出会った新たなドングリの木
コナラのように見えるけれども、このドングリは一体何だ？に引き続き、ドングリを探す。
ドングリは神社仏閣や古墳等の遺跡を探すと良いと何処かで見た。
好都合な事に私が住んでいる大阪府高槻市は今城塚古墳を筆頭に素晴らしい史跡がたくさんあるため、ドングリ探しとしても良質な地域であると言っても過言ではない。
というわけで、
ハニワ工場公園に行ってきた。
ハニワが並んでいる道を通って、公園の奥に向かうと、
足元に見慣れないドングリが落ちていた。
殻斗は二つがくっついた形で落ちていて、
殻斗はうろこ状だ。
このドングリのあった場所の木を見てみると、
肉厚な葉の木があって、
ドングリが付いていた。
念の為に樹皮も記録しておく。
これらの特徴からマテバシイ属か？と頭に浮かんだ。
ただ、マテバシイで新たに得た知見として、
マテバシイ属のドングリは殻斗側が凹んでいるらしく、
今回見たドングリは殻斗側が凹んでいないので、マテバシイ属でない可能性が高い。
帰宅して図鑑を持ち出してみたら、どうやらウバメガシという木らしい。
ウバメガシの説明を読んでみると海岸沿いに多いらしいけれども、街路樹でもよく植えられるという内容も何処かで見かけたので、海から遠い高槻にあっても違和感はない。
実際はどうだかわからないけれども、新たな形のドングリに出会ったのは確か。
高槻の古木、八阪神社のツブラジイ
若山神社のシイ林の記事に引き続き、シイの木探し。
シイの木は神社の御神木として祀られているといった事があるらしいので、大阪の高槻の神社を探してみたところ、
高槻北部の原地区にある八阪神社の境内に
高槻の古木としてツブラジイがあった。
若山神社でみたシイの木と比べると激しく選定されて、枝が短い状態となっていた。
この木は長い間原地区に根付いて、様々な事を経験したのだろうなと、幹を見て感じた。
高槻の原生協コミュニティルームでレンゲ米栽培の観測の報告会を行いました
高槻の原生協コミュニティルームでレンゲ米栽培を通して得られた知見の報告会を行いました。
この報告会の背景には、知人の紹介で知り合った方がレンゲ米をされていて、その方が田植え前のレンゲ以外全て隣の田の方の栽培を真似ているという観測の好条件が整っているという幸運に恵まれ、しかもその田が毎日通っている道沿いという更に観測の条件が整ったという奇跡的な環境であったという事がありました。
作中、レンゲ米栽培の田の方で不安になるような生育が何度かあり、その都度話していた内容を整理して来年に活かすという事が報告会の目的でした。
観測をはじめて1作目なので確定はできないが、今年得られた知見は、温暖化により年々猛暑日が増え、米の栽培が難しくなると予想される中でレンゲ米栽培は希望の一手になるだろうと確信しています。
ただし、レンゲ米栽培は米の収穫後にただレンゲのタネをまけば良いというわけではなくて、事前に土作りをしなければ逆効果になるという話もしています。
開花させることが前提のレンゲを栽培する時に注意すべきこと再び
関連記事
