「Widget:Custom map」の版間の差分
提供:メタファー リファンタジオ 攻略Wiki
ヘイグ運営用アカウント (トーク | 投稿記録) 編集の要約なし |
ヘイグ運営用アカウント (トーク | 投稿記録) 編集の要約なし |
||
(同じ利用者による、間の36版が非表示) | |||
1行目: | 1行目: | ||
<includeonly> | <includeonly> | ||
< | <!-- Required CSS --> | ||
<script | <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://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://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-tag-filter-button.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; | |||
} | |||
}; | |||
// プラグインの読み込み確認機能 | |||
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 | |||
(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"}-->', | |||
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: { | |||
filter1: '<!--{$filter1|default:"分類1"}-->', | |||
filter2: '<!--{$filter2|default:"分類2"}-->', | |||
filter3: '<!--{$filter3|default:"分類3"}-->', | |||
filter4: '<!--{$filter4|default:"分類4"}-->', | |||
filter5: '<!--{$filter5|default:"分類5"}-->', | |||
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 when document is ready | |||
$(document).ready(() => { | |||
console.log('[Main] Starting initialization'); | |||
loadScriptsSequentially().catch(error => { | |||
console.error('[Main] Loading sequence failed:', error); | |||
alert('モジュールの読み込みに失敗しました。\n詳細はコンソールを確認してください。'); | |||
}); | |||
}); | |||
</script> | </script> | ||
</includeonly> | </includeonly> |