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);
これで地図が表示されると思います。