地図データを扱う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」では、これ以外に…

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

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

Amazonでは、Amazonが直接販売している商品とそれ以外のマーケットプレイス出品の商品がある。マーケットプレイス出品の商品には怪しい商品が混じっている。 Amazonでキーワード検索して表示される一覧リストには、両方の商品が混在している。 この一覧リス…

一昨年より引き続き、2021年卓上型カレンダー作成。今年撮った野鳥の写真で作成。 カレンダーは以前作成したHTMLカレンダー「6か月印刷用カレンダー」を使用。 https://ok2nd.sakura.ne.jp/index/sch/calendar/y6.php?y=2021 このページをブラウザの印刷機能…

はてなブログで、画像を横並びにした場合、縦位置が中央揃えになってしまう。 これを、上揃えにする方法。 【個別にする方法】 「HTML編集」で、「div class="images-row"」に、 style="display:flex; justify-content:center; align-items:start;" のスタイ…

運用中の「MyHome Portal」 を別のPCに移植する手順の備忘録。 【システム環境】 Windows 10 XAMPP 1.8.3 「MyHome Portal インストール手順」に従ってインストール。 １．XAMPP をインストール 「http://localhost/security/index.php」で左側にエラーが出…