1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

1分で地図を作成する【Leaflet.js】

Posted at

Leafletとは

LeafletとはオープンソースのJavaScriptライブラリで、
地図を描画することができる

公式リファレンス
https://leafletjs.com/index.html

地図を描画する

  • HTMLのheadタグ内でLeafletのcssとjsを読み込む
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  • HTMLのbodyタグ内に地図を描画するタグを追加
<body>
 <div id='mapcontainer'></div>
</body>
  • JavaScriptで地図を描画する
// 画面読み込み時実行
window.onload = () => {
  // Leafletの地図オブジェクト作成
  // 地図を表示するdiv要素のidを設定
  const map = L.map('mapcontainer');
 
  // 地図の中心緯度経度とズームレベルを指定
  map.setView([35.40, 136], 5);

  // タイルレイヤ(国土地理院地図)の設定
  const mapApi = "https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png";
  const tilelayer =   L.tileLayer(mapApi, {
          attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>"
      })

  // タイルレイヤを地図に追加
  tilelayer.addTo(map);   
}
1
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?