「Widget:Custom map」を編集中

<includeonly>
<!-- Required CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>  
<link rel="stylesheet" href="https://dq.h1g.jp/img/dq10_offline/map/css/leaflet-easy-button.css" />
<link rel="stylesheet" href="https://dq.h1g.jp/img/dq10_offline/map/css/leaflet-tag-filter-button.css" />
<link rel="stylesheet" href="https://dq.h1g.jp/img/marker-icon-img/editable-popup.css" />
<link rel="stylesheet" href="https://dq.h1g.jp/img/lightgallery.min.css"/>


<!-- Required JS Libraries -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://dq.h1g.jp/leaflet/leaflet.js"></script>
<script src="https://dq.h1g.jp/img/dq10_offline/map/js/leaflet-easy-button.js"></script>
<script src="https://dq.h1g.jp/img/dq10_offline/map/js/leaflet-tag-filter-button.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
<script src="https://dq.h1g.jp/leaflet/custom-leaflet-draw-locale.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/lightgallery.min.js"></script>

<!-- Global Configuration -->
<script>
// Initialize WidgetMap namespace with explicit function placeholder
window.WidgetMap = {
    map: null,
    drawnItems: null,
    drawControl: null,
    editMode: false,
    api: {},
    popups: {},
    icons: {},
    // 明示的な関数プレースホルダー
    initializeMap: function() {
        console.error('Map initialization not yet loaded');
        return null;
    }
};

// Initialize API base URL
(function() {
    const currentUrl = new URL(window.location.href);
    const baseUrl = currentUrl.origin + currentUrl.pathname.split('/').slice(0, -1).join('/');
    window.API_BASE_URL = baseUrl;
    console.log('API_BASE_URL initialized:', baseUrl);
})();

// Map configuration
window.mapConfig = {
    imageUrl: '<!--{$img}-->',
    imageWidth: <!--{$imgwidth}-->,
    imageHeight: <!--{$imgheight}-->,
    minZoom: <!--{$minzoom}-->,
    maxZoom: <!--{$maxzoom}-->,
    geoJsonPage: '<!--{$geojson}-->',
    iconUrls: {
        icon1: '<!--{$icon1|default:"https://dq.h1g.jp/img/marker-icon-img/marker-icon-blue.png"}-->',
        icon2: '<!--{$icon2|default:"https://dq.h1g.jp/img/marker-icon-img/marker-icon-red.png"}-->',
        icon3: '<!--{$icon3|default:"https://dq.h1g.jp/img/marker-icon-img/marker-icon-violet.png"}-->',
        icon4: '<!--{$icon4|default:"https://dq.h1g.jp/img/marker-icon-img/marker-icon-green.png"}-->',
        icon5: '<!--{$icon5|default:"https://dq.h1g.jp/img/marker-icon-img/marker-icon-gold.png"}-->',
        icon6: '<!--{$icon6|default:"https://dq.h1g.jp/img/marker-icon-img/marker-icon-black.png"}-->'
    },
    filters: {
        filter1: '<!--{$filter1|default:"分類1"}-->',
        filter2: '<!--{$filter2|default:"分類2"}-->',
        filter3: '<!--{$filter3|default:"分類3"}-->',
        filter4: '<!--{$filter4|default:"分類4"}-->',
        filter5: '<!--{$filter5|default:"分類5"}-->',
        filter6: '<!--{$filter6|default:"分類6"}-->'
    }
};
</script>

<!-- Load scripts sequentially -->
<script>
// Clear any existing WidgetMap object
if (window.WidgetMap) {
    console.log('[Init] Clearing existing WidgetMap object');
    delete window.WidgetMap;
}

// Initialize fresh WidgetMap namespace
window.WidgetMap = {
    map: null,
    drawnItems: null,
    drawControl: null,
    editMode: false,
    api: {},
    popups: {},
    icons: {}
};

function loadScriptsSequentially() {
    function loadScript(src) {
        return new Promise((resolve, reject) => {
            console.log('[Script Loader] Loading:', src);
            const script = document.createElement('script');
            script.src = src;
            script.onload = () => {
                console.log('[Script Loader] Successfully loaded:', src);
                if (src.includes('WidgetMap-core.js')) {
                    // コア読み込み後の検証を強化
                    const verification = {
                        hasWidgetMap: !!window.WidgetMap,
                        initializeMapType: typeof window.WidgetMap.initializeMap,
                        isFunction: typeof window.WidgetMap.initializeMap === 'function'
                    };
                    console.log('[Script Loader] Core verification:', verification);
                    
                    if (!verification.isFunction) {
                        console.error('[Script Loader] initializeMap not properly defined');
                        reject(new Error(`initializeMap not properly defined. Type: ${verification.initializeMapType}`));
                        return;
                    }
                }
                resolve();
            };
            script.onerror = (error) => reject(new Error(`Failed to load ${src}: ${error}`));
            document.head.appendChild(script);
        });
    }

    // スクリプトの順次読み込み
    return Promise.resolve()
        .then(() => loadScript('https://dq.h1g.jp/leaflet/widgetmap-core.js'))
        .then(() => loadScript('https://dq.h1g.jp/leaflet/widgetmap-icons.js'))
        .then(() => loadScript('https://dq.h1g.jp/leaflet/widgetmap-popups.js'))
        .then(() => loadScript('https://dq.h1g.jp/leaflet/widgetmap-api.js'))
        .then(() => loadScript('https://dq.h1g.jp/leaflet/widgetmap-init.js'));
}

// Start loading when document is ready
$(document).ready(() => {
    console.log('[Main] Starting initialization');
    loadScriptsSequentially().catch(error => {
        console.error('[Main] Loading sequence failed:', error);
        alert('モジュールの読み込みに失敗しました。\n詳細はコンソールを確認してください。');
    });
});
</script>
</includeonly>