|
|
| (同じ利用者による、間の8版が非表示) |
| 1行目: |
1行目: |
| <includeonly> | | <includeonly> |
| <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> | | <!-- Required CSS --> |
| | |
| <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>
| |
| | |
| <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://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/> | | <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/> |
| 13行目: |
6行目: |
| <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" /> |
| <link rel="stylesheet" href="https://dq.h1g.jp/img/marker-icon-img/editable-popup.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://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 src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/2.7.2/lightgallery.min.js"></script> |
| <link rel="stylesheet" href="https://dq.h1g.jp/img/lightgallery.min.css"/>
| |
|
| |
|
| <script src="https://dq.h1g.jp/leaflet/custom-image_leaflet_map_h1g.js" ></script> | | <!-- Global Configuration --> |
| | | <script> |
| <script type="text/javascript">
| | // Initialize WidgetMap namespace with explicit function placeholder |
| | | window.WidgetMap = { |
| let map;
| | map: null, |
| var drawnItems;
| | drawnItems: null, |
| var drawControl;
| | drawControl: null, |
| var editMode = false;
| | editMode: false, |
| // APIベースURLを定数として定義
| | api: {}, |
| const API_BASE_URL = 'https://prd-h1g-elb-2067013247.ap-northeast-1.elb.amazonaws.com/rs2r';
| | popups: {}, |
| | | icons: {}, |
| window.savePopupContent = savePopupContent;
| | // 明示的な関数プレースホルダー |
| | | initializeMap: function() { |
| // 表示する画像
| | console.error('Map initialization not yet loaded'); |
| var imageBase = {
| | return null; |
| url: '<!--{$img}-->',
| | } |
| width: <!--{$imgwidth}-->, // 画像のサイズ
| |
| height: <!--{$imgheight}-->
| |
| }; | | }; |
|
| |
|
| // 地図初期化 | | // Initialize API base URL |
| var imageBounds = L.latLngBounds(
| | (function() { |
| [0, 0],
| | const currentUrl = new URL(window.location.href); |
| [imageBase.height, imageBase.width],
| | const baseUrl = currentUrl.origin + currentUrl.pathname.split('/').slice(0, -1).join('/'); |
|
| | window.API_BASE_URL = baseUrl; |
| ); | | console.log('API_BASE_URL initialized:', baseUrl); |
| | | })(); |
| map = L.map('map', {
| |
| crs: L.CRS.Simple,
| |
| maxBounds: imageBounds.pad(0.5),
| |
| minZoom: <!--{$minzoom}-->, // minZoomを0に設定
| |
| maxZoom: <!--{$maxzoom}-->,
| |
|
| |
|
| }); | | // Map configuration |
| map.fitBounds(imageBounds);
| | window.mapConfig = { |
| L.imageOverlay(imageBase.url, imageBounds,{
| | imageUrl: '<!--{$img}-->', |
| attribution: '<a href="https://h1g.jp/" target="_blank">【ヘイグ】</a>'
| | imageWidth: <!--{$imgwidth}-->, |
| }).addTo(map);
| | imageHeight: <!--{$imgheight}-->, |
| | | minZoom: <!--{$minzoom}-->, |
| var drawnItems = new L.FeatureGroup();
| | maxZoom: <!--{$maxzoom}-->, |
| map.addLayer(drawnItems);
| | geoJsonPage: '<!--{$geojson}-->', |
| | | iconUrls: { |
| | | icon1: '<!--{$icon1|default:"https://dq.h1g.jp/img/marker-icon-img/marker-icon-blue.png"}-->', |
| // Leaflet.Draw | | icon2: '<!--{$icon2|default:"https://dq.h1g.jp/img/marker-icon-img/marker-icon-red.png"}-->', |
| var drawnItems = new L.FeatureGroup();
| | icon3: '<!--{$icon3|default:"https://dq.h1g.jp/img/marker-icon-img/marker-icon-violet.png"}-->', |
| map.addLayer(drawnItems);
| | 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"}-->', |
| drawControl = new L.Control.Draw({
| | icon6: '<!--{$icon6|default:"https://dq.h1g.jp/img/marker-icon-img/marker-icon-black.png"}-->' |
| edit: {
| |
| featureGroup: drawnItems,
| |
| poly: { | |
| allowIntersection: false
| |
| }
| |
| }, | | }, |
| draw: { | | filters: { |
| polygon: false, | | filter1: '<!--{$filter1|default:"分類1"}-->', |
| polyline: false,
| | filter2: '<!--{$filter2|default:"分類2"}-->', |
| rectangle: false,
| | filter3: '<!--{$filter3|default:"分類3"}-->', |
| circle: true,
| | filter4: '<!--{$filter4|default:"分類4"}-->', |
| marker: true,
| | filter5: '<!--{$filter5|default:"分類5"}-->', |
| circlemarker: false
| | filter6: '<!--{$filter6|default:"分類6"}-->' |
| }
| |
| });
| |
| map.addControl(drawControl);
| |
| | |
| // 初期状態では編集モードを無効にする
| |
| drawControl.remove();
| |
| | |
| map.on(L.Draw.Event.CREATED, function (event) {
| |
| var layer = event.layer;
| |
| if (layer instanceof L.Marker) {
| |
| layer.setIcon(iconDefinitions.icon1);
| |
| layer.options.popupData = {title: '', content: '', iconType: 'icon1'};
| |
| var popupContent =
| |
| '<div>' +
| |
| '<textarea id="popup-title" cols="30" rows="1" placeholder="タイトル"></textarea>' +
| |
| '<textarea id="popup-content" cols="30" rows="2" placeholder="内容"></textarea>' +
| |
| '<select id="icon-type">' +
| |
| '<option value="icon1" selected>アイコン1</option>' +
| |
| '<option value="icon2">アイコン2</option>' +
| |
| '<option value="icon3">アイコン3</option>' +
| |
| '<option value="icon4">アイコン4</option>' +
| |
| '<option value="icon5">アイコン5</option>' +
| |
| '<option value="icon6">アイコン6</option>' +
| |
| '</select>' +
| |
| '<button onclick="savePopupContent(this)">保存</button>' +
| |
| '</div>';
| |
| layer.bindPopup(popupContent);
| |
| } else {
| |
| layer.bindPopup('No description');
| |
| } | | } |
| createEditablePopup(layer);
| |
| drawnItems.addLayer(layer);
| |
| if (layer instanceof L.Marker) {
| |
| layer.openPopup();
| |
| }
| |
| });
| |
|
| |
| //////////////////権限を確認
| |
| function checkUserGroup(group, callback) {
| |
| $.ajax({
| |
| url: API_BASE_URL + '/api.php',
| |
| data: {
| |
| action: 'query',
| |
| meta: 'userinfo',
| |
| uiprop: 'groups',
| |
| format: 'json'
| |
| },
| |
| type: 'GET',
| |
| success: function(data) {
| |
| var userGroups = data.query.userinfo.groups;
| |
| var isInGroup = userGroups.indexOf(group) !== -1;
| |
| callback(isInGroup);
| |
| },
| |
| error: function() {
| |
| console.error('Failed to check user group');
| |
| callback(false);
| |
| }
| |
| });
| |
| }
| |
| //////////////////////////////////////////////////////////////
| |
| // アイコンの定義
| |
| var iconDefinitions = {
| |
| icon1: L.icon({
| |
| iconUrl: '<!--{$icon1|default:'https://dq.h1g.jp/img/marker-icon-img/marker-icon-blue.png'}-->',
| |
| shadowUrl: 'https://dq.h1g.jp/img/marker-icon-img/marker-shadow.png',
| |
| iconSize: [25, 41],
| |
| iconAnchor: [12, 41],
| |
| popupAnchor: [1, -41],
| |
| shadowSize: [41, 41]
| |
| }),
| |
| icon2: L.icon({
| |
| iconUrl: '<!--{$icon2|default:'https://dq.h1g.jp/img/marker-icon-img/marker-icon-red.png'}-->',
| |
| shadowUrl: 'https://dq.h1g.jp/img/marker-icon-img/marker-shadow.png',
| |
| iconSize: [25, 41],
| |
| iconAnchor: [12, 41],
| |
| popupAnchor: [1, -41],
| |
| shadowSize: [41, 41]
| |
| }),
| |
| icon3: L.icon({
| |
| iconUrl: '<!--{$icon3|default:'https://dq.h1g.jp/img/marker-icon-img/marker-icon-violet.png'}-->',
| |
| shadowUrl: 'https://dq.h1g.jp/img/marker-icon-img/marker-shadow.png',
| |
| iconSize: [25, 41],
| |
| iconAnchor: [12, 41],
| |
| popupAnchor: [1, -41],
| |
| shadowSize: [41, 41]
| |
| }),
| |
| icon4: L.icon({
| |
| iconUrl: '<!--{$icon4|default:'https://dq.h1g.jp/img/marker-icon-img/marker-icon-green.png'}-->',
| |
| shadowUrl: 'https://dq.h1g.jp/img/marker-icon-img/marker-shadow.png',
| |
| iconSize: [25, 41],
| |
| iconAnchor: [12, 41],
| |
| popupAnchor: [1, -41],
| |
| shadowSize: [41, 41]
| |
| }),
| |
| icon5: L.icon({
| |
| iconUrl: '<!--{$icon5|default:'https://dq.h1g.jp/img/marker-icon-img/marker-icon-gold.png'}-->',
| |
| shadowUrl: 'https://dq.h1g.jp/img/marker-icon-img/marker-shadow.png',
| |
| iconSize: [25, 41],
| |
| iconAnchor: [12, 41],
| |
| popupAnchor: [1, -41],
| |
| shadowSize: [41, 41]
| |
| }),
| |
| icon6: L.icon({
| |
| iconUrl: '<!--{$icon6|default:'https://dq.h1g.jp/img/marker-icon-img/marker-icon-black.png'}-->',
| |
| shadowUrl: 'https://dq.h1g.jp/img/marker-icon-img/marker-shadow.png',
| |
| iconSize: [25, 41],
| |
| iconAnchor: [12, 41],
| |
| popupAnchor: [1, -41],
| |
| shadowSize: [41, 41]
| |
| })
| |
| }; | | }; |
| | </script> |
|
| |
|
| | | <!-- Load scripts sequentially --> |
| // ポップアップの作成
| | <script> |
| function createEditablePopup(layer) {
| | // Clear any existing WidgetMap object |
| var popupData = layer.options.popupData || {};
| | if (window.WidgetMap) { |
| var title = popupData.title || '';
| | console.log('[Init] Clearing existing WidgetMap object'); |
| var content = popupData.content || '';
| | delete window.WidgetMap; |
| var iconType = popupData.iconType || 'icon1';
| |
| | |
| layer.on('popupopen', function() {
| |
| var popup = this.getPopup();
| |
| var popupData = this.options.popupData || {};
| |
| var title = popupData.title || '';
| |
| var content = popupData.content || '';
| |
| var iconType = popupData.iconType || 'icon1';
| |
| | |
| | |
| | |
| // タイトルと内容が両方空の場合、ポップアップを表示しない
| |
| if (!editMode && title === '' && content === '') {
| |
| layer.closePopup();
| |
| // カーソルをデフォルトに設定
| |
| layer._icon.style.cursor = 'default';
| |
| return;
| |
| }
| |
| | |
| if (editMode) { // 編集モードの場合のみtextareaを表示
| |
| var iconSelector = '';
| |
| if (layer instanceof L.Marker) {
| |
| iconSelector = '<select id="icon-type">' +
| |
| '<option value="icon1"' + (iconType === 'icon1' ? ' selected' : '') + '>アイコン1</option>' +
| |
| '<option value="icon2"' + (iconType === 'icon2' ? ' selected' : '') + '>アイコン2</option>' +
| |
| '<option value="icon3"' + (iconType === 'icon3' ? ' selected' : '') + '>アイコン3</option>' +
| |
| '<option value="icon4"' + (iconType === 'icon4' ? ' selected' : '') + '>アイコン4</option>' +
| |
| '<option value="icon5"' + (iconType === 'icon5' ? ' selected' : '') + '>アイコン5</option>' +
| |
| '<option value="icon6"' + (iconType === 'icon6' ? ' selected' : '') + '>アイコン6</option>' +
| |
| '</select>';
| |
| }
| |
| | |
| var editableContent =
| |
| '<div>' +
| |
| '<textarea id="popup-title" cols="60" rows="3" placeholder="タイトル">' + title + '</textarea>' +
| |
| '<textarea id="popup-content" cols="60" rows="10" placeholder="内容">' + content + '</textarea>' +
| |
| iconSelector +
| |
| '<button onclick="savePopupContent(this)">保存</button>' +
| |
| '</div>';
| |
| popup.setContent(editableContent);
| |
| } else {
| |
| // 編集モードでない場合は表示用のコンテンツを設定
| |
| if (title === '' && content === '') {
| |
| layer.unbindPopup(); // タイトルと内容が空の場合はポップアップを表示しない
| |
| } else {
| |
| var displayContent = '<strong>' + title + '</strong><br>' + content;
| |
| var renderedContent = renderMediaWikiContent(displayContent);
| |
| popup.setContent(renderedContent);
| |
| }
| |
| }
| |
| });
| |
| | |
| // 既にポップアップが設定されている場合に備え、再設定
| |
| if (!(title === '' && content === '')) { | |
| var displayContent = '<strong>' + title + '</strong><br>' + content;
| |
| var renderedContent = renderMediaWikiContent(displayContent);
| |
| layer.bindPopup(renderedContent);
| |
| }
| |
| } | | } |
|
| |
|
| | // Initialize fresh WidgetMap namespace |
| | window.WidgetMap = { |
| | map: null, |
| | drawnItems: null, |
| | drawControl: null, |
| | editMode: false, |
| | api: {}, |
| | popups: {}, |
| | icons: {} |
| | }; |
|
| |
|
| | | function loadScriptsSequentially() { |
| | | function loadScript(src) { |
| // MediaWikiコンテンツのレンダリング
| | return new Promise((resolve, reject) => { |
| function renderMediaWikiContent(content) { | | console.log('[Script Loader] Loading:', src); |
| var renderedContent = ''; | | const script = document.createElement('script'); |
| $.ajax({
| | script.src = src; |
| url: API_BASE_URL + '/api.php',
| | script.onload = () => { |
| data: {
| | console.log('[Script Loader] Successfully loaded:', src); |
| action: 'parse',
| | if (src.includes('WidgetMap-core.js')) { |
| text: content,
| | // コア読み込み後の検証を強化 |
| format: 'json'
| | const verification = { |
| },
| | hasWidgetMap: !!window.WidgetMap, |
| async: false,
| | initializeMapType: typeof window.WidgetMap.initializeMap, |
| success: function(data) {
| | isFunction: typeof window.WidgetMap.initializeMap === 'function' |
| renderedContent = data.parse.text['*'];
| | }; |
| // レンダリング後の画像処理
| | console.log('[Script Loader] Core verification:', verification); |
| setTimeout(function() {
| | |
| initLightGallery(renderedContent);
| | if (!verification.isFunction) { |
| }, 100);
| | console.error('[Script Loader] initializeMap not properly defined'); |
| },
| | reject(new Error(`initializeMap not properly defined. Type: ${verification.initializeMapType}`)); |
| error: function() {
| | return; |
| console.error('Failed to render MediaWiki content'); | | } |
| }
| |
| });
| |
| return renderedContent;
| |
| }
| |
| | |
| | |
| // LightGalleryの初期化を修正
| |
| function initLightGallery(content) {
| |
| const popupContent = $('.leaflet-popup-content');
| |
|
| |
| // 既存のLightGalleryインスタンスを破棄
| |
| if (popupContent.data('lightGallery')) {
| |
| popupContent.data('lightGallery').destroy(true);
| |
| }
| |
| | |
| // 既存のlg-containerを削除
| |
| $('.lg-container').remove();
| |
|
| |
| popupContent.find('img').each(function() {
| |
| const img = $(this);
| |
| // gallery-itemクラスを持つdivで既に囲まれていない場合のみ処理
| |
| if (!img.parent().hasClass('gallery-item')) {
| |
| let fullSizeUrl = convertToFullSize(img.attr('src'));
| |
| img.wrap('<div class="gallery-item" data-src="' + fullSizeUrl + '"></div>');
| |
| }
| |
| });
| |
| | |
| // LightGalleryを初期化（ナビゲーション矢印を非表示に）
| |
| if (!popupContent.data('lightGallery')) {
| |
| lightGallery(popupContent[0], {
| |
| selector: '.gallery-item',
| |
| plugins: [],
| |
| speed: 500,
| |
| download: false,
| |
| counter: false,
| |
| enableDrag: false,
| |
| enableTouch: false,
| |
| hideControlOnEnd: true,
| |
| controls: false,
| |
| prevHtml: '',
| |
| nextHtml: '',
| |
| backdropDuration: 300, // 背景のフェード時間
| |
| });
| |
| }
| |
| }
| |
| | |
| | |
| // ポップアップが閉じられたときの処理を追加
| |
| map.on('popupclose', function(e) {
| |
| const popupContent = $(e.popup.getContent());
| |
| if (popupContent.data('lightGallery')) {
| |
| popupContent.data('lightGallery').destroy(true);
| |
| }
| |
| });
| |
| | |
| // MediaWikiの画像URLを最大サイズに変換する関数
| |
| function convertToFullSize(url) {
| |
| // MediaWikiのサムネイルURLをパースして最大サイズのURLに変換
| |
| if (url.includes('/thumb/')) {
| |
| // /thumb/を除去し、最後の/以降を削除して元のファイル名に戻す
| |
| return url.replace('/thumb/', '/')
| |
| .replace(/\/\d+px-[^/]+$/, '');
| |
| }
| |
| return url;
| |
| }
| |
| | |
| // ポップアップが開かれたときのイベントを追加
| |
| map.on('popupopen', function(e) {
| |
| setTimeout(function() {
| |
| initLightGallery(e.popup.getContent());
| |
| }, 100);
| |
| });
| |
| | |
| | |
| // マップのクリーンアップ処理も追加 | |
| map.on('unload', function() {
| |
| $('.lg-container').remove();
| |
| $('.leaflet-popup-content').each(function() {
| |
| if ($(this).data('lightGallery')) {
| |
| $(this).data('lightGallery').destroy(true);
| |
| }
| |
| });
| |
| });
| |
| | |
| /// スタイルを更新
| |
| const styles = ` | |
| <style>
| |
| .gallery-item {
| |
| cursor: pointer;
| |
| display: inline-block;
| |
| }
| |
| .gallery-item img {
| |
| max-width: 200px;
| |
| height: auto;
| |
| transition: transform 0.3s ease;
| |
| }
| |
| .gallery-item:hover img {
| |
| transform: scale(1.05);
| |
| }
| |
| | |
| .lg-img-wrap {
| |
| text-align: center;
| |
| }
| |
| .lg-img-wrap img {
| |
| max-height: 90vh !important;
| |
| max-width: 90vw !important;
| |
| object-fit: contain;
| |
| }
| |
| /* ナビゲーション矢印を非表示 */
| |
| .lg-next, .lg-prev { | |
| display: none !important;
| |
| }
| |
| </style>
| |
| `;
| |
| | |
| | |
| | |
| // ポップアップの内容を保存
| |
| function savePopupContent(button) {
| |
| var popup = button.closest('.leaflet-popup');
| |
| var content = popup.querySelector('.leaflet-popup-content');
| |
| var title = content.querySelector('#popup-title').value;
| |
| var text = content.querySelector('#popup-content').value;
| |
| var iconType = content.querySelector('#icon-type') ? content.querySelector('#icon-type').value : null;
| |
|
| |
| var layer = drawnItems.getLayers().find(function(layer) {
| |
| return layer.getPopup() && layer.getPopup().getElement() === popup;
| |
| });
| |
|
| |
| if (layer) {
| |
| var savedContent = '<strong>' + title + '</strong><br>' + text;
| |
| layer.setPopupContent(savedContent);
| |
| layer.options.popupData = {title: title, content: text, iconType: iconType};
| |
|
| |
| // ポップアップを更新した後にLightGalleryを再初期化
| |
| setTimeout(function() {
| |
| initLightGallery(savedContent);
| |
| }, 100);
| |
|
| |
| layer.closePopup();
| |
| layer.openPopup();
| |
| }
| |
| }
| |
| | |
| | |
| // 編集イベントのリスナーも追加
| |
| map.on(L.Draw.Event.EDITED, function (event) {
| |
| var layers = event.layers;
| |
| layers.eachLayer(function (layer) {
| |
| drawnItems.addLayer(layer);
| |
| });
| |
| });
| |
| | |
| // 削除イベントのリスナーも追加
| |
| map.on(L.Draw.Event.DELETED, function (event) {
| |
| var layers = event.layers;
| |
| layers.eachLayer(function (layer) {
| |
| drawnItems.removeLayer(layer);
| |
| });
| |
| });
| |
| | |
| // 編集ボタン
| |
| var editButton = L.easyButton({
| |
| states: [{
| |
| stateName: 'enable-edit',
| |
| icon: '<img src="https://dq.h1g.jp/img/marker-icon-img/edit-solid.svg">',
| |
| title: 'マップを編集する',
| |
| onClick: function(btn, map) {
| |
| // checkUserGroup('map-edit-member', function(isInGroup) {
| |
| checkUserGroup('sysop', function(isInGroup) {
| |
| // checkUserGroup('internal-staff', function(isInGroup) {
| |
| if (isInGroup) {
| |
| editMode = true;
| |
| map.addControl(drawControl); | |
| btn.state('disable-edit');
| |
| updateAllPopups();
| |
| saveButton.addTo(map); // saveButtonを表示する
| |
| } else {
| |
| // alert('あなたには編集権限がありません。\n攻略に参加することでマップが編集できるようになります。');
| |
| alert('あなたには編集権限がありません。'); | |
| }
| |
| });
| |
| }
| |
| }, {
| |
| stateName: 'disable-edit',
| |
| icon: '<img src="https://dq.h1g.jp/img/marker-icon-img/edit-solid.svg">',
| |
| title: '編集の終了',
| |
| onClick: function(btn, map) {
| |
| editMode = false;
| |
| drawControl.remove();
| |
| btn.state('enable-edit');
| |
| updateAllPopups();
| |
| saveButton.remove(); // saveButtonを非表示にする
| |
| }
| |
| }]
| |
| }).addTo(map);
| |
| | |
| function updateAllPopups() {
| |
| drawnItems.eachLayer(function(layer) {
| |
| if (layer.getPopup()) {
| |
| layer.closePopup();
| |
| if (editMode) {
| |
| createEditablePopup(layer);
| |
| layer.openPopup();
| |
| } else if (!(layer.options.popupData && layer.options.popupData.title === '' && layer.options.popupData.content === '')) {
| |
| layer.bindPopup(layer.options.popupData.title + "<br>" + layer.options.popupData.content);
| |
| }
| |
| }
| |
| });
| |
| }
| |
| | |
| // 保存ボタン
| |
| var saveButton = L.easyButton('<img src="https://dq.h1g.jp/img/marker-icon-img/save-solid.svg">', function() {
| |
| if (editMode) {
| |
| var geoJSONData = convertToGeoJSON(drawnItems);
| |
| if (geoJSONData) {
| |
| // console.log(geoJSONData);
| |
| saveToWikiPage(geoJSONData);
| |
| saveButton.remove(); // saveButtonを非表示にする
| |
| } else {
| |
| alert('Error: Invalid GeoJSON data');
| |
| }
| |
| } else {
| |
| alert('Please enable edit mode before saving.');
| |
| }
| |
| }, '変更を保存');
| |
| | |
| | |
| | |
|
| |
| function loadPinsFromWikiPage() {
| |
| var host = window.location.origin;
| |
| var geojsonPage = "<!--{$geojson}-->";
| |
| var url = API_BASE_URL + '/index.php/' + geojsonPage;
| |
| | |
| $.ajax({
| |
| type: "GET",
| |
| url: url,
| |
| dataType: "html",
| |
| success: function(htmlContent) {
| |
| try {
| |
| // console.log("HTML Content: ", htmlContent); // 取得したHTMLをコンソールに出力
| |
| var parser = new DOMParser();
| |
| var doc = parser.parseFromString(htmlContent, "text/html");
| |
| var scriptTag = doc.querySelector('#mw-content-text script');
| |
| if (!scriptTag) {
| |
| throw new Error("Script tag not found");
| |
| }
| |
| var scriptContent = scriptTag.textContent.trim();
| |
| var jsonDataMatch = scriptContent.match(/var GeoJson =(\{[\s\S]*\});/);
| |
| if (!jsonDataMatch || jsonDataMatch.length < 2) {
| |
| throw new Error("GeoJSON data not found in script tag");
| |
| }
| |
| var geoJSONData = jsonDataMatch[1];
| |
| if (!geoJSONData) {
| |
| throw new Error("GeoJSON data is empty"); | |
| }
| |
| var parsedData = JSON.parse(geoJSONData);
| |
| processGeoJSONData(parsedData);
| |
| } catch (error) {
| |
| console.error("Error processing data:", error);
| |
| // console.log("Raw HTML content:", htmlContent);
| |
| // console.log("Extracted script content:", scriptContent);
| |
| if (typeof geoJSONData !== 'undefined') {
| |
| // console.log("Extracted GeoJSON data:", geoJSONData);
| |
| } | | } |
| }
| | resolve(); |
| },
| |
| error: function(xhr, status, error) {
| |
| // console.error("Error loading data:", error);
| |
| // console.log("XHR status:", status);
| |
| // console.log("XHR response:", xhr.responseText);
| |
| }
| |
| });
| |
| }
| |
| | |
| | |
| function processGeoJSONData(geoJSON) {
| |
| drawnItems.clearLayers();
| |
| | |
| L.geoJSON(geoJSON, {
| |
| pointToLayer: function (feature, latlng) {
| |
| var iconType = feature.properties.iconType || 'icon1';
| |
| var icon = iconDefinitions[iconType] || iconDefinitions.icon1;
| |
|
| |
| if (feature.properties.radius) {
| |
| return L.circle(latlng, {
| |
| radius: feature.properties.radius,
| |
| tags: feature.properties.tags
| |
| });
| |
| } else {
| |
| return L.marker(latlng, {
| |
| icon: icon,
| |
| tags: feature.properties.tags
| |
| }); | |
| }
| |
| },
| |
| onEachFeature: function (feature, layer) {
| |
| var popupContent = '<strong>' + feature.properties.title + '</strong><br>' + feature.properties.content;
| |
| layer.bindPopup(popupContent);
| |
| layer.options.popupData = {
| |
| title: feature.properties.title,
| |
| content: feature.properties.content,
| |
| iconType: feature.properties.iconType,
| |
| tags: feature.properties.tags
| |
| }; | | }; |
| createEditablePopup(layer); | | script.onerror = (error) => reject(new Error(`Failed to load ${src}: ${error}`)); |
| | | document.head.appendChild(script); |
| drawnItems.addLayer(layer);
| | }); |
| }
| |
| });
| |
| }
| |
| | |
| | |
|
| |
| | |
| | |
| //////////////////////////////////////////////////////////////////////////////
| |
| function convertToGeoJSON(drawnItems) {
| |
| var geoJSON = {
| |
| "type": "FeatureCollection",
| |
| "features": []
| |
| };
| |
| | |
| drawnItems.eachLayer(function(layer) {
| |
| var feature = layer.toGeoJSON();
| |
| var popupData = layer.options.popupData || {};
| |
| feature.properties = {
| |
| title: popupData.title || '',
| |
| content: popupData.content || '',
| |
| iconType: popupData.iconType || 'icon1',
| |
| tags: popupData.tags || [getTagFromIconType(popupData.iconType || 'icon1')]
| |
| };
| |
| | |
| if (layer instanceof L.Circle) {
| |
| feature.properties.radius = layer.getRadius();
| |
| feature.geometry = {
| |
| type: "Point",
| |
| coordinates: [layer.getLatLng().lng, layer.getLatLng().lat]
| |
| };
| |
| } else if (layer instanceof L.Marker) {
| |
| feature.geometry = {
| |
| type: "Point",
| |
| coordinates: [layer.getLatLng().lng, layer.getLatLng().lat]
| |
| };
| |
| } else {
| |
| // その他のタイプのレイヤーは無視する
| |
| return; | |
| }
| |
| | |
| geoJSON.features.push(feature);
| |
| });
| |
| | |
| // GeoJSONデータの有効性をチェック
| |
| try {
| |
| JSON.parse(JSON.stringify(geoJSON)); | |
| } catch (error) {
| |
| console.error("Invalid GeoJSON data:", error);
| |
| return null;
| |
| } | | } |
|
| |
|
| return JSON.stringify(geoJSON, null, 2); // 整形されたJSONを返す | | // スクリプトの順次読み込み |
| | 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 |
| function getTagFromIconType(iconType) {
| | $(document).ready(() => { |
| switch (iconType) {
| | console.log('[Main] Starting initialization'); |
| case 'icon1':
| | loadScriptsSequentially().catch(error => { |
| return '<!--{$filter1|default:"分類1"}-->';
| | console.error('[Main] Loading sequence failed:', error); |
| case 'icon2':
| | alert('モジュールの読み込みに失敗しました。\n詳細はコンソールを確認してください。'); |
| return '<!--{$filter2|default:"分類2"}-->';
| |
| case 'icon3':
| |
| return '<!--{$filter3|default:"分類3"}-->';
| |
| case 'icon4':
| |
| return '<!--{$filter4|default:"分類4"}-->';
| |
| case 'icon5':
| |
| return '<!--{$filter5|default:"分類5"}-->';
| |
| case 'icon6':
| |
| return '<!--{$filter6|default:"分類6"}-->';
| |
| default:
| |
| return '';
| |
| }
| |
| }
| |
| | |
| // フィルタボタンの定義
| |
| | |
| // Leaflet.Control.TagFilterButton の設定
| |
| L.control.tagFilterButton({
| |
| data: [
| |
| '<!--{$filter1|default:"分類1"}-->',
| |
| '<!--{$filter2|default:"分類2"}-->',
| |
| '<!--{$filter3|default:"分類3"}-->',
| |
| '<!--{$filter4|default:"分類4"}-->',
| |
| '<!--{$filter5|default:"分類5"}-->',
| |
| '<!--{$filter6|default:"分類6"}-->'
| |
| ],
| |
| icon: '<img src="https://dq.h1g.jp/img/marker-icon-img/filter.png">',
| |
| filterOnEveryClick: true
| |
| }).addTo(map);
| |
| | |
| | |
| | |
| function saveToWikiPage(geoJSONData) {
| |
| var formattedData = geoJSONData;
| |
| $.ajax({
| |
| type: "POST",
| |
| url: API_BASE_URL + '/api.php',
| |
| data: {
| |
| action: 'edit',
| |
| title: '<!--{$geojson}-->',
| |
| text: formattedData,
| |
| token: mw.user.tokens.get('csrfToken'),
| |
| format: 'json'
| |
| },
| |
| success: function(response) {
| |
| // console.log("Save response:", response);
| |
| if (response.edit && response.edit.result === 'Success') {
| |
| alert('データは正常に保存されました');
| |
| editMode = false;
| |
| drawControl.remove();
| |
| editButton.state('enable-edit');
| |
| saveButton.remove(); // saveButtonを非表示にする
| |
|
| |
| setTimeout(function() {
| |
| loadPinsFromWikiPage();
| |
| }, 1000);
| |
| } else {
| |
| alert('Error saving data: ' + JSON.stringify(response));
| |
| }
| |
| },
| |
| error: function(xhr, status, error) { | |
| console.error("Save error:", error);
| |
| // console.log("XHR status:", status);
| |
| // console.log("XHR response:", xhr.responseText);
| |
| alert('Error saving data: ' + error);
| |
| }
| |
| }); | | }); |
| }
| |
| map.on(L.Draw.Event.CREATED, function (event) {
| |
| var layer = event.layer;
| |
| if (layer instanceof L.Marker) {
| |
| layer.setIcon(iconDefinitions.icon1);
| |
| layer.options.popupData = {title: '', content: '', iconType: 'icon1'};
| |
| }
| |
| createEditablePopup(layer);
| |
| drawnItems.addLayer(layer);
| |
| });
| |
|
| |
|
| |
| ////////////////////////////////////////////////////
| |
| // ページ読み込み時にデータを読み込む
| |
| $(document).ready(function() {
| |
| setTimeout(function() {
| |
| map.invalidateSize();
| |
| loadPinsFromWikiPage();
| |
| }, 500); // 少し長めの遅延を設定
| |
| }); | | }); |
| </script> | | </script> |
|
| |
| </includeonly> | | </includeonly> |