「Widget:Custom map」の版間の差分
提供:メタファー リファンタジオ 攻略Wiki
ヘイグ運営用アカウント (トーク | 投稿記録) 編集の要約なし |
ヘイグ運営用アカウント (トーク | 投稿記録) 編集の要約なし |
||
(同じ利用者による、間の4版が非表示) | |||
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" /> | ||
12行目: | 12行目: | ||
<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 WidgetMap namespace with explicit function placeholder | |||
window.WidgetMap = { | |||
// Initialize | |||
window. | |||
map: null, | map: null, | ||
drawnItems: null, | drawnItems: null, | ||
34行目: | 29行目: | ||
popups: {}, | popups: {}, | ||
icons: {}, | icons: {}, | ||
// | // 明示的な関数プレースホルダー | ||
initializeMap: null | 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 | ||
60行目: | 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: { | ||
68行目: | 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"}-->' | |||
} | } | ||
}; | }; | ||
75行目: | 103行目: | ||
<!-- Load scripts sequentially --> | <!-- Load scripts sequentially --> | ||
<script> | <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 loadScriptsSequentially() { | ||
function loadScript(src) { | function loadScript(src) { | ||
83行目: | 128行目: | ||
script.onload = () => { | script.onload = () => { | ||
console.log('[Script Loader] Successfully loaded:', src); | console.log('[Script Loader] Successfully loaded:', src); | ||
if (src.includes(' | 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(); | resolve(); | ||
}; | }; | ||
script.onerror = (error) => | script.onerror = (error) => reject(new Error(`Failed to load ${src}: ${error}`)); | ||
document.head.appendChild(script); | document.head.appendChild(script); | ||
}); | }); | ||
} | } | ||
// スクリプトの順次読み込み | |||
return Promise.resolve() | |||
.then(() => loadScript('https://dq.h1g.jp/leaflet/widgetmap-core.js')) | |||
.then(() => | .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')); | |||
.then(() => loadScript('https://dq.h1g.jp/leaflet/ | |||
.then(() => loadScript('https://dq.h1g.jp/leaflet/ | |||
.then(() => loadScript('https://dq.h1g.jp/leaflet/ | |||
} | } | ||
// Start loading when document is ready | // Start loading when document is ready | ||
$(document).ready(() => { | $(document).ready(() => { | ||
console.log('[Main] | console.log('[Main] Starting initialization'); | ||
loadScriptsSequentially().catch(error => { | loadScriptsSequentially().catch(error => { | ||
console.error('[Main] | console.error('[Main] Loading sequence failed:', error); | ||
alert('モジュールの読み込みに失敗しました。\n詳細はコンソールを確認してください。'); | |||
}); | }); | ||
}); | }); | ||
</script> | </script> | ||
</includeonly> | </includeonly> |