Leaflet.js でマーカーを表示する

Leaflet.jsを使った地図とマーカー表示までの使い方

Leaflet とは

Leafletは地図を簡単に扱えるJavaScriptライブラリ

Usage

ダウンロード、またはCDNで読み込で使用する

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.2/dist/leaflet.css" integrity="sha256-sA+zWATbFveLLNqWO2gtiw3HL/lh1giY/Inf1BJ0z14=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.2/dist/leaflet.js" integrity="sha256-o9N1jGDZrf5tS+Ft4gbIK7mYMipq9lqpVJ91xHSyKhg=" crossorigin=""></script>

地図の表示

地図を表示する手順 1. <div id="map"></div>に対してmapを定義 2. レイヤーを地図に追加

<link rel="stylesheet" href="../leaflet/leaflet.css" />
<script src="../leaflet/leaflet.js"></script>
</head>
<body>
    <div id="map"></div>
</body>
<script>
    // 地図の設定
    const map = L.map('map').setView([51.505, -0.09], 13);

    // タイルレイヤーの設定
    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);
</script

マーカーを追加する場合もレイヤーと同様にaddTo(map)を使う

// マーカー追加
const marker = L.marker([51.5, -0.09]).addTo(map);

map

ソースコード

GitHub