Leopiii SE Diary

未熟な私の備忘録

leaflet.jsでWeb地図を読み込む方法

leaflet.jsでgeojsonファイルを地図に読み込む方法です。
leaflet.jsは容易にタイルベースのWeb地図を表示できるJavaScriptライブラリです。
簡単にWebページに地図を組み込むことができます。

今回は国土地理院地理院地図を表示させます。

まずheadタグ内でleaflet.jsとleaflet.cssを読み込みます

<script type="text/javascript" src="./leaflet/leaflet.js" charset="utf-8"></script>
<link rel="stylesheet" href="./js/leaflet/leaflet.css" />

表示させる位置を定義しておきます。

     <div id="map"></div>

そして次の処理で地理院地図のタイル情報を読み込み、地図を表示させます。
scriptタグ内、またはjsファイルに関数を用意して、以下の処理を呼び出します。

//地図の初期表示させる位置を定義します。
map = L.map("map").setView(new L.LatLng(35.681298,139.766247), 13),
//地理院地図のタイル情報を読み込みます。
 baseLayer = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
  {
   minZoom:2,
   maxZoom:20,
   attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>"
  });
//地図を表示させます。
 baseLayer.addTo(map);

これで地図が表示されると思います。