地図データを扱う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…

備忘録。CSSで、画像を角丸で切り抜くサンプル。 img { display: block; margin: 0px 0px 3px 0px; width: 140px; height: 100px; object-fit: cover; border-radius: 16px; -webkit-border-radius: 16px; -moz-border-radius: 16px; border: 1px solid #888…

画像にエフェクトをかけるJavaScriptライブラリ「CamanJS」を使ってみた。 参考にしたページ。 jQueryと合わせてCamanJSライブラリを読み込む。 <script src="//code.jquery.com/jquery-2.1.3.min.js"></script> <script src="js/caman.full.min-4.1.1.js"></script> プリセットの一覧が以下。 ■ CamanJS - Preset サンプル一覧 ※ 以下の2つのWebページは、パソコンのブラウザC…

Excelの表をExcelでHTML変換すると、余分な属性が勝手に一杯ついてきて使い物にならない。 Excelの表を「シンプル」なHTML<TABLE>に変換してくれる便利なサイトがあった。 ≪エクセルからテーブル（html）作成ツール≫ https://html-css-javascript.com/excel-table-h</table>…

「PHP Simple HTML DOM Parser」で、Webスクレイピング（HTMLから情報を抽出）を試してみた。 以下のWebページを参考にした。 以下からPHPライブラリをダウンロードする。 「simple_html_dom.php」を読み込む。 例えば、次のような価格.comの一覧リストから…

HTML<TABLE>に、ソート機能や検索機能を付けるなら、jQueryプラグイン「DataTables」が簡単で便利。 以下の「Eマウント(AF)単焦点レンズ」一覧に、「DataTables」を使って、ソート機能と検索機能を付けた。 使い方は簡単。まず、スタイルシートとJavaScriptを読み込</table>…

地図データを扱う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」の地図表示を試している。 この地図に以下の機能を追加。 地図上の任意の地点をクリックしてマーカー表示 地点をクリックし直したら、先のマーカーは削…

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

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