<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>皇居周辺マップ（Leaflet + OSM）</title>
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha384-XQoYMqMTK8LvDLZ6a4q0tM/j6fH6X1b3zKXy3b8sF8k3oj0LzQ9kZsB6d2u9wq2m"
crossorigin=""/>
<style>
body { margin:0; font-family: system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "メイリオ", sans-serif; }
header { padding:10px; background:#0b5; color:#fff; }
#map { height: calc(100vh - 56px); } /* ヘッダ分だけ空ける */
.leaflet-popup-content { font-size: 14px; }
</style>
</head>
<body>
<header>
<strong>皇居周辺マップ</strong> — Leaflet + OpenStreetMap
</header>
<div id="map"></div>
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha384-oGQq6QmZ4qU7f3lH4P5v9mQ6u+z7j6r2Yx2Y1mQy8dQz7yH3x8F1l2kJrG6t9W3E"
crossorigin=""></script>
<script>
// 皇居中心（緯度, 経度）
const kyokoCenter = [35.6825, 139.7521];
// マップ作成
const map = L.map('map').setView(kyokoCenter, 16); // ズームは16（好みで調整）
// OSM タイルレイヤー（著作表示を必ず入れる）
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors'
}).addTo(map);
// 中心にマーカーとポップアップ
const marker = L.marker(kyokoCenter).addTo(map);
marker.bindPopup('<b>皇居（中心）</b><br>35.6825, 139.7521').openPopup();
// サンプルで半径200mの円（濠などの目安に）
L.circle(kyokoCenter, { radius: 200, weight: 1, fillOpacity: 0.05 }).addTo(map);
// 追加：地図クリックで座標を表示（デバッグ用）
map.on('click', function(e){
L.popup()
.setLatLng(e.latlng)
.setContent("クリック位置: " + e.latlng.lat.toFixed(6) + ", " + e.latlng.lng.toFixed(6))
.openOn(map);
});
</script>
</body>
</html>
