test2/kankoap.html at aee5eb6761d0505f2b8a750c5172018c04d62589

Fork: 0

C1231429tado / test2

Find file

Newer

Older

test2 / kankoap.html

Tadokoro Tomoharu on 10 Jan 1 KB Update kankoap.html

Raw Blame History

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>uMap地点表示</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>uMap地点表示</h1>
    <div id="map"></div>

    <script>
        const map = L.map('map').setView([38.535, 140.265], 8);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

        fetch('https://umap.openstreetmap.fr/ja/map/pj_b_1155144/geojson/')
            .then(response => response.json())
            .then(data => {
                L.geoJSON(data, {
                    onEachFeature: (feature, layer) => {
                        if (feature.properties) {
                            let popupContent = '';
                            for (let key in feature.properties) {
                                if (key !== '_umap_options') {
                                    popupContent += `<strong>${key}:</strong> ${feature.properties[key]}<br>`;
                                }
                            }
                            layer.bindPopup(popupContent);
                        }
                    }
                }).addTo(map);
            })
            .catch(error => console.error('uMapデータの読み込みエラー:', error));
    </script>
</body>
</html>