幅員5.5m未満をゆく

自転車とサイクリングの日記です。

幅員5.5m未満をゆく

記事の検索  | 最近のコメント  | この記事のコメント 
記事の一覧  | カテゴリー  | 月別アーカイブ  | 過去記事一覧 |  

Ride with GPS の初期表示を好みの地図で!

Ride with GPS(以降 RWGPS)で作成したコースをブログで紹介する方法は二つ用意されています。

1.ブログ記事内にURLリンクを記載する
2.ブログ記事内にRWGPSコースを埋め込む


URLリンク
https://ridewithgps.com/routes/32132816

埋め込み
<iframe src="https://ridewithgps.com/embeds?type=route&id=32132816&metricUnits=true&sampleGraph=true" style="width: 1px; min-width: 540px; height: 540px; border: none;" scrolling="no"></iframe>

<埋め込みを表示した例>



見栄えは埋め込みがいいんですが、ネットの通信スピードが遅い環境では表示が遅くてイライラしてしまいます。
このため僕はキャプチャ画像を手作業で作成して記載しています。

URLリンクとキャプチャ画像の併記
https://ridewithgps.com/routes/32132816



RWGPS意外にもいくつかルート作成できるツールがありますが、RWGPSを選ぶ人はルートの作成し易さと好きな地図を選べる点ではないでしょうか。
僕はGoogleマップの山間部表示が好きになれないのでRWGPSを使っています。

選べる地図は8つ(下記以外にもありますが表示されません)。

Map (Googleマップ
Terrain (Googleマップ+地形表示)
Satellite (Google衛星写真
Hybrid (Googleマップ衛星写真
RWGPS (オリジナル)
OSM (Open Street Map)
OSM Outdoor (Open Street Map Outdoor)
Esri Topo (esri社が提供する地図)

この中でお気に入りは Esri Topo です。少し色が薄いですが道路と等高線のバランスがいいです。


ただ、リンクの方法や閲覧する環境によっては、好みの地図を初期表示できません。

URLリンクをPCで表示する場合、好みの地図を初期表示できます。
URLリンクをスマホで表示する場合、RWGPS意外の地図を選べません。
埋め込みで表示する場合、初期表示はRWGPSですがプルダウンメニューで地図を選べます。


そこで、好みの地図を初期表示させるべく探ってみました。

まず行ったのは、埋め込み用のソースにあるリンクを抜き出してみます。

<iframe src="https://ridewithgps.com/embeds?type=route&id=32132816&metricUnits=true&sampleGraph=true" style="width: 1px; min-width: 100%; height: 700px; border: none;" scrolling="no"></iframe>

URLだけ(上記太字の部分)をブラウザのURL欄へコピペ。
※表示上改行されていますが一行です。

すると、全画面でコースと標高グラフが表示されます。地図はRWGPSです。


次いで行ったのは、右上にあるプルダウンメニューで地図を切り替えた時に、どういう呪文が送信されているかを探りました。
HTMLソース内には記述がありませんので本当に手探りです。

呪文の送信は上記のURLの後ろへ &〇〇〇=××× という形式で加えることだけは分かっています。

結果、〇〇〇は overlay ということが分かりました。
これを加えたURLを表示させると、右上のプルダウンメニューが Select... になったので反応している証拠です。

https://ridewithgps.com/embeds?type=route&id=32132816&metricUnits=true&sampleGraph=true&overlay=×××


あとは各地図の命令を探っていきます。
Esri Topo の命令は何なのか。

EsriTopo ダメ

esritopo ダメ

esriTopo ビンゴー♪

?overlay=esriTopo でした!

https://ridewithgps.com/embeds?type=route&id=32132816&metricUnits=true&sampleGraph=true&overlay=esriTopo


他の地図も探りました。Googleマップが一番難問 (^^;

Map  &overlay=roadmap
Terrain  &overlay=terrain
Satellite  &overlay=satellite
Hybrid  &overlay=hybrid
RWGPS  &overlay=rwgps
OSM  &overlay=osm
OSM Outdoor  &overlay=osmOutdoor
Esri Topo  &overlay=esriTopo


埋め込みもOKです。