趣味や日曜プログラムなどを書いています https://www.achiachi.net/blog/ 2026-04-17T07:41:14+00:00 https://www.achiachi.net/blog/ https://www.achiachi.net/blog/_media/wiki/dokuwiki.svg text/html 2018-09-12T04:52:06+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.achiachi.net/blog/leaflet/autocenter?rev=1536727926&do=diff 日曜プログラミング Leaflet 全マーカーを画面内に収める 全てのマーカーが画面内に収まるように座標とズームを自動調整して表示します。 注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 text/html 2018-09-11T04:24:31+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.achiachi.net/blog/leaflet/clickevent?rev=1536639871&do=diff 日曜プログラミング Leaflet マーカークリックイベント Leaflet 1系を使用してマーカークリック時にポップアップ表示以外の任意のイベントを発火させる方法。 注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 text/html 2018-09-11T04:21:57+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.achiachi.net/blog/leaflet/cluster?rev=1536639717&do=diff 日曜プログラミング Leaflet マーカークラスタ Leaflet 1系とleaflet.markerclusterプラグイン(v1.4.0)を使用して複数のマーカーをクラスタにまとめます。 注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 text/html 2018-09-11T13:36:29+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.achiachi.net/blog/leaflet/cross?rev=1536672989&do=diff 日曜プログラミング Leaflet センタークロス表示 地図の中心に十字マークを表示して中心がわかるようにします。 注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 text/html 2018-12-11T21:17:28+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.achiachi.net/blog/leaflet/demo?rev=1544563048&do=diff Leafletのデモ Leafletライブラリーを使ってOpenStreetMapを表示します。 ---------- デモ Ver1.3.1時点のクイックスタートガイドを参考にDokuWiki用にアレンジしています。 <http://leafletjs.com/examples/quick-start/> ---------- 使い方の概要 text/html 2018-09-11T04:32:26+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.achiachi.net/blog/leaflet/divicon?rev=1536640346&do=diff 日曜プログラミング Leaflet 地図に文字列を表示する Leaflet 1系を使用してマーカーアイコンのかわりに地図上にテキストを表示します。 注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 text/html 2018-10-06T04:00:36+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.achiachi.net/blog/leaflet/geolocation?rev=1538798436&do=diff Leaflet 現在位置を中心にする GPSなどから取得した位置情報を使い、地図の中心位置に表示します。 注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 text/html 2018-09-30T00:53:49+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.achiachi.net/blog/leaflet/get_latlngzoom?rev=1538268829&do=diff 日曜プログラミング Leaflet 中心座標とズーム値を取得 Leaflet 1系を使用して地図の中心座標（緯度・経度）とズーム倍率を表示します。 注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 text/html 2018-09-11T01:44:39+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.achiachi.net/blog/leaflet/icon?rev=1536630279&do=diff 日曜プログラミング Leaflet マーカーに自作アイコン使用 Leaflet v1系を使用しマーカーに自作アイコンを表示します 注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 text/html 2018-12-09T23:14:12+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.achiachi.net/blog/leaflet/index.html?rev=1544397252&do=diff 🌏Leaflet(マップAPI) タイルベースのWebマップが作れるJavaScriptライブラリ(※地図データは別途必要)。Google Map風のWebページが作れます。 ---------- 導入 LeafletのデモLeaflet インストール 地図表示 Leaflet - OpenStreetMap表示 -Leaflet 地図タイル切り替え -🌏Leaflet 地図タイル切り替え(改) -Leaflet 中心座標とズーム値を取得 -Leaflet 現在位置を中心にする - マーカーとポップアップ text/html 2018-09-11T00:27:26+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.achiachi.net/blog/leaflet/install?rev=1536625646&do=diff 日曜プログラミング Leaflet インストール Leaflef.jsを自分のサーバーにインストール方法です。 ---------- はじめに インストールといってもleaflet.jsを公式サイトからダウンロード、展開、自分のサーバーにアップロードするだけです。 text/html 2018-09-13T05:39:30+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.achiachi.net/blog/leaflet/layer?rev=1536817170&do=diff 日曜プログラミング Leaflet ズームでマーカー表示・非表示を切り替え ズームレベルによって地図上のマーカーを表示と非表示を切り替えます。 注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 text/html 2018-12-09T23:21:39+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.achiachi.net/blog/leaflet/layers?rev=1544397699&do=diff 日曜プログラミング Leaflet 地図タイル切り替え 複数の地図タイルを切り替えるコントロール追加します。 （ズームごとタイルを切り替えたい場合は 🌏Leaflet 地図タイル切り替え(改) をご覧ください） 注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 text/html 2018-12-29T11:48:49+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.achiachi.net/blog/leaflet/layers2?rev=1546084129&do=diff 🌏Leaflet 地図タイル切り替え(改) Leafletの標準的なタイルレイヤーコントロール(L.control.layers)(関連記事)ではズームによってタイルサーバーや著作権表を切り替える事ができないようなので、ズームによってタイルサーバーや著作権表を切り替える機能を(無理矢理)追加してみました。 text/html 2018-09-12T01:08:58+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.achiachi.net/blog/leaflet/map?rev=1536714538&do=diff 日曜プログラミング Leaflet - OpenStreetMap表示 Leaflet v1系を使用してOpenStreetMapを表示します。 注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 text/html 2018-09-11T04:30:06+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.achiachi.net/blog/leaflet/marker?rev=1536640206&do=diff 日曜プログラミング Leaflet マーカーとポップアップ表示 Leaflet v1系を使用してマーカーとポップアップ(情報ウインドウ・バルーン)を表示します。 注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 text/html 2018-09-11T02:29:54+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.achiachi.net/blog/leaflet/popup?rev=1536632994&do=diff 日曜プログラミング Leaflet 外部からポップアップを開く Leaflet 1系を使用してマーカのポップアップを外部からオープンします。 注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」 text/html 2018-09-11T15:59:20+00:00 Anonymous (anonymous@undisclosed.example.com) https://www.achiachi.net/blog/leaflet/tooltip?rev=1536681560&do=diff 日曜プログラミング Leaflet マーカーにツールチップ表示 Leaflet v1系を使用してマーカーにツールチップ(マウスオーバーで表示するラベル)を追加します。 注意：「Leaflet勉強のための試作プログラムなので間違っている可能性があります」「DokuWikiは個別にヘッダを編集できないので通常とは少し違う構造になっています」