晴歩雨描

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

ホームページ、Web作成

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マップが使える。サンプルソース。

昨日、「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」に切り替えできるようにしてみた。以下のサイトを参考にした。 JavaScriptに以下のコードを…

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

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

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

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

Amazonが直接販売している商品一覧にワンクリックで切り替えるブックマークレット。

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

今年撮った野鳥の写真で2021年卓上型カレンダー作成。(CubePDF使用)

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

はてなブログで横並びにした画像の縦位置を上揃えにする。(カスタマイズCSS)

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

運用中の「MyHome Portal」を別のPCに移植する手順。

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

PHP)多次元連想配列のソート。array_multisort()。

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

Mapbox GL JS)現在地表示、マーカー表示、地点検索、ルート検索。

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

Mapbox GL JS)トークン取得と地点名の日本語表記。

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

「Yahoo! JavaScriptマップAPI」がサービスを10月31日で終了する。

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

「ふりがな文庫」がおもしろい。例文がなかなか良い。

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

はてなブログで文字列に蛍光ペン(マーカー)風のアンダーラインをつける方法。<em>タグで。(カスタマイズCSS)

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

Pinterest「My Photo 自然」を作成。

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

Pinterestに、自分が撮影した写真を登録してみた。

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

影付き枠+ビネット効果付き写真アルバムに、インスタグラム風フィルタ追加。

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

CSSでインスタグラム風の写真加工が簡単にできる「instagram.css」を試してみた。

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