晴歩雨描

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

Leaflet地図:世界遺産マップを作成。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、世界遺産マップを作成。2013年までの登録遺産を登録。 →→→ 世界遺産マップ(Leaflet版) マーカーをクリックすると、情報パネルを表示。名前をクリックするとGoogl…

Leafletを使った凄い地図たち。天気図、地質図、ハザードマップ、3D鉄道運行情報。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 ネット上で「Leaflet」に関する情報を検索する中で、Leafletを使ったすごい地図をいくつか見つけた。 【天気情報をオーバーレイ:OpenWeatherMap】 →→→ Interactive weat…

Leaflet地図:オープン時に現在地表示。地点名、住所検索機能。サンプルソース。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、Leaflet地図に2つの機能を追加する方法。 【オープン時に現在地を表示をする】 ≪プログラムソース≫ 現在地にマーカーを表示するようにした。 <style> .center-icon { widt…

鵯越駅⇔烏原貯水池。カワセミ、ヤマガラ、シジュウカラ、コゲラ、メジロ、イソヒヨドリ。

6月10日。神戸電鉄鵯越駅→烏原貯水池一周→鵯越駅。6km。3時間20分。 野鳥、カワセミ、ヤマガラ、シジュウカラ、コゲラ、メジロ、イソヒヨドリ。カワセミは久しぶり。 カワセミ カワセミ カワセミ ヤマガラ シジュウカラ コゲラ メジロ イソヒヨドリ(メス)

「Leaflet」は登山道もルート検索できる。「OpenStreetMap」は登山道も分かりやすく表示される。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 「Leaflet」では、ルート検索もできる。※ ただし、ルート検索機能を付けたページは非公開(以下に詳細)。 「Leaflet」のルート検索では登山道も対象になる。これは「Win…

兵庫県三田市)有馬富士公園。ヤマボウシ。ホオジロ、ソウシチョウ、キビタキ、キセキレイ、コゲラ、シジュウカラ、エナガ、メジロ、イソヒヨドリ、カイツブリ、シラサギ、カワウ。

6月8日。有馬富士公園。三田市の最高気温30度。日差しの下ではかなり暑い。JR新三田駅から武庫川沿い経由で往復。8km、4時間。 あちこちでヤマボウシが咲いている。 野鳥は武庫川沿いを含めてホオジロが多かった。他には、ソウシチョウ、キビタキ、キセキレ…

兵庫県)甲山森林公園。アジサイ。ソヒヨドリ、センダイムシクイ、エナガ、シジュウカラ、カルガモ。

6月7日。阪急甲東園駅→甲山森林公園→広河原→甲山森林公園→阪急甲陽園駅。7.7km、3時間40分。 紫陽花が結構咲いている。 野鳥、イソヒヨドリ、センダイムシクイ、エナガ、シジュウカラ、カルガモ。 タイサンボク イソヒヨドリ イソヒヨドリ センダイムシクイ …

Leaflet地図:ルート検索もできる。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 Leafletでも、ルート検索(経路検索)ができる。ただし、ルート検索のエンジンサーバーがデモ用しかなさそうなので、公式に利用可能かどうかが不明。 ということで、ルー…

Leaflet地図:JavaScriptライブラリを使わずにKMLを表示。URLでKMLファイル指定。サンプルソース。

地図データを扱うJavaScriptライブラリ「Leaflet」を使って、地図表示を試してきた。 前回、KMLファイルのLeaflet地図表示を試した。前回はJavaScriptライブラリ「leaflet-kml」を使った。 今回、JavaScriptライブラリ「leaflet-kml」を使わずに、KMLファイ…

Leaflet地図:KMLを表示。サンプルソース。Windy.comで表示も。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、KMLファイルのLeaflet地図表示を試した。JavaScriptライブラリ「leaflet-kml」を使った。 【プログラムソースサンプル】 <script> var map = L.map('map'); var tileLayer …

Leaflet地図:フルスクリーン表示機能追加。requestFullscreen()版。サンプルソース。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 前回、ライブラリ「Leaflet.fullscreen」を使って、フルスクリーン表示機能を追加した。 今回、「Leaflet.fullscreen」を使わずに、「document.body.requestFullscreen()…

神戸)しあわせの村。コゲラ、コサメビタキ、キセキレイ、ハクセキレイ、メジロ、ムクドリ。

5月31日。神戸しあわせの村。5.3km、3時間。 野鳥、コゲラ、コサメビタキ、キセキレイ、ハクセキレイ、メジロ、ムクドリ。 ウグイスの声などは聞こえたが、全体的に鳥の気配は少なかった。 コゲラ コサメビタキ キセキレイ ハクセキレイの幼鳥? ハクセキレ…

神戸)渦森台→石屋川。アジサイ咲き始め。ホオジロ、カワラヒワ、メジロ、コゲラ、シジュウカラ、ツバメ、セグロセキレイ。

5月30日。渦森台バス停→渦森展望公園→渦森三角公園→頌栄短期大学横→阪神石屋川駅。6.8km、3時間50分。 紫陽花が咲き始めている。 野鳥、ホオジロ、カワラヒワ、メジロ、コゲラ、シジュウカラ、ツバメ、セグロセキレイ。 ホオジロ カワラヒワ メジロ コゲラ …

Leaflet地図:フルスクリーン表示機能追加。Leaflet.fullscreen版。サンプルソース。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。 今回、フルスクリーン表示機能を追加した。 以下のサイトを参考にした。 フルスクリーンに必要なライブラリ「Leaflet.fullscreen」を以下からダウンロードする。 「leafl…

CSS)画像を角丸で切り抜く。

備忘録。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」を使ってみた。ローカルファイルアップロード版も作成。

画像にエフェクトをかける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…

神戸)阪神御影駅周辺。SONY α5100+SIGMA 56mm F1.4。

5月26日。阪神御影駅周辺。「SONY α5100」+「SIGMA 56mm F1.4(35mm判換算84mm)」で撮影。

神戸森林植物園。イスカ、キビタキ、コゲラ、ヤマガラ、ホオジロ、メジロ、カワラヒワ、イソヒヨドリ。

5月25日。神戸森林植物園。 野鳥、イスカ、キビタキ(オス、メス)、コゲラ、ヤマガラ、ホオジロ、メジロ、カワラヒワ、イソヒヨドリ。 イスカは初めて。 コアジサイ ハクウンボク カルミア(アメリカシャクナゲ) ヤマボウシ イスカ イスカ キビタキ(オス…

神戸森林植物園、学習の森。カルミア咲き始め。キビタキ、コサメビタキ、センダイムシクイ、コゲラ、ホオジロ、メジロ、イソヒヨドリ。

5月23日。神戸森林植物園、学習の森。8.6km。4時間20分。 カルミア(アメリカシャクナゲ)がきれいに咲き始めている。 ハルゼミが盛んに鳴いている。 野鳥、キビタキ、コサメビタキ、センダイムシクイ、コゲラ、ホオジロ、メジロ、イソヒヨドリ。 カッコウや…

兵庫県明石市)金ケ崎公園。ハッカチョウ、コゲラ、エナガ、カワラヒワ、シジュウカラ、ヤマガラ、メジロ、ムクドリ、イソヒヨドリ、アオサギ、カワウ。

5月22日。金ケ崎公園。JR魚住駅から往復。7.5km、3時間。 野鳥、ハッカチョウ、コゲラ、エナガ、カワラヒワ、シジュウカラ、ヤマガラ、メジロ、ムクドリ、イソヒヨドリ、アオサギ、カワウ。 コゲラ、ムクドリは親子で餌をやる姿が見られた。 ハッカチョウ コ…

Excelの表をシンプルなHTML<TABLE>に変換してくれる便利なWebツール。

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

「PHP Simple HTML DOM Parser」で、Webスクレイピング(HTMLから情報を抽出)。

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

HTML<TABLE>に、ソート機能や検索機能を付けるなら、jQueryプラグイン「DataTables」が簡単。

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

(ソニー)Eマウント(AF)単焦点レンズ一覧作成。

Eマウント単焦点レンズの一覧表を作成してみた。2021年5月17日時点のAF対応レンズのみ。 項目は、メーカー名、レンズ名、焦点距離、F値、有効口径、フルサイズ対応、最短撮影距離、最大撮影倍率、重量。それぞれの項目で並び替えできる。 ok2nd.sakura.ne.jp

LeafletでGPSログ(GPX)地図:XMLHttpRequest()が非推奨なのでFetch APIに変更。

地図データを扱うJavaScriptライブラリ「Leaflet」を使って、GPSログ(GPXファイル)の地図表示を試している。 今回、JavaScriptのXMLHttpRequest()が非推奨になっているらしいので、GPXファイルを読み込む箇所と、国土地理院サーバから標高を求める箇所を、Fe…

LeafletでGPSログ(GPX)地図:30分間隔時間ラベル表示ロジックを修正。

地図データを扱うJavaScriptライブラリ「Leaflet」を使って、GPSログ(GPXファイル)の地図表示を試している。 前回、ルート上に30分間隔で時間をラベルで表示するようにした。 しかし、GPXログに一定時間空白の時間帯があると、表示される時間ラベルが途中で3…

神戸)六甲アイランドバラ園「RICローズ・ガーデン」2021年、見頃。

5月14日。六甲アイランドバラ園「RICローズ・ガーデン」、ピークは過ぎるも見頃。

兵庫県)尼崎農業公園。バラが見ごろ。野鳥、キビタキ、コサメビタキ。

5月13日。尼崎農業公園。 阪急園田駅→猪名川河川敷→猪名川風致公園→猪名川公園→尼崎農業公園→JR猪名寺駅。8km。3時間30分 尼崎農業公園はバラが見ごろ。少しピークは過ぎているかも。 猪名川河川敷では、飛んでいるカワセミを見つけたが写真には撮れなかった…

LeafletでGPSログ(GPX)地図:ルート上に30分間隔で時間をラベルで表示。

地図データを扱うJavaScriptライブラリ「Leaflet」を使って、GPSログ(GPXファイル)の地図表示を試している。 今回、ルート上に30分間隔で時間をラベルで表示するようにした。 https://ok2nd.github.io/leaflet/gpx.html?gpx=gpx/T2019-05-27-14-46.gpx ファ…

兵庫県)加古大池、水辺の里公園。コムクドリ、コサメビタキ、ケリ、ヒバリ、オオヨシキリ、ホオジロ、ツバメ、コゲラ、センダイムシクイ、シジュウカラ、カワラヒワ、ダイサギ、コサギ、カルガモ。

5月10日。兵庫県加古郡稲美町の水辺の里公園、加古大池。JR土山駅からバスで十七丁バス停。十七丁バス停→水辺の里公園→加古大池→上新田北口バス停。6.4km、3時間。 野鳥は、コムクドリを初めて撮影できた。 今まで一回程度しか撮影していないコサメビタキ、…