leaflet.jsのセッティングメモ

まずはこのへんは読み込みます。ということで、httpsかどうかに注意。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/leaflet.js"></script>

以前httpsでの設定方法をまとめました k-mawa.hateblo.jp

次に地図を何pxで配置するかタグを記入

<div id="map" style="width: 600px; height: 400px"></div>

そして、最初の読み込み時の場所や縮尺のセットを記載する箇所になります

<script>
var map = L.map('map').setView([35.689185　, 139.691648], 14);　#緯度35.689185　経度139.691648（都庁の場所）を中心に読み込み。拡大レベルは14。
#少ないと縮小されます（2だと世界地図のような感じになったかも。）多いと拡大。

"""
通常ver
"""

L.tileLayer(
  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
  {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a>',
    maxZoom: 18
  }
).addTo(map); #ここで下地となる地図の種類選択ができるコードです。
#このOpenStreetMap準正？のものは読み込みが遅くぬるぬるとは行かない印象です。
#広域図に縮小すると、灰色になったりする・・・ 
#なので国土地理院のレイヤーを活用したほうがより良いです。速いです。

"""
通常verここまで
"""


"""
国土地理院ver
"""
L.tileLayer(
 'http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png',
 {
  attribution: "<a href='http://www.gsi.go.jp/kikakuchousei/kikakuchousei40182.html' target='_blank'>国土地理院</a>" 
 }
).addTo(map);　#こっちのほうが速いです！

"""
国土地理院ver ここまで
"""
 

</script>

とりあえず押さえておくと良いのは、こんな感じ。