<!DOCTYPE html>
<html>
<head>
<title>皇居周辺マップ</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<style>
#map {
height: 600px;
width: 100%;
}
</style>
</head>
<body>
<h1>皇居周辺マップ</h1>
<div id="map"></div>
<script>
// 地図を作成
const map = L.map('map').setView([35.685175, 139.7528], 15); // 皇居の緯度経度
// 地理院地図タイルレイヤー
const gsiLayer = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
attribution: '地理院地図',
maxZoom: 18,
});
// OpenStreetMapタイルレイヤー
const osmLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors',
maxZoom: 19,
});
// デフォルトレイヤーを追加
gsiLayer.addTo(map);
// レイヤー切り替えコントロール
const baseMaps = {
"地理院地図": gsiLayer,
"OpenStreetMap": osmLayer,
};
L.control.layers(baseMaps).addTo(map);
// スケールコントロールを追加
L.control.scale().addTo(map);
</script>
</body>
</html>
