【事例】WebGISで施設情報を共有

// Leafletで施設を表示
var map = L.map('map').setView([35.6812, 139.7671], 13);

// 地理院タイルを追加
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
    attribution: '国土地理院'
}).addTo(map);

// 施設データを読み込み
fetch('/api/facilities')
    .then(response => response.json())
    .then(data => {
        data.forEach(facility => {
            L.marker([facility.lat, facility.lng])
                .bindPopup(`
                    <h3>${facility.name}</h3>
                    <p>種別: ${facility.type}</p>
                    <a href="/facility/${facility.id}">詳細</a>
                `)
                .addTo(map);
        });
    });

<!-- 施設詳細ページ -->
<div class="facility-detail">
    <h2>○○公民館</h2>
    <div class="map-small" id="detail-map"></div>

    <table class="info-table">
        <tr><th>所在地</th><td>○○市△△町1-2-3</td></tr>
        <tr><th>建築年</th><td>1985年</td></tr>
        <tr><th>構造</th><td>RC造2階建</td></tr>
    </table>

    <h3>点検履歴</h3>
    <table class="history-table">
        <tr><th>日付</th><th>結果</th><th>担当</th></tr>
        <tr><td>2025/01/15</td><td>良好</td><td>山田</td></tr>
    </table>
</div>

// スマホからの点検記録
function submitInspection() {
    const data = {
        facilityId: document.getElementById('facilityId').value,
        date: document.getElementById('date').value,
        result: document.getElementById('result').value,
        notes: document.getElementById('notes').value
    };

    fetch('/api/inspections', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(data)
    })
    .then(response => {
        if (response.ok) {
            alert('登録しました');
        }
    });
}