Leaflet - izudon/izudon.github.io GitHub Wiki

最もシンプルなサンプル by ChatGPT

<!DOCTYPE html>
<html>
<head>
    <title>Simple Leaflet Map</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <style>
        html, body, #map {
            height: 100%;
            margin: 0;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        var map = L.map('map').setView([34.7330, 135.5003], 13); // Coordinates of Shin-Osaka Station

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

Leaflet - a JavaScript library for interactive maps

Leaflet 画面サンプル

Leaflet とは・・・

  • Google Maps のようなラスタタイル形式の地図画像データを用いたウェブ地図を実現する JavaScript ライブラリ。
  • マーカ、ポイント（点）、ポリライン（線）、サークル、ポリゴン（面）などをオーバレイさせることが可能。
    これらの元ネタを GeoJSON で用意しておくことも可能。
    • ただし、外部ファイルの読込機能は Leaflet 内部にはないので、低レベル入出力を叩くか、jQuery や D3 などの 別途 JavaScript ライブラリを併用することになる。お勧めは後者。
  • イメージ（PNG や SVG）、ビデオ（気象衛星からの雲の画像とか）などもオーバレイできる。
  • オーバレイした上記のものには、ポップアップ（吹き出し）やツールチップなどを仕込むことができる。
    マップ自体に吹き出しを仕込むこともできる。
⚠️ **GitHub.com Fallback** ⚠️