地図・マップ
地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、「日本酒生産量：都道府県別マップ」を作成した。（↓） 「knooto.info」の以下の地図とJavaScriptを参考にした。 都道府県別の県境データは、政府CIOポータル「IT…
地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、国土地理院の「ハザードマップ」を重ねて表示してみた。 以下の7つを重ねて表示できるようにした。 洪水浸水想定区域（想定最大規模） 浸水継続時間（想定最大規模…
地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、「OpenWeatherMap」の降水量、雲、気圧図を重ねて表示できるようにした。 APIキーが見えてしまうので、作成したページはとりあえず非公開。 【サンプルソース抜粋…
地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、Leaflet地図に「OpenWeatherMap」の天気予報を表示してみた。 「OpenWeatherMap」のAPIを使用するには、APIキーが必要になるので、取得しておく。 【当日の天気取…
地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、「新潟酒蔵マップ」を作成した。 「LinkData」のデータを使わせてもらった。 「LinkData」のデータをCSVファイルにして、CSVファイルを読み込む方式にした。 →→→ h…
地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、「日本シームレス地質図 V2」を使って、地質図をオーバーレイしてみた。 【サンプルソース】 var Overlay_Map = new Array(); Overlay_Map[ 0 ] = L.tileLayer('ht…
地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、国土地理院のジオコーダーを使って、住所から緯度経度を取得して地図にマッピングを試した。 【プログラムソースサンプル】 function addrSearch(address) { // 国…
地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、地図のオーバーレイを試した。 国土地理院の「地理院タイル」を使った。 国土地理院 の「色別標高図」「陰影起伏図」を使った。 var Overlay_Map = new Array(); O…
地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、世界遺産マップを作成。2013年までの登録遺産を登録。 →→→ 世界遺産マップ（Leaflet版） マーカーをクリックすると、情報パネルを表示。名前をクリックするとGoogl…
地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 ネット上で「Leaflet」に関する情報を検索する中で、Leafletを使ったすごい地図をいくつか見つけた。 【天気情報をオーバーレイ：OpenWeatherMap】 →→→ Interactive weat…
地図データを扱うJavaScriptライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、Leaflet地図に2つの機能を追加する方法。 【オープン時に現在地を表示をする】 ≪プログラムソース≫ 現在地にマーカーを表示するようにした。 <style> .center-icon { width…
地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 「Leaflet」では、ルート検索もできる。※ ただし、ルート検索機能を付けたページは非公開（以下に詳細）。 「Leaflet」のルート検索では登山道も対象になる。これは「Win…
地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 Leafletでも、ルート検索（経路検索）ができる。ただし、ルート検索のエンジンサーバーがデモ用しかなさそうなので、公式に利用可能かどうかが不明。 ということで、ルー…
地図データを扱うJavaScriptライブラリ「Leaflet」を使って、地図表示を試してきた。 前回、KMLファイルのLeaflet地図表示を試した。前回はJavaScriptライブラリ「leaflet-kml」を使った。 今回、JavaScriptライブラリ「leaflet-kml」を使わずに、KMLファイ…
地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、KMLファイルのLeaflet地図表示を試した。JavaScriptライブラリ「leaflet-kml」を使った。 【プログラムソースサンプル】 <script src="js/L.KML.js"></script> <script> var map = L.map('map'); var tileLayer…
地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 前回、ライブラリ「Leaflet.fullscreen」を使って、フルスクリーン表示機能を追加した。 今回、「Leaflet.fullscreen」を使わずに、「document.body.requestFullscreen()…
地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、フルスクリーン表示機能を追加した。 以下のサイトを参考にした。 フルスクリーンに必要なライブラリ「Leaflet.fullscreen」を以下からダウンロードする。 「leafl…
地図データを扱うJavaScriptライブラリ「Leaflet」を使って、GPSログ(GPXファイル)の地図表示を試している。 今回、JavaScriptのXMLHttpRequest()が非推奨になっているらしいので、GPXファイルを読み込む箇所と、国土地理院サーバから標高を求める箇所を、Fe…
地図データを扱うJavaScriptライブラリ「Leaflet」を使って、GPSログ(GPXファイル)の地図表示を試している。 前回、ルート上に30分間隔で時間をラベルで表示するようにした。 しかし、GPXログに一定時間空白の時間帯があると、表示される時間ラベルが途中で3…
地図データを扱うJavaScriptライブラリ「Leaflet」を使って、GPSログ(GPXファイル)の地図表示を試している。 今回、ルート上に30分間隔で時間をラベルで表示するようにした。 https://ok2nd.github.io/leaflet/gpx.html?gpx=gpx/T2019-05-27-14-46.gpx ≪サン…
地図データを扱うJavaScriptライブラリ「Leaflet」を使って、GPSログ(GPXファイル)の地図表示を試している。 今回、パソコン等のクライアントローカルにある任意のGPXファイルを指定して地図表示ができるようにした。GPXファイルはサーバーに送られるわけで…
地図データを扱うJavaScriptライブラリ「Leaflet」を使って、GPSログ(GPXファイル)の地図表示を試している。 今回、GPXファイルをURLで任意指定できるようにした。 サーバーローカルにGPXファイルを置いて指定するか、任意のサーバーにGPXファイルを置いて指…
地図データを扱うJavaScriptライブラリ「Leaflet」を使って、GPSログ(GPXファイル)の地図表示を試している。 今回、現在地表示機能付きマップに、標高グラフを追加で表示/非表示が切り替えできるようにした。 サンプル ＞＞＞ https://ok2nd.github.io/leafl…
地図データを扱うJavaScript ライブラリ「Leaflet」を使って、GPSログ(GPXファイル)の地図表示を試している。 この地図に、現在地表示機能と任意の場所クリックで緯度経度、標高表示機能を追加した。標高グラフは表示されない。 サンプル ＞＞＞ https://ok2…
地図データを扱うJavaScript ライブラリ「Leaflet」を使って、GPSログ(GPXファイル)の地図表示を試している。 この地図に、標高グラフを追加した。 サンプル ＞＞＞ https://ok2nd.github.io/leaflet/gpx-sample3.html グラフ作成には、「Highcharts」を使用…
前回、地図データを扱うJavaScript ライブラリ「Leaflet」を使って、GPSログ(GPXファイル)を地図に表示してみた。 今回、この地図に以下の機能の追加をした。サーバーサイドの処理なしで、すべてJavaScriptで行っている。 開始地点と終了地点のマーカーにポ…
地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、GPSログ(GPXファイル)を地図に表示してみた。参考にしたのは以下のページ。 「Leaflet」のプラグイン「leaflet-gpx」を使う。 まず、「leaflet-gpx」のJavaScript…
過去に、灘五郷、京都伏見、兵庫播磨、広島西条の酒蔵マップ、甲州ワイナリーマップを、「Googleマイマップ」、「Google Maps API」、「Yahoo! マップAPI」で作成した。「Google Maps API」、「Yahoo! マップAPI」版はすでに使用できなくなっている。 今回、…
地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 「Leaflet」を使って、「Google マップ」「OpenStreetMap」「国土地理院」「Esri World Topo Map」などの地図を表示できる。 今回、「Leaflet」を使った地図に「現在地表…
昨日から「Leaflet」を使って「Google マップ」「OpenStreetMap」「国土地理院」「Esri World Topo Map」の地図表示を試している。 この地図に以下の機能を追加。 地図上の任意の地点をクリックしてマーカー表示 地点をクリックし直したら、先のマーカーは削…
