結果
GeoJSON & Leaflet
M5StickCPlusでGPSロガー的なものを試作しているのですが、そこで取得したGPSデータをWordpress上で表示するためにLeafletというOpenSourceな地図ライブラリを使ってみました。
自作したGPSデータを簡単に読み込ませるのに何が良いのかも調査し、一先ずM5StickCPlusで吐き出したgpsデータをgeojsonに変換し、leafletに読み込んで使ってみる事に。で、ここで問題が発生。地図に対してレイヤーで歩いた部分のポリゴン表示をしてみたかったのですが一向にポリゴンが描画されない。小一時間悩んだ末、緯度経度を指定する順番が、geojson（経度・緯度）とleaflet（緯度・経度）で違うという事に気がつきました。思い込みは良くないですね。
下のソースコードに加えて初期化などのHTML側の設定については公式ドキュメントを参考ください。
GeoJson
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"popupContent": "Tokyo Disney Sea"
},
"geometry":{
"type": "Polygon",
"coordinates": [
[
[
139.890216,
35.627036
],
[
139.886940,
35.625489
],
[
139.887106,
35.623635
],
[
139.883258,
35.624767
],
[
139.881992,
35.626714
],
[
139.881450,
35.628433
]
]
]
}
}
]
}Script
<div id="map">
<script>
var map = L.map('map').setView([139.885482, 35.626146], 16);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 20,
attribution: '<a href=\"http://www.openstreetmap.org/copyright\">OpenStreetMap</a>'
}).addTo(map);
fetch('./leaflet/data/sample.geojson')
.then((res) => res.json())
.then((json) => {
L.geoJSON(json,
{
onEachFeature: function onEachFeature(
feature,
layer
){
if(feature.properties && feature.properties.popupContent){
layer.bindPopup(feature.properties.popupContent);
}
}
}
).addTo(map);
});
</script>
</div>余談
余談ですが、ディズニシーに家族で行くことになり、せっかくなのでついでにデータ取ってみたんですが、自作M5StickCPlusロガーの電池が即切れてしまった・・・省電力設定として液晶の輝度を下げたり、CPUクロック下げたりとやってはいたのですが、流石に外付け電池使わないと１日中使うとかは無理そうです。
