「Widget:Custom map」の版間の差分
提供:メタファー リファンタジオ 攻略Wiki
ヘイグ運営用アカウント (トーク | 投稿記録) 編集の要約なし タグ: 差し戻し済み |
ヘイグ運営用アカウント (トーク | 投稿記録) 編集の要約なし |
||
(同じ利用者による、間の16版が非表示) | |||
1行目: | 1行目: | ||
<includeonly> | <includeonly> | ||
<!-- Required CSS --> | <!-- Required CSS --> | ||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/> | |||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css"/> | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.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-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/dq10_offline/map/css/leaflet-tag-filter-button.css" /> | ||
8行目: | 8行目: | ||
<link rel="stylesheet" href="https://dq.h1g.jp/img/lightgallery.min.css"/> | <link rel="stylesheet" href="https://dq.h1g.jp/img/lightgallery.min.css"/> | ||
<!-- Required JS Libraries --> | <!-- Required JS Libraries --> | ||
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> | <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/leaflet/leaflet.js"></script> | ||
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw-src.js"></script> | |||
<script src="https://dq.h1g.jp/leaflet/custom-leaflet-draw-locale.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-easy-button.js"></script> | ||
<script src="https://dq.h1g.jp/img/dq10_offline/map/js/leaflet-tag-filter-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/lightgallery/2.7.2/lightgallery.min.js"></script> | <script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/lightgallery.min.js"></script> | ||
<!-- Global Configuration --> | <!-- Global Configuration --> | ||
<script> | <script> | ||
// Initialize | // Initialize WidgetMap namespace with explicit function placeholder | ||
window. | window.WidgetMap = { | ||
map: null, | map: null, | ||
drawnItems: null, | drawnItems: null, | ||
31行目: | 28行目: | ||
api: {}, | api: {}, | ||
popups: {}, | popups: {}, | ||
icons: {} | icons: {}, | ||
// 明示的な関数プレースホルダー | |||
initializeMap: function() { | |||
console.error('Map initialization not yet loaded'); | |||
return null; | |||
} | |||
}; | }; | ||
// プラグインの読み込み確認機能 | |||
function checkPlugins() { | |||
console.log('Checking Leaflet plugins...'); | |||
// Leaflet本体 | |||
console.log('Leaflet version:', L.version); | |||
// Leaflet.Draw | |||
if (L.Draw) { | |||
console.log('Leaflet.Draw loaded:', { | |||
Draw: !!L.Draw, | |||
DrawToolbar: !!L.DrawToolbar, | |||
Polyline: !!L.Draw.Polyline | |||
}); | |||
} else { | |||
console.error('Leaflet.Draw not loaded properly'); | |||
} | |||
} | |||
// Initialize API base URL | // Initialize API base URL | ||
39行目: | 63行目: | ||
const baseUrl = currentUrl.origin + currentUrl.pathname.split('/').slice(0, -1).join('/'); | const baseUrl = currentUrl.origin + currentUrl.pathname.split('/').slice(0, -1).join('/'); | ||
window.API_BASE_URL = baseUrl; | window.API_BASE_URL = baseUrl; | ||
console.log('API_BASE_URL initialized:', baseUrl); | |||
})(); | })(); | ||
55行目: | 80行目: | ||
icon4: '<!--{$icon4|default:"https://dq.h1g.jp/img/marker-icon-img/marker-icon-green.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"}-->', | 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"}-->' | icon6: '<!--{$icon6|default:"https://dq.h1g.jp/img/marker-icon-img/marker-icon-black.png"}-->', | ||
icon7: '<!--{$icon7|default:"https://dq.h1g.jp/img/marker-icon-img/marker-icon-orange.png"}-->', | |||
icon8: '<!--{$icon8|default:"https://dq.h1g.jp/img/marker-icon-img/marker-icon-yellow.png"}-->', | |||
icon9: '<!--{$icon9|default:"https://dq.h1g.jp/img/marker-icon-img/marker-icon-grey.png"}-->', | |||
icon10: '<!--{$icon10|default:"https://dq.h1g.jp/img/marker-icon-img/marker-icon-brown.png"}-->' | |||
}, | }, | ||
filters: { | filters: { | ||
63行目: | 92行目: | ||
filter4: '<!--{$filter4|default:"分類4"}-->', | filter4: '<!--{$filter4|default:"分類4"}-->', | ||
filter5: '<!--{$filter5|default:"分類5"}-->', | filter5: '<!--{$filter5|default:"分類5"}-->', | ||
filter6: '<!--{$filter6|default:"分類6"}-->' | filter6: '<!--{$filter6|default:"分類6"}-->', | ||
filter7: '<!--{$filter7|default:"分類7"}-->', | |||
filter8: '<!--{$filter8|default:"分類8"}-->', | |||
filter9: '<!--{$filter9|default:"分類9"}-->', | |||
filter10: '<!--{$filter10|default:"分類10"}-->' | |||
} | } | ||
}; | }; | ||
/ | </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 | // Start loading when document is ready | ||
$(document).ready( | $(document).ready(() => { | ||
console.log('[Main] Starting initialization'); | |||
loadScriptsSequentially().catch(error => { | |||
console.error('[Main] Loading sequence failed:', error); | |||
alert('モジュールの読み込みに失敗しました。\n詳細はコンソールを確認してください。'); | |||
}); | |||
}); | }); | ||
</script> | </script> | ||
</includeonly> | </includeonly> |