「Widget:Custom map」の版間の差分

提供:メタファー リファンタジオ 攻略Wiki
移動先:案内検索
編集の要約なし
編集の要約なし
1行目: 1行目:
<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>
<script>
// デバッグログ関数
// Initialize required global objects
function debugLog(message, data = null) {
    const timestamp = new Date().toISOString();
    const logMessage = data
        ? `[${timestamp}] ${message}: ${JSON.stringify(data)}`
        : `[${timestamp}] ${message}`;
    console.log(logMessage);
}
 
// GTP8の状態を監視する関数
function checkGTP8State() {
    debugLog('Current GTP8 State', {
        exists: !!window.GTP8,
        properties: window.GTP8 ? Object.keys(window.GTP8) : null,
        initializeMap: window.GTP8 ? typeof window.GTP8.initializeMap : null,
        api: window.GTP8 ? !!window.GTP8.api : null,
        popups: window.GTP8 ? !!window.GTP8.popups : null
    });
}
 
// スクリプトローダー
function loadScript(url) {
    return new Promise((resolve, reject) => {
        debugLog(`Loading script: ${url}`);
        const script = document.createElement('script');
        script.src = url;
        script.onload = () => {
            debugLog(`Successfully loaded: ${url}`);
            checkGTP8State();
            resolve();
        };
        script.onerror = () => {
            debugLog(`Failed to load: ${url}`);
            reject(new Error(`Failed to load ${url}`));
        };
        document.head.appendChild(script);
    });
}
 
// 初期化
window.GTP8 = {
window.GTP8 = {
     initializeMap: null,
     initializeMap: null,
71行目: 12行目:
};
};


debugLog('Initial GTP8 setup complete');
// Initialize API base URL
checkGTP8State();
(function() {
    const currentUrl = new URL(window.location.href);
    const baseUrl = currentUrl.origin + currentUrl.pathname.split('/').slice(0, -1).join('/');
    window.API_BASE_URL = baseUrl;
})();


// 順番にスクリプトを読み込む
// Map configuration must be defined before loading other scripts
async function loadAllScripts() {
window.mapConfig = {
     try {
    imageUrl: '<!--{$img}-->',
         await loadScript('https://dq.h1g.jp/leaflet/gtp8-core.js');
    imageWidth: <!--{$imgwidth}-->,
         debugLog('After core load', { initializeMap: typeof window.GTP8.initializeMap });
    imageHeight: <!--{$imgheight}-->,
          
    minZoom: <!--{$minzoom}-->,
        await loadScript('https://dq.h1g.jp/leaflet/gtp8-icons.js');
    maxZoom: <!--{$maxzoom}-->,
         await loadScript('https://dq.h1g.jp/leaflet/gtp8-popups.js');
    geoJsonPage: '<!--{$geojson}-->',
         await loadScript('https://dq.h1g.jp/leaflet/gtp8-api.js');
     iconUrls: {
          
         icon1: '<!--{$icon1|default:"https://dq.h1g.jp/img/marker-icon-img/marker-icon-blue.png"}-->',
        // init.jsを読み込む前に最終チェック
         icon2: '<!--{$icon2|default:"https://dq.h1g.jp/img/marker-icon-img/marker-icon-red.png"}-->',
        checkGTP8State();
         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"}-->',
        await loadScript('https://dq.h1g.jp/leaflet/gtp8-init.js');
         icon5: '<!--{$icon5|default:"https://dq.h1g.jp/img/marker-icon-img/marker-icon-gold.png"}-->',
         debugLog('All scripts loaded');
         icon6: '<!--{$icon6|default:"https://dq.h1g.jp/img/marker-icon-img/marker-icon-black.png"}-->'
          
    },
         // 最終状態チェック
    filters: {
         checkGTP8State();
         filter1: '<!--{$filter1|default:"分類1"}-->',
    } catch (error) {
         filter2: '<!--{$filter2|default:"分類2"}-->',
         debugLog('Script loading error', error);
         filter3: '<!--{$filter3|default:"分類3"}-->',
         alert('スクリプトの読み込み中にエラーが発生しました。');
         filter4: '<!--{$filter4|default:"分類4"}-->',
         filter5: '<!--{$filter5|default:"分類5"}-->',
         filter6: '<!--{$filter6|default:"分類6"}-->'
     }
     }
}
};


// ページ読み込み完了時に実行
// Debug verification
$(document).ready(() => {
console.log('Initial setup complete:', {
     debugLog('Document ready, starting script load');
     GTP8: !!window.GTP8,
     loadAllScripts();
    mapConfig: !!window.mapConfig,
     API_BASE_URL: !!window.API_BASE_URL
});
});
// エラーハンドリング
window.onerror = function(msg, url, line, col, error) {
    debugLog('Global error caught', {
        message: msg,
        url: url,
        line: line,
        column: col,
        error: error?.toString()
    });
    return false;
};
</script>
</script>


<!-- Map Container -->
<!-- Load scripts after configuration -->
<div id="map" style="width: 100%; height: 600px;"></div>
<script src="https://dq.h1g.jp/leaflet/gtp8-core.js"></script>
</includeonly>
<script src="https://dq.h1g.jp/leaflet/gtp8-icons.js"></script>
<script src="https://dq.h1g.jp/leaflet/gtp8-popups.js"></script>
<script src="https://dq.h1g.jp/leaflet/gtp8-api.js"></script>
<script src="https://dq.h1g.jp/leaflet/gtp8-init.js"></script>

2024年11月10日 (日) 21:18時点における版

<script> // Initialize required global objects window.GTP8 = {

   initializeMap: null,
   map: null,
   drawnItems: null,
   drawControl: null,
   editMode: false,
   api: {},
   popups: {},
   icons: {}

};

// 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;

})();

// Map configuration must be defined before loading other scripts window.mapConfig = {

   imageUrl: ,
   imageWidth: ,
   imageHeight: ,
   minZoom: ,
   maxZoom: ,
   geoJsonPage: ,
   iconUrls: {
       icon1: ,
       icon2: ,
       icon3: ,
       icon4: ,
       icon5: ,
       icon6: 
   },
   filters: {
       filter1: ,
       filter2: ,
       filter3: ,
       filter4: ,
       filter5: ,
       filter6: 
   }

};

// Debug verification console.log('Initial setup complete:', {

   GTP8: !!window.GTP8,
   mapConfig: !!window.mapConfig,
   API_BASE_URL: !!window.API_BASE_URL

}); </script>

<script src="https://dq.h1g.jp/leaflet/gtp8-core.js"></script> <script src="https://dq.h1g.jp/leaflet/gtp8-icons.js"></script> <script src="https://dq.h1g.jp/leaflet/gtp8-popups.js"></script> <script src="https://dq.h1g.jp/leaflet/gtp8-api.js"></script> <script src="https://dq.h1g.jp/leaflet/gtp8-init.js"></script>