leaflet入門１｜マップを表示する

Leaflet（1.3）を使ってOpenStreetMapをブラウザに表示します。

Demoはこちらです。

１．全体のコード

<!DOCTYPE html>
<html>
  <head>
    <title>Quick Start - Leaflet</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="">
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
    <style type="text/css">
     <!--
      #mapid { height: 400px; width: 600px}
    -->
    </style>
  </head>
  <body>
    <div id="mapid"></div>
    <script>
      var mymap = L.map('mapid').setView([51.505, -0.09], 13);

      L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
    	attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '
      }).addTo(mymap);
    </script>
  </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Quick Start - Leaflet</title>

<!--

#mapid { height: 400px; width: 600px}

-->

</style>

</head>

<body>

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {

maxZoom: 18,

attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '

}).addTo(mymap);

</script>

</body>

</html>

２．解説

２−１．プラグインの読み込み

leafletのcssとjsを読み込みます。

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="">
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>

２−２．htmlの設定

マップを埋め込む場所を指定します。

<div id="mapid"></div>

1	<div id="mapid"></div>

２−３．htmlとマップオブジェクトの紐つけ

マップを埋め込む場所のidとマップオブジェクトを紐付けます。

また、setViewで表示する座標（緯度,経度）と、どのくらいズームして地図を表示するかのズームレベルを設定します。

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

1	var mymap = L.map('mapid').setView([51.505, -0.09], 13);

２−４．マップのタイルレイヤーの設定

マップに追加するタイルレイヤーを指定します。

今回は「http://{s}.tile.osm.org/{z}/{x}/{y}.png」で、OpenStreetMapのものを指定しています。

タイルレイヤーを変えると、地図の見栄えも変わります。

<script>
  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '
  }).addTo(mymap);