晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

地図・マップ

Leaflet地図:世界遺産マップを作成。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、世界遺産マップを作成。2013年までの登録遺産を登録。 →→→ 世界遺産マップ(Leaflet版) マーカーをクリックすると、情報パネルを表示。名前をクリックするとGoogl…

Leafletを使った凄い地図たち。天気図、地質図、ハザードマップ、3D鉄道運行情報。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 ネット上で「Leaflet」に関する情報を検索する中で、Leafletを使ったすごい地図をいくつか見つけた。 【天気情報をオーバーレイ:OpenWeatherMap】 →→→ Interactive weat…

Leaflet地図:オープン時に現在地表示。地点名、住所検索機能。サンプルソース。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、Leaflet地図に2つの機能を追加する方法。 【オープン時に現在地を表示をする】 ≪プログラムソース≫ 現在地にマーカーを表示するようにした。 <style> .center-icon { widt…

「Leaflet」は登山道もルート検索できる。「OpenStreetMap」は登山道も分かりやすく表示される。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 「Leaflet」では、ルート検索もできる。※ ただし、ルート検索機能を付けたページは非公開(以下に詳細)。 「Leaflet」のルート検索では登山道も対象になる。これは「Win…

Leaflet地図:ルート検索もできる。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 Leafletでも、ルート検索(経路検索)ができる。ただし、ルート検索のエンジンサーバーがデモ用しかなさそうなので、公式に利用可能かどうかが不明。 ということで、ルー…

Leaflet地図:JavaScriptライブラリを使わずにKMLを表示。URLでKMLファイル指定。サンプルソース。

地図データを扱うJavaScriptライブラリ「Leaflet」を使って、地図表示を試してきた。 前回、KMLファイルのLeaflet地図表示を試した。前回はJavaScriptライブラリ「leaflet-kml」を使った。 今回、JavaScriptライブラリ「leaflet-kml」を使わずに、KMLファイ…

Leaflet地図:KMLを表示。サンプルソース。Windy.comで表示も。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、KMLファイルのLeaflet地図表示を試した。JavaScriptライブラリ「leaflet-kml」を使った。 【プログラムソースサンプル】 <script> var map = L.map('map'); var tileLayer …

Leaflet地図:フルスクリーン表示機能追加。requestFullscreen()版。サンプルソース。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 前回、ライブラリ「Leaflet.fullscreen」を使って、フルスクリーン表示機能を追加した。 今回、「Leaflet.fullscreen」を使わずに、「document.body.requestFullscreen()…

Leaflet地図:フルスクリーン表示機能追加。Leaflet.fullscreen版。サンプルソース。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、フルスクリーン表示機能を追加した。 以下のサイトを参考にした。 フルスクリーンに必要なライブラリ「Leaflet.fullscreen」を以下からダウンロードする。 「leafl…

LeafletでGPSログ(GPX)地図:XMLHttpRequest()が非推奨なのでFetch APIに変更。

地図データを扱うJavaScriptライブラリ「Leaflet」を使って、GPSログ(GPXファイル)の地図表示を試している。 今回、JavaScriptのXMLHttpRequest()が非推奨になっているらしいので、GPXファイルを読み込む箇所と、国土地理院サーバから標高を求める箇所を、Fe…

LeafletでGPSログ(GPX)地図:30分間隔時間ラベル表示ロジックを修正。

地図データを扱うJavaScriptライブラリ「Leaflet」を使って、GPSログ(GPXファイル)の地図表示を試している。 前回、ルート上に30分間隔で時間をラベルで表示するようにした。 しかし、GPXログに一定時間空白の時間帯があると、表示される時間ラベルが途中で3…

LeafletでGPSログ(GPX)地図:ルート上に30分間隔で時間をラベルで表示。

地図データを扱うJavaScriptライブラリ「Leaflet」を使って、GPSログ(GPXファイル)の地図表示を試している。 今回、ルート上に30分間隔で時間をラベルで表示するようにした。 https://ok2nd.github.io/leaflet/gpx.html?gpx=gpx/T2019-05-27-14-46.gpx ファ…

LeafletでGPSログ(GPX)地図:クライアントローカルGPXファイルをアップロード可能に。

地図データを扱うJavaScriptライブラリ「Leaflet」を使って、GPSログ(GPXファイル)の地図表示を試している。 今回、パソコン等のクライアントローカルにある任意のGPXファイルを指定して地図表示ができるようにした。GPXファイルはサーバーに送られるわけで…

LeafletでGPSログ(GPX)地図:GPXファイルをURLで任意指定可能に。

地図データを扱うJavaScriptライブラリ「Leaflet」を使って、GPSログ(GPXファイル)の地図表示を試している。 今回、GPXファイルをURLで任意指定できるようにした。 サーバーローカルにGPXファイルを置いて指定するか、任意のサーバーにGPXファイルを置いて指…

LeafletでGPSログ(GPX)地図:標高グラフ表示/非表示、切り替え機能。

地図データを扱うJavaScriptライブラリ「Leaflet」を使って、GPSログ(GPXファイル)の地図表示を試している。 今回、現在地表示機能付きマップに、標高グラフを追加で表示/非表示が切り替えできるようにした。 サンプル >>> https://ok2nd.github.io/leafl…

LeafletでGPSログ(GPX)地図:現在地表示機能追加。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、GPSログ(GPXファイル)の地図表示を試している。 この地図に、現在地表示機能と任意の場所クリックで緯度経度、標高表示機能を追加した。標高グラフは表示されない。 サンプル >>> https://ok2…

LeafletでGPSログ(GPX)地図:標高グラフ(Highcharts)追加。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、GPSログ(GPXファイル)の地図表示を試している。 この地図に、標高グラフを追加した。 サンプル >>> https://ok2nd.github.io/leaflet/gpx-sample3.html グラフ作成には、「Highcharts」を使用…

LeafletでGPSログ(GPX)地図:移動距離、所要時間、出発時間、到着時間、最高地点、最低地点表示。Google マップ、OpenStreetMap、国土地理院地図、Esri World Topo Map。

前回、地図データを扱うJavaScript ライブラリ「Leaflet」を使って、GPSログ(GPXファイル)を地図に表示してみた。 今回、この地図に以下の機能の追加をした。サーバーサイドの処理なしで、すべてJavaScriptで行っている。 開始地点と終了地点のマーカーにポ…

Leafletで、GPSログ(GPX)を地図に表示する。Google マップ、OpenStreetMap、国土地理院地図、Esri World Topo Map。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、GPSログ(GPXファイル)を地図に表示してみた。参考にしたのは以下のページ。 「Leaflet」のプラグイン「leaflet-gpx」を使う。 まず、「leaflet-gpx」のJavaScript…

灘五郷、京都伏見、兵庫播磨、広島西条の酒蔵マップ、甲州ワイナリーマップをLeafletで作成。Google マップ、OpenStreetMap、国土地理院、Esri World Topo Map。

過去に、灘五郷、京都伏見、兵庫播磨、広島西条の酒蔵マップ、甲州ワイナリーマップを、「Googleマイマップ」、「Google Maps API」、「Yahoo! マップAPI」で作成した。「Google Maps API」、「Yahoo! マップAPI」版はすでに使用できなくなっている。 今回、…

Leaflet地図:現在地表示ボタン追加。位置情報継続的更新。サンプルソース。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 「Leaflet」を使って、「Google マップ」「OpenStreetMap」「国土地理院」「Esri World Topo Map」などの地図を表示できる。 今回、「Leaflet」を使った地図に「現在地表…

Leaflet地図:クリックした地点の緯度・経度、標高を表示。サンプルソース。

昨日から「Leaflet」を使って「Google マップ」「OpenStreetMap」「国土地理院」「Esri World Topo Map」の地図表示を試している。 この地図に以下の機能を追加。 地図上の任意の地点をクリックしてマーカー表示 地点をクリックし直したら、先のマーカーは削…

Leaflet地図:Google MAPS APIなしでGoogleマップが使える。APIキーも不要。サンプルソース。

昨日、「Leaflet」を使って「OpenStreetMap」「国土地理院」「Esri World Topo Map」の地図表示を試した。 「Leaflet」を使えば、「Google MAPS API」なしで「Google マップ」が使える。APIキーも要らない。 地図オブジェクトを生成して「Google マップ」の…

Leaflet地図:「国土地理院」と「Esri World Topo Map」に切り替え。サンプルソース。

先ほど、「Leaflet」と「OpenStreetMap」を使って、地図にマーカー表示を試した。 この地図を、「OpenStreetMap」から「国土地理院地図」と「Esri World Topo Map」に切り替えできるようにしてみた。以下のサイトを参考にした。 「Leaflet」では、これ以外に…

Leaflet + OpenStreetMapで「兵庫県 日本百選マップ」作成。

以前作成した「日本百選:兵庫県マップ」は、Googleの規約変更により地図が表示されなくなっている。 「Leaflet」と「OpenStreetMap」を使って「兵庫県 日本百選マップ」作成。 【4/29追記】初期表示を「Google マップ」に置き換え。 さくら名所、紅葉、棚田…

Leaflet + OpenStreetMapで「日本三百名山マップ」作成。

先ほど、「Leaflet」と「OpenStreetMap」を使って、地図にマーカー表示を試してみた。 以前作成した「Google Maps API」を使った「日本三百名山マップ」は、Googleの規約変更により地図が表示されなくなっている。 今回、「Leaflet」と「OpenStreetMap」を使…

Leaflet + OpenStreetMapで、地図にマーカー&ラベル表示。サンプルソース。

地図情報を扱うサービス「Google Maps API」が無料では使えなくなり、「Yahoo! JavaScriptマップAPI」もサービス提供が終了し、以前「Mapbox GL JS」を試してみた。 今回、「Leaflet」と「OpenStreetMap」を使って、地図にマーカー表示を試してみた。 「Leaf…

Googleルートマップ:甲山森林公園、北山緑化植物園、奥池。

最近歩いた甲山森林公園、北山緑化植物園、奥池のGPSログをGoogleマップのマイマップで重ねてみた。 Googleマップのマイマップは最大10個までしかGPSログをインポートできないので、最近のGPSログ10個をインポート。

Windy.comは、山の天気予報にも使える。標高別の気温や風速。雲の厚さ。

以前に、Windy.com に関する以下の記事を書いた。 山の天気予報についても書いた。 Windy.com は、山の天気予報にも使える。(以下、パソコンブラウザ画面) マウスでクリックすると、その地点のベーシックな天気予報が表示される。 画面下のメニューで、[M…

神戸六甲山系)2020/8、登山道通行止状況。(2020/11/16時点変更)

六甲山では、梅雨の長雨の影響等で土砂崩れなどで通行止めになっているところがある模様。 一時期、芦屋ロックガーデンの風吹岩周辺も立ち入り禁止になっていた情報もある。 ※ 下の地図は、神戸市六甲山のホ-ムページ2020年7月22日時点のもの。(2020年11月…