Tweet

leafletで︎オフラインマップを表示させるまでの手順を紹介します。
まず、下記よりperlスクリプトをダウンロードしてします。
http://search.cpan.org/~rotkraut/Geo-OSM-Tiles/downloadosmtiles.pl

下記より、ダウンロードしたい範囲を選択します。
https://www.openstreetmap.org/export
スポンサード・リンク

下記、コマンドで上記で取得した範囲をセットして地図データをダウンロードします。（緯度経度は適当です）

perl downloadosmtiles.pl --lat=37.475:62.247 --lon=-34.585:34.409 --zoom=1:15

※緯度経度の指定は、下記番号順「–lat=南：北 –lon=西:東 」で指定します。

コマンドを実行すると各ズーム値ごとのフォルダが作成され、その中はそれぞれタイルの列番号と行番号でフォルダとファイルが作成されていきます。
このファイルをtilesというフォルダを作ってそこへ移します。
あとは、下記のような感じでローカルのファイルを指定して描画すればOKです。

// 地図画像（地図タイル）の取得先を設定
//L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
//    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
//}).addTo(map);
L.tileLayer('tiles/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);