<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>酒田市観光スポットマップ</title>
<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([38.91803, 139.82656], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// GeoJSONデータを直接挿入
const geoJsonData = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"coordinates": [139.82656, 38.91803],
"type": "Point"
},
"properties": {
"_umap_options": {
"color": "Blue",
"iconClass": "Drop",
"iconUrl": "/uploads/pictogram/hotel.svg",
"outlink": "https://s-camps.com/"
},
"description": "キャンプ以上、ホテル未満 この地を楽しむ宿泊拠点",
"name": "SAKATANTO CONTAINER HOTEL「CAMPS」"
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [139.834836, 38.914724],
"type": "Point"
},
"properties": {
"_umap_options": {
"color": "Blue",
"iconClass": "Drop",
"iconUrl": "/uploads/pictogram/hotel.svg"
},
"description": "コンテナホテル",
"name": "リゾートイン酒田本町"
}
},
{
"type": "Feature",
"geometry": {
"coordinates": [139.845335, 38.920954],
"type": "Point"
},
"properties": {
"_umap_options": {
"color": "Blue",
"iconClass": "Drop",
"iconUrl": "/uploads/pictogram/hotel.svg",
"outlink": "https://tsukinohotel.jp/"
},
"description": "駅近徒歩１分。シモンズ製寝具と充実アメニティ\n酒田のコニュニティホテル\n市内から遠い",
"name": "月のホテル"
}
},
// 他の地点データもここに追加
{
"type": "Feature",
"geometry": {
"coordinates": [139.834754, 38.918071],
"type": "Point"
},
"properties": {
"_umap_options": {
"color": "Yellow",
"iconClass": "Drop",
"iconUrl": "/uploads/pictogram/restaurant.svg"
},
"name": "だるま寿司",
"description":
`酒田駅から約1kmの明るく綺麗な店内で、笑みを絶やさない優しい大将の酒田ならではの地物の美味しいお鮨を食べられる`
}
},
// 他の地点データを続けて追加...
]
};
L.geoJSON(geoJsonData, {
pointToLayer: function(feature, latlng) {
let iconUrl = feature.properties._umap_options.iconUrl;
let icon = L.icon({
iconUrl: 'https://umap.openstreetmap.fr' + iconUrl,
iconSize: [32, 32],
iconAnchor: [16, 32],
popupAnchor: [0, -32]
});
return L.marker(latlng, {icon: icon});
},
onEachFeature: function(feature, layer) {
let popupContent = `<b>${feature.properties.name}</b><br>${feature.properties.description}`;
layer.bindPopup(popupContent);
}
}).addTo(map);
</script>
</body>
</html>
