地図データを扱う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」で左側にエラーが出…

備忘録として。PHPの多次元連想配列のソート。 「My 野鳥図鑑」の野鳥の並びを五十音順にした。 以下、PHPソースの抜粋（説明のため、実際よりはシンプルにしてある）。野鳥データは適時順番を考えずに多次元連想配列に。 $birds[] = array( '名前' => 'ルリ…

↑の続き。 「Mapbox GL JS」を使って、簡単なWebマップを作ってみた。 「Yahoo! JavaScriptマップAPI」や「Google Maps JavaScript API」に比べて、簡単な事をするだけならシンプルで使いやすい。地図そのものは、慣れの問題かもしれないが、Googleマップに…

「Yahoo! JavaScriptマップAPI」が、2020年10月31日にサービス提供を終了する。 代替サービスとして「Mapbox」が紹介されているので、「Mapbox GL JS」を使ってみた。 以下、参考ドキュメント。 ≪Tutorials | Help | Mapbox≫ https://docs.mapbox.com/help/t…

「Yahoo! JavaScriptマップAPI」が、2020年10月31日にサービス提供を終了するらしい。 この案内によれば、以下のサービスが終了するらしい。かなり痛い。 Yahoo! JavaScriptマップAPI Yahoo!スタティックマップAPI Yahoo! iOSマップSDK Yahoo! Androidマップ…

たまたま見つけたWebサイト「ふりがな文庫」がおもしろい。 トップページには、以下のような欄がある。 いま見られている語句（漢字） いま見られている語句（よみ） 夏の季語（たぶん、シーズンで変わる） 四字熟語 植物の漢字 鳥類の漢字 哺乳類の漢字 昆…

はてなブログで、強調したいハイライト文字列に蛍光マーカーペンっぽい色付きのアンダーラインをつける方法。 【サンプル】 強調したいハイライト文字列 はてなブログで使える文字の装飾には、太字/ボールド、斜体/イタリック、アンダーラインがある。 HTML…

先日、Pinterestにボード「My フォト」を作成した。 今回、Pinterestにボード「My Photo 自然」を作成。 自然、風景の写真を登録。

Pinterestにボード「My フォト」を作成。 このブログにアップロードした写真の一部を登録した。

先ほど、CSSでインスタグラム風の写真加工が簡単にできる「instagram.css」を試した。 以前に作成した「影付き枠＋ビネット効果付き写真ルバム」 に、「instagram.css」のフィルタ効果「aden」を追加したバージョンを作成。 URLの「&fil=フィルタ名」を変え…

CSSでインスタグラム風の写真加工が簡単にできる「instagram.css」を試してみた。レトロっぽい写真などが簡単にできる。 「instagram.css」は、以下からダウンロードできる。 使い方は簡単。「instagram.css」を以下のようにリンクして、 <link rel="stylesheet" href="instagram.min.css"> <img>を<div>で囲んで、class</div></link>…

Googleが、2020年10月にすべての混合コンテンツをブロックというニュースがある。 はてなブログのHTMLソースを確認すると、以下のようなhttp:～が含まれている。 <html ... itemtype="http://schema.org/Article" ...>...<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">...<link rel="author" href="http://www.hatena.ne.jp/../"> これらは…</link></head></html>