Leafletで作成したURL欄に地図の位置情報を反映するプログラムです。
ブックマークに登録したり、URLをコピー＆ペーストした場合に、表示中の緯度、経度、ズームレベルを保持することができます。
URL欄には、下記の形式で地図の位置情報が表示されます。
地図の表示画面は、地図の中央に十字カーソルを表示と同じです。
http://ドメイン名/パス名/ファイル名?パラメータ@緯度,経度,ズームレベル
leaflet_urlプラグインを利用する場合、HTMLの<head>タグに、LeafletのJavaScriptのソースファイルを参照するための指定を行う必要があります。 プラグインは、上記リンクからダウンロードできます。 プラグインは、Leafletを拡張していますので、必ず、Leafletの後に指定する必要があります。
<link rel="stylesheet" href="js/leaflet.css" />
<link rel="stylesheet" href="js/leaflet_cross.css" />
<script src="js/leaflet.js"></script>
<script src="js/leaflet_url.js"></script>
HTML、CSSのソースは、地図の中央に十字カーソルを表示と同じです。
ただ、十字カーソルの設定は、leaflet_cross.cssで行っています。
URL欄に地図の位置情報を反映するためには、十字カーソルは不要ですが、画面の中央が分かりやすいように、十字カーソルの表示も行っています。
プログラムの初期処理の中で、UrlHandlerクラスを呼び出すだけです。
これだけで、地図を移動すると、URL欄の書き換えが行われます。
URLに緯度、経度、ズームレベル情報が含まれている場合は、その値が返却されますので、setViewメソッドで、その位置を設定してください。
leaflet_urlプラグインには、CSSの十字カーソルのCSSファイルも入っています。
let url = L.urlHandler(map); // リンク書換機能の追加
if (typeof url._zoom != 'undefined') { // 位置情報付URL
map.setView([url._lat, url._lng], url._zoom);
}
leaflet_urlプラグインは、Handlerクラスを拡張して作成しました。 Handlerクラスは、Leafletのイベント制御を行っているクラスですので、moveendイベントを取得して、URLの書き換え処理を行っています。 さらに、初期処理では、URLの解析を行い、_lat,_lng,_zoomプロパティに設定しています。
leaflet_urlプラグインは、無料で利用することができます。 ただ、著作権は放棄していませんので、著作権表示は残しておいて下さい。 このソフトの利用は、無サポート無保証となります。 もし、サポートが必要な場合は、仕事としてお受けすることは可能ですので、ASH有限会社までご相談ください。
leaflet_urlプラグインは、Leafletのプラグインの作成方法を見て作成していますので、Leafletのオフィシャルサイトのプラグインとして登録することも可能だと思っています。ただ、Leafletの作者は、ウクライナのキエフに住んでいましたので、プラグインの申請は見合わせています。