リーフレット(leaflet)は軽量、多機能、拡張性、スマホ対応している地図の機能を持った、JavaScriptライブラリです。リーフレットを使ってwebページに特定の位置の地図を表示する方法、地図の境界線を指定する方法を見ていきます。
デモ
See the Pen Untitled by logsuke (@design-list) on CodePen.
地図を表示する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>leaflet</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css"
integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14="
crossorigin=""/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="myMap"></div>
<script src="https://unpkg.com/leaflet@1.9.2/dist/leaflet.js"
integrity="sha256-o9N1jGDZrf5tS+Ft4gbIK7mYMipq9lqpVJ91xHSyKhg="
crossorigin=""></script>
<script src="script.js"></script>
</body>
</html>8 ~ 10 : ドキュメントの head セクションで Leaflet CSS を読み込みます。
17 ~ 19 : Leaflet CSS を読み込んだ後に Leaflet JavaScript を読み込みます。
15 : マップを表示させるために、特定の ID (myMap) を持った div 要素を配置します。
11 : 画面全体に地図を表示させるために css プロパティを指定します。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#myMap {
height: 100vh;
width: 100%;
}20 : script.js ファイルを読み込みライブラリを使っていきます。
var corner1 = L.latLng(34.053131, 128.463783),
corner2 = L.latLng(30.778151, 132.470307),
bounds = L.latLngBounds(corner1, corner2);
var map = L.map('myMap', {
center: [32.639884, 130.987154],
zoom: 8,
maxBounds: bounds,
})
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
6 : 特定のID (myMap)を指定
7 : 中心を指定 (center[緯度, 経度]) します表示させたい特定の位置の中心の経度、緯度を指定します。
8 : 初期の zoom レベルを指定
境界線を指定したい場合は、9 : maxBounds を指定します。1-3 : 境界線の左上と右下の 緯度、経度の値が必要になります。
12 ~ 14 : マップに追加するタイルレイヤーを追加します。この場合は OpenStreetMap タイル レイヤーを使用しています。
13 : attributionプロパティを変更して、OpenStreetMap から出典していることを明記しています。
以上で特定の位置の地図を表示することができました。
