「Widget:Custom map」の版間の差分
提供：メタファー リファンタジオ 攻略Wiki
ヘイグ運営用アカウント (トーク | 投稿記録) 編集の要約なし |
ヘイグ運営用アカウント (トーク | 投稿記録) 編集の要約なし |
||
| 2行目: | 2行目: | ||
<script> | <script> | ||
mw.loader.load('ext.leafletmapsWidget'); | mw.loader.load('ext.leafletmapsWidget'); | ||
<!-- Widget内の実装 --> | |||
<div id="map" style="height: 600px;" | |||
data-img="<!--{$img}-->" | |||
data-imgwidth="<!--{$imgwidth}-->" | |||
data-imgheight="<!--{$imgheight}-->" | |||
data-minzoom="<!--{$minzoom}-->" | |||
data-maxzoom="<!--{$maxzoom}-->" | |||
data-geojson="<!--{$geojson}-->" | |||
data-filter1="<!--{$filter1|default:'分類1'}-->" | |||
data-filter2="<!--{$filter2|default:'分類2'}-->" | |||
data-filter3="<!--{$filter3|default:'分類3'}-->" | |||
data-filter4="<!--{$filter4|default:'分類4'}-->" | |||
data-filter5="<!--{$filter5|default:'分類5'}-->" | |||
data-filter6="<!--{$filter6|default:'分類6'}-->"> | |||
</div> | |||
<!-- 必要な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"/> | |||
<!-- 必要なスクリプトの読み込み --> | |||
<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> | |||
<script> | |||
// マップの初期化のみをここで行う | |||
$(document).ready(function() { | |||
if (typeof initLeafletMap === 'function') { | |||
const mapDiv = document.getElementById('map'); | |||
initLeafletMap(mapDiv); | |||
} | |||
}); | |||
</script> | |||
</script> | </script> | ||
</includeonly> | </includeonly> | ||