leaflet-mapにgooglemapを組み込む
私は 自転車クラブfreeflight21(FF21)の元メンバー。在籍中には県内、近県、しまなみ海道、ニューカレドニア、輪行など、自転車のいろいろな楽しみ方を教えてもらいました。
先日何気なく地図を見ていたら、再び自転車に乗りたくなり、宅内に保管していたロードを引っ張り出し、10年ぶりに走行再開。
再開にあたり、一番気にしたのが走行記録。走った後、何処を走ったか振り返る楽しみを味わうためです。
スマホの登場で走行記録が容易に得られるようになり、私はapplewatchとの連携を選択。
スマホホルダーは、少々高かったですが、quadlock製品でまとめました。
スマホにルートヒストリーをインスト。走行log(track)を収集後、export機能でGPX出力。スマホ、PCでGPXが再生できる環境を整えました。
web向けには、従前は『轍』を利用していましたが、今回はwordpress plugin ’leaflet-map’ を実装してみました。使い勝手は申し分ありません。拡張版’Extensions for Leaflet Map’もインスト。
地図は、敢えてGoogle Mapsを組み込みました。アクセス数が多いと課金の対象となります。私のsiteでは間違ってもそんなことにはならないでしょう。よって過去に取得済みのAPIkeyを有効化しました。
高度情報(elevation)の表示はExtensions for Leaflet Mapで設定します。併せてtrackとelevationの色も指定できます。
設定したこと
leaflet-map 設定
Default Latitude 適当に
Default Longitude 適当に
Default Zoom 15
Default Height 300 画面表示の高さ。単位はpx(ピクセル)
Default Width
100%
Map Tile URL google tile mapを探しました。以下urlが見つかり、試したところ地図が表示されたので『良し』としました
https://mt.google.com/vt/lyrs=m&x={x}&y={y}&z={z}
地図の著作権表示
Default Attribution <a href=”http://leafletjs.com” title=”A JS library for interactive maps”>Leaflet</a>; ©Google Maps
Geocoder Google Maps を選択
Google API Key (optional) google API Key を設定
Extensions for Leaflet Map 設定
Elevation Profiles から
theme/color を選ぶ
colorsでAltitude chart profile、Track color でそれぞれ色を指定します。
trackはred色、altitudeは、lime色を指定。
以上を設定した上で、以下ショートコードを記述するとtrack・elevation・markerが表示されます。
[leaflet-map]
[leaflet-kml src=https://doyakin.com/gps/monomi.kml]
[elevation gpx="https://doyakin.com/gps/monomi.kml"]
[leaflet-marker lat=36.000160123465974 lng=139.36527371406558]物見山[/leaflet-marker]
