「Widget:Custom map」の版間の差分

提供：メタファー リファンタジオ 攻略Wiki
移動先:案内、検索
編集の要約なし
編集の要約なし
1行目: 1行目:
<includeonly>
<includeonly>
<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>
   
    <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 type="text/javascript">
   
   
   
    let map;
    var drawnItems;
    var drawControl;
    var editMode = false;


<script src="https://dq.h1g.jp/leaflet/leaflet.js" ></script>
    // APIベースURLを定数として定義
<script src="https://dq.h1g.jp/img/dq10_offline/map/js/leaflet-easy-button.js"></script>
    const API_BASE_URL = location.origin.includes('prd-h1g-elb')
<script src="https://dq.h1g.jp/img/dq10_offline/map/js/leaflet-tag-filter-button.js"></script>
    ? 'https://prd-h1g-elb-2067013247.ap-northeast-1.elb.amazonaws.com/metaphor_refantazio'
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
     : 'https://default.api.url';
<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>
     window.savePopupContent = savePopupContent;
 
<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 type="text/javascript">
 
 
 
// グローバル変数の定義
let map;
let drawnItems;
let drawControl;
let editMode = false;
 
// APIベースURLを定数として定義
const API_BASE_URL = 'https://prd-h1g-elb-2067013247.ap-northeast-1.elb.amazonaws.com/metaphor_refantazio';
 
// API_BASE_URLの保護
Object.defineProperty(window, 'API_BASE_URL', {
     value: API_BASE_URL,
    writable: false,
    configurable: false
});
 
// マップ初期化前のクリーンアップ
function cleanupBeforeInit() {
    if (window.map) {
        map.remove();
        window.map = null;
     }
     if (window.drawnItems) {
        drawnItems.clearLayers();
        window.drawnItems = null;
    }
    ['editControl', 'drawControl', 'iconDefinitions'].forEach(varName => {
        if (window[varName]) {
            window[varName] = null;
        }
    });
}
 
// マップの初期化
function initializeMap() {
    // クリーンアップ
    cleanupBeforeInit();
      
      
     // 画像の設定
     // 表示する画像
     const imageBase = {
     var imageBase = {
        url: '<!--{$img}-->',
      url: '<!--{$img}-->',
        width: <!--{$imgwidth}-->,
      width: <!--{$imgwidth}-->,         // 画像のサイズ
        height: <!--{$imgheight}-->
      height: <!--{$imgheight}-->
     };
     };
 
   
     // 境界の設定
     // 地図初期化
     const imageBounds = L.latLngBounds(
     var imageBounds = L.latLngBounds(
        [0, 0],
      [0, 0],
        [imageBase.height, imageBase.width]
      [imageBase.height, imageBase.width],
     
     );
     );
 
      
     // マップインスタンスの作成
     map = L.map('map', {
     map = L.map('map', {
        crs: L.CRS.Simple,
      crs: L.CRS.Simple,
        maxBounds: imageBounds.pad(0.5),
      maxBounds: imageBounds.pad(0.5),
        minZoom: <!--{$minzoom}-->,
      minZoom: <!--{$minzoom}-->, // minZoomを0に設定
        maxZoom: <!--{$maxzoom}-->
      maxZoom: <!--{$maxzoom}-->,
   
     });
     });
     map.fitBounds(imageBounds);
     map.fitBounds(imageBounds);
     L.imageOverlay(imageBase.url, imageBounds, {
     L.imageOverlay(imageBase.url, imageBounds,{
        attribution: '<a href="https://h1g.jp/" target="_blank">【ヘイグ】</a>'
      attribution: '<a href="https://h1g.jp/" target="_blank">【ヘイグ】</a>'
     }).addTo(map);
     }).addTo(map);
 
   
     // drawnItemsの初期化（一度だけ）
    var drawnItems = new L.FeatureGroup();
     drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);
   
   
     // Leaflet.Draw
     var drawnItems = new L.FeatureGroup();
     map.addLayer(drawnItems);
     map.addLayer(drawnItems);
 
   
     return map;
     drawControl = new L.Control.Draw({
}
        edit: {
 
            featureGroup: drawnItems,
 
            poly: {
// Leaflet.Draw
                allowIntersection: false
var drawnItems = new L.FeatureGroup();
            }
map.addLayer(drawnItems);
        },
 
        draw: {
drawControl = new L.Control.Draw({
            polygon: false,
    edit: {
            polyline: false,
        featureGroup: drawnItems,
            rectangle: false,
         poly: {
            circle: true,
             allowIntersection: false
            marker: true,
            circlemarker: false
        }
    });
    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);
    draw: {
         drawnItems.addLayer(layer);
         polygon: false,
        if (layer instanceof L.Marker) {
        polyline: false,
            layer.openPopup();
        rectangle: false,
        circle: true,
        marker: true,
        circlemarker: false
    }
});
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);
         }
         }
     });
     });
}
   
//////////////////////////////////////////////////////////////
    //////////////////権限を確認
// アイコンの定義
    function checkUserGroup(group, callback) {
var iconDefinitions = {
        $.ajax({
    icon1: L.icon({
            url: API_BASE_URL + '/api.php',
      iconUrl: '<!--{$icon1|default:'https://dq.h1g.jp/img/marker-icon-img/marker-icon-blue.png'}-->',
            data: {
      shadowUrl: 'https://dq.h1g.jp/img/marker-icon-img/marker-shadow.png',
                action: 'query',
      iconSize: [25, 41],
                meta: 'userinfo',
      iconAnchor: [12, 41],
                uiprop: 'groups',
      popupAnchor: [1, -41],
                format: 'json'
      shadowSize: [41, 41]
            },
    }),
            type: 'GET',
    icon2: L.icon({
            success: function(data) {
      iconUrl: '<!--{$icon2|default:'https://dq.h1g.jp/img/marker-icon-img/marker-icon-red.png'}-->',
                var userGroups = data.query.userinfo.groups;
      shadowUrl: 'https://dq.h1g.jp/img/marker-icon-img/marker-shadow.png',
                var isInGroup = userGroups.indexOf(group) !== -1;
      iconSize: [25, 41],
                callback(isInGroup);
      iconAnchor: [12, 41],
            },
      popupAnchor: [1, -41],
            error: function() {
      shadowSize: [41, 41]
                console.error('Failed to check user group');
    }),
                callback(false);
    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],
    var iconDefinitions = {
      shadowSize: [41, 41]
        icon1: L.icon({
    }),
          iconUrl: '<!--{$icon1|default:'https://dq.h1g.jp/img/marker-icon-img/marker-icon-blue.png'}-->',
    icon4: L.icon({
          shadowUrl: 'https://dq.h1g.jp/img/marker-icon-img/marker-shadow.png',
      iconUrl: '<!--{$icon4|default:'https://dq.h1g.jp/img/marker-icon-img/marker-icon-green.png'}-->',
          iconSize: [25, 41],
      shadowUrl: 'https://dq.h1g.jp/img/marker-icon-img/marker-shadow.png',
          iconAnchor: [12, 41],
      iconSize: [25, 41],
          popupAnchor: [1, -41],
      iconAnchor: [12, 41],
          shadowSize: [41, 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'}-->',
    icon5: L.icon({
          shadowUrl: 'https://dq.h1g.jp/img/marker-icon-img/marker-shadow.png',
      iconUrl: '<!--{$icon5|default:'https://dq.h1g.jp/img/marker-icon-img/marker-icon-gold.png'}-->',
          iconSize: [25, 41],
      shadowUrl: 'https://dq.h1g.jp/img/marker-icon-img/marker-shadow.png',
          iconAnchor: [12, 41],
      iconSize: [25, 41],
          popupAnchor: [1, -41],
      iconAnchor: [12, 41],
          shadowSize: [41, 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'}-->',
    icon6: L.icon({
          shadowUrl: 'https://dq.h1g.jp/img/marker-icon-img/marker-shadow.png',
      iconUrl: '<!--{$icon6|default:'https://dq.h1g.jp/img/marker-icon-img/marker-icon-black.png'}-->',
          iconSize: [25, 41],
      shadowUrl: 'https://dq.h1g.jp/img/marker-icon-img/marker-shadow.png',
          iconAnchor: [12, 41],
      iconSize: [25, 41],
          popupAnchor: [1, -41],
      iconAnchor: [12, 41],
          shadowSize: [41, 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],
function createEditablePopup(layer) {
          shadowSize: [41, 41]
    var popupData = layer.options.popupData || {};
        }),
    var title = popupData.title || '';
        icon5: L.icon({
    var content = popupData.content || '';
          iconUrl: '<!--{$icon5|default:'https://dq.h1g.jp/img/marker-icon-img/marker-icon-gold.png'}-->',
    var iconType = popupData.iconType || 'icon1';
          shadowUrl: 'https://dq.h1g.jp/img/marker-icon-img/marker-shadow.png',
 
          iconSize: [25, 41],
    layer.on('popupopen', function() {
          iconAnchor: [12, 41],
        var popup = this.getPopup();
          popupAnchor: [1, -41],
        var popupData = this.options.popupData || {};
          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]
        })
    };
   
   
    // ポップアップの作成
    function createEditablePopup(layer) {
        var popupData = layer.options.popupData || {};
         var title = popupData.title || '';
         var title = popupData.title || '';
         var content = popupData.content || '';
         var content = popupData.content || '';
         var iconType = popupData.iconType || 'icon1';
         var iconType = popupData.iconType || 'icon1';
 
   
 
        layer.on('popupopen', function() {
 
            var popup = this.getPopup();
        // タイトルと内容が両方空の場合、ポップアップを表示しない
            var popupData = this.options.popupData || {};
        if (!editMode && title === '' && content === '') {
            var title = popupData.title || '';
            layer.closePopup();
            var content = popupData.content || '';
            // カーソルをデフォルトに設定
            var iconType = popupData.iconType || 'icon1';
            layer._icon.style.cursor = 'default';
   
             return;
   
   
            // タイトルと内容が両方空の場合、ポップアップを表示しない
            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);
         }
         }
 
    }
        if (editMode) { // 編集モードの場合のみtextareaを表示
   
            var iconSelector = '';
   
            if (layer instanceof L.Marker) {
   
                iconSelector = '<select id="icon-type">' +
   
                    '<option value="icon1"' + (iconType === 'icon1' ? ' selected' : '') + '>アイコン1</option>' +
    // MediaWikiコンテンツのレンダリング
                    '<option value="icon2"' + (iconType === 'icon2' ? ' selected' : '') + '>アイコン2</option>' +
    function renderMediaWikiContent(content) {
                    '<option value="icon3"' + (iconType === 'icon3' ? ' selected' : '') + '>アイコン3</option>' +
        var renderedContent = '';
                    '<option value="icon4"' + (iconType === 'icon4' ? ' selected' : '') + '>アイコン4</option>' +
        $.ajax({
                     '<option value="icon5"' + (iconType === 'icon5' ? ' selected' : '') + '>アイコン5</option>' +
            url: API_BASE_URL + '/api.php',
                    '<option value="icon6"' + (iconType === 'icon6' ? ' selected' : '') + '>アイコン6</option>' +
            data: {
                 '</select>';
                action: 'parse',
                text: content,
                format: 'json'
            },
            async: false,
            success: function(data) {
                renderedContent = data.parse.text['*'];
                // レンダリング後の画像処理
                setTimeout(function() {
                     initLightGallery(renderedContent);
                }, 100);
            },
            error: function() {
                 console.error('Failed to render MediaWiki content');
             }
             }
 
        });
            var editableContent =
        return renderedContent;
                '<div>' +
    }
                '<textarea id="popup-title" cols="60" rows="3" placeholder="タイトル">' + title + '</textarea>' +
   
                '<textarea id="popup-content" cols="60" rows="10" placeholder="内容">' + content + '</textarea>' +
   
                iconSelector +
    // LightGalleryの初期化を修正
                '<button onclick="savePopupContent(this)">保存</button>' +
    function initLightGallery(content) {
                '</div>';
        const popupContent = $('.leaflet-popup-content');
             popup.setContent(editableContent);
       
         } else {
        // 既存のLightGalleryインスタンスを破棄
            // 編集モードでない場合は表示用のコンテンツを設定
        if (popupContent.data('lightGallery')) {
            if (title === '' && content === '') {
             popupContent.data('lightGallery').destroy(true);
                layer.unbindPopup(); // タイトルと内容が空の場合はポップアップを表示しない
         }
             } else {
   
                 var displayContent = '<strong>' + title + '</strong><br>' + content;
        // 既存のlg-containerを削除
                var renderedContent = renderMediaWikiContent(displayContent);
        $('.lg-container').remove();
                popup.setContent(renderedContent);
       
        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,  // 背景のフェード時間
            });
         }
         }
    });
    // 既にポップアップが設定されている場合に備え、再設定
    if (!(title === '' && content === '')) {
        var displayContent = '<strong>' + title + '</strong><br>' + content;
        var renderedContent = renderMediaWikiContent(displayContent);
        layer.bindPopup(renderedContent);
     }
     }
}
   
 
   
 
    // ポップアップが閉じられたときの処理を追加
 
     map.on('popupclose', function(e) {
 
        const popupContent = $(e.popup.getContent());
// MediaWikiコンテンツのレンダリング
         if (popupContent.data('lightGallery')) {
function renderMediaWikiContent(content) {
             popupContent.data('lightGallery').destroy(true);
    var renderedContent = '';
     $.ajax({
        url: API_BASE_URL + '/api.php',
        data: {
            action: 'parse',
            text: content,
            format: 'json'
        },
        async: false,
        success: function(data) {
            renderedContent = data.parse.text['*'];
            // レンダリング後の画像処理
            setTimeout(function() {
                initLightGallery(renderedContent);
            }, 100);
         },
        error: function() {
             console.error('Failed to render MediaWiki content');
         }
         }
     });
     });
    return renderedContent;
}
// LightGalleryの初期化を修正
function initLightGallery(content) {
    const popupContent = $('.leaflet-popup-content');
      
      
     // 既存のLightGalleryインスタンスを破棄
     // MediaWikiの画像URLを最大サイズに変換する関数
     if (popupContent.data('lightGallery')) {
     function convertToFullSize(url) {
        popupContent.data('lightGallery').destroy(true);
        // MediaWikiのサムネイルURLをパースして最大サイズのURLに変換
        if (url.includes('/thumb/')) {
            // /thumb/を除去し、最後の/以降を削除して元のファイル名に戻す
            return url.replace('/thumb/', '/')
                    .replace(/\/\d+px-[^/]+$/, '');
        }
        return url;
     }
     }
    // 既存のlg-containerを削除
    $('.lg-container').remove();
      
      
     popupContent.find('img').each(function() {
     // ポップアップが開かれたときのイベントを追加
         const img = $(this);
    map.on('popupopen', function(e) {
        // gallery-itemクラスを持つdivで既に囲まれていない場合のみ処理
         setTimeout(function() {
        if (!img.parent().hasClass('gallery-item')) {
             initLightGallery(e.popup.getContent());
             let fullSizeUrl = convertToFullSize(img.attr('src'));
        }, 100);
            img.wrap('<div class="gallery-item" data-src="' + fullSizeUrl + '"></div>');
        }
     });
     });
 
   
     // LightGalleryを初期化（ナビゲーション矢印を非表示に）
   
     if (!popupContent.data('lightGallery')) {
     // マップのクリーンアップ処理も追加
         lightGallery(popupContent[0], {
     map.on('unload', function() {
            selector: '.gallery-item',
         $('.lg-container').remove();
             plugins: [],
        $('.leaflet-popup-content').each(function() {
            speed: 500,
             if ($(this).data('lightGallery')) {
            download: false,
                $(this).data('lightGallery').destroy(true);
            counter: false,
             }
            enableDrag: false,
            enableTouch: false,
            hideControlOnEnd: true,
            controls: false,
            prevHtml: '',
            nextHtml: '',
             backdropDuration: 300,  // 背景のフェード時間
         });
         });
    });
   
    /// スタイルを更新
    const styles = `
    <style>
    .gallery-item {
        cursor: pointer;
        display: inline-block;
     }
     }
}
    .gallery-item img {
 
        max-width: 200px;
 
        height: auto;
// ポップアップが閉じられたときの処理を追加
        transition: transform 0.3s ease;
map.on('popupclose', function(e) {
    }
    const popupContent = $(e.popup.getContent());
    .gallery-item:hover img {
     if (popupContent.data('lightGallery')) {
        transform: scale(1.05);
         popupContent.data('lightGallery').destroy(true);
     }
   
    .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 {
// MediaWikiの画像URLを最大サイズに変換する関数
         display: none !important;
function convertToFullSize(url) {
     // MediaWikiのサムネイルURLをパースして最大サイズのURLに変換
     if (url.includes('/thumb/')) {
         // /thumb/を除去し、最後の/以降を削除して元のファイル名に戻す
        return url.replace('/thumb/', '/')
                .replace(/\/\d+px-[^/]+$/, '');
     }
     }
     return url;
     </style>
}
     `;
 
      
// ポップアップが開かれたときのイベントを追加
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;
    function savePopupContent(button) {
         layer.setPopupContent(savedContent);
         var popup = button.closest('.leaflet-popup');
         layer.options.popupData = {title: title, content: text, iconType: iconType};
        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;
          
          
         // ポップアップを更新した後にLightGalleryを再初期化
         var layer = drawnItems.getLayers().find(function(layer) {
        setTimeout(function() {
             return layer.getPopup() && layer.getPopup().getElement() === popup;
             initLightGallery(savedContent);
         });
         }, 100);
          
          
         layer.closePopup();
         if (layer) {
        layer.openPopup();
            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) {
map.on(L.Draw.Event.EDITED, function (event) {
        var layers = event.layers;
    var layers = event.layers;
        layers.eachLayer(function (layer) {
    layers.eachLayer(function (layer) {
            drawnItems.addLayer(layer);
        drawnItems.addLayer(layer);
        });
     });
     });
});
   
 
    // 削除イベントのリスナーも追加
// 削除イベントのリスナーも追加
    map.on(L.Draw.Event.DELETED, function (event) {
map.on(L.Draw.Event.DELETED, function (event) {
        var layers = event.layers;
    var layers = event.layers;
        layers.eachLayer(function (layer) {
    layers.eachLayer(function (layer) {
            drawnItems.removeLayer(layer);
        drawnItems.removeLayer(layer);
        });
     });
     });
});
   
 
    // 編集ボタン
// 編集ボタン
    var editButton = L.easyButton({
var editButton = L.easyButton({
        states: [{
    states: [{
            stateName: 'enable-edit',
        stateName: 'enable-edit',
            icon: '<img src="https://dq.h1g.jp/img/marker-icon-img/edit-solid.svg">',
        icon: '<img src="https://dq.h1g.jp/img/marker-icon-img/edit-solid.svg">',
            title: 'マップを編集する',
        title: 'マップを編集する',
            onClick: function(btn, map) {
        onClick: function(btn, map) {
    //          checkUserGroup('map-edit-member', function(isInGroup) {
//          checkUserGroup('map-edit-member', function(isInGroup) {
              checkUserGroup('sysop', function(isInGroup) {
          checkUserGroup('sysop', function(isInGroup) {
    //          checkUserGroup('internal-staff', function(isInGroup) {
//          checkUserGroup('internal-staff', function(isInGroup) {
                if (isInGroup) {
            if (isInGroup) {
                        editMode = true;
                    editMode = true;
                        map.addControl(drawControl);
                    map.addControl(drawControl);
                        btn.state('disable-edit');
                    btn.state('disable-edit');
                        updateAllPopups();
                    updateAllPopups();
                        saveButton.addTo(map); // saveButtonを表示する
                    saveButton.addTo(map); // saveButtonを表示する
                    } else {
                } else {
    //                    alert('あなたには編集権限がありません。\n攻略に参加することでマップが編集できるようになります。');
//                    alert('あなたには編集権限がありません。\n攻略に参加することでマップが編集できるようになります。');
                        alert('あなたには編集権限がありません。');
                    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);
                 }
                 }
            });
        }
    }, {
        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() {
var saveButton = L.easyButton('<img src="https://dq.h1g.jp/img/marker-icon-img/save-solid.svg">', function() {
        if (editMode) {
    if (editMode) {
            var geoJSONData = convertToGeoJSON(drawnItems);
        var geoJSONData = convertToGeoJSON(drawnItems);
            if (geoJSONData) {
        if (geoJSONData) {
    //            console.log(geoJSONData);
//            console.log(geoJSONData);
                saveToWikiPage(geoJSONData);
            saveToWikiPage(geoJSONData);
                saveButton.remove(); // saveButtonを非表示にする
            saveButton.remove(); // saveButtonを非表示にする
            } else {
                alert('Error: Invalid GeoJSON data');
            }
         } else {
         } else {
             alert('Error: Invalid GeoJSON data');
             alert('Please enable edit mode before saving.');
         }
         }
     } else {
     }, '変更を保存');
        alert('Please enable edit mode before saving.');
   
    }
   
}, '変更を保存');
   
 
     
 
    function loadPinsFromWikiPage() {
 
        getMwToken()
 
            .then(function(token) {
function loadPinsFromWikiPage() {
                var geojsonPage = "<!--{$geojson}-->";
    getMwToken()
                var url = API_BASE_URL + '/api.php';
        .then(function(token) {
                console.log('Request URL:', url);
            var geojsonPage = "<!--{$geojson}-->";
   
            var url = API_BASE_URL + '/api.php';
                return $.ajax({
            console.log('Request URL:', url);
                    type: "GET",
 
                    url: url,
            return $.ajax({
                    data: {
                type: "GET",
                        action: 'query',
                url: url,
                        titles: geojsonPage,
                data: {
                        prop: 'revisions',
                    action: 'query',
                        rvprop: 'content',
                    titles: geojsonPage,
                        format: 'json',
                    prop: 'revisions',
                        // 明示的にwikiを指定
                    rvprop: 'content',
                        redirects: 0  // リダイレクトを防ぐ
                    format: 'json',
                    },
                    // 明示的にwikiを指定
                    headers: {
                    redirects: 0  // リダイレクトを防ぐ
                        'Authorization': 'Bearer ' + token
                },
                    }
                headers: {
                });
                    'Authorization': 'Bearer ' + token
            })
            .then(function(response) {
                try {
                    // レスポンスからページコンテンツを取得
                    const pages = response.query.pages;
                    const pageId = Object.keys(pages)[0];
                    const content = pages[pageId].revisions[0]['*'];
                   
                    // GeoJSONデータを抽出して処理
                    const geoJSONData = JSON.parse(content);
                    processGeoJSONData(geoJSONData);
                } catch (error) {
                    console.error("Error processing data:", error);
                    throw error;
                 }
                 }
            })
            .catch(function(error) {
                console.error("Error loading data:", error);
                // より詳細なエラー情報を表示
                console.error('Detailed error:', {
                    message: error.message,
                    status: error.status,
                    responseText: error.responseText
                });
             });
             });
        })
    }
         .then(function(response) {
   
             try {
   
                 // レスポンスからページコンテンツを取得
    function processGeoJSONData(geoJSON) {
                const pages = response.query.pages;
         drawnItems.clearLayers();
                const pageId = Object.keys(pages)[0];
   
                 const content = pages[pageId].revisions[0]['*'];
        L.geoJSON(geoJSON, {
             pointToLayer: function (feature, latlng) {
                 var iconType = feature.properties.iconType || 'icon1';
                 var icon = iconDefinitions[iconType] || iconDefinitions.icon1;
                  
                  
                 // GeoJSONデータを抽出して処理
                 if (feature.properties.radius) {
                const geoJSONData = JSON.parse(content);
                    return L.circle(latlng, {
                 processGeoJSONData(geoJSONData);
                        radius: feature.properties.radius,
             } catch (error) {
                        tags: feature.properties.tags
                 console.error("Error processing data:", error);
                    });
                 throw error;
                 } 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);
   
                 drawnItems.addLayer(layer);
             }
             }
        })
        .catch(function(error) {
            console.error("Error loading data:", error);
            // より詳細なエラー情報を表示
            console.error('Detailed error:', {
                message: error.message,
                status: error.status,
                responseText: error.responseText
            });
         });
         });
}
    }
 
   
 
   
function processGeoJSONData(geoJSON) {
     
     drawnItems.clearLayers();
   
 
   
    L.geoJSON(geoJSON, {
    //////////////////////////////////////////////////////////////////////////////
        pointToLayer: function (feature, latlng) {
    function convertToGeoJSON(drawnItems) {
             var iconType = feature.properties.iconType || 'icon1';
        var geoJSON = {
            var icon = iconDefinitions[iconType] || iconDefinitions.icon1;
            "type": "FeatureCollection",
           
            "features": []
             if (feature.properties.radius) {
        };
                 return L.circle(latlng, {
      
                     radius: feature.properties.radius,
        drawnItems.eachLayer(function(layer) {
                     tags: feature.properties.tags
            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 {
             } else {
                 return L.marker(latlng, {
                 // その他のタイプのレイヤーは無視する
                    icon: icon,
                 return;
                    tags: feature.properties.tags
                 });
             }
             }
        },
   
        onEachFeature: function (feature, layer) {
             geoJSON.features.push(feature);
             var popupContent = '<strong>' + feature.properties.title + '</strong><br>' + feature.properties.content;
        });
            layer.bindPopup(popupContent);
   
            layer.options.popupData = {
        // GeoJSONデータの有効性をチェック
                title: feature.properties.title,
        try {
                content: feature.properties.content,
            JSON.parse(JSON.stringify(geoJSON));
                iconType: feature.properties.iconType,
        } catch (error) {
                tags: feature.properties.tags
             console.error("Invalid GeoJSON data:", error);
            };
             return null;
             createEditablePopup(layer);
 
             drawnItems.addLayer(layer);
         }
         }
     });
      
}
        return JSON.stringify(geoJSON, null, 2); // 整形されたJSONを返す
 
    }
 
      
 
      
 
     function getTagFromIconType(iconType) {
 
         switch (iconType) {
//////////////////////////////////////////////////////////////////////////////
             case 'icon1':
function convertToGeoJSON(drawnItems) {
                return '<!--{$filter1|default:"分類1"}-->';
     var geoJSON = {
             case 'icon2':
        "type": "FeatureCollection",
                return '<!--{$filter2|default:"分類2"}-->';
        "features": []
             case 'icon3':
     };
                return '<!--{$filter3|default:"分類3"}-->';
 
            case 'icon4':
     drawnItems.eachLayer(function(layer) {
                return '<!--{$filter4|default:"分類4"}-->';
         var feature = layer.toGeoJSON();
             case 'icon5':
        var popupData = layer.options.popupData || {};
                 return '<!--{$filter5|default:"分類5"}-->';
        feature.properties = {
             case 'icon6':
             title: popupData.title || '',
                 return '<!--{$filter6|default:"分類6"}-->';
             content: popupData.content || '',
             default:
            iconType: popupData.iconType || 'icon1',
                return '';
             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を返す
}
function getTagFromIconType(iconType) {
    switch (iconType) {
        case 'icon1':
            return '<!--{$filter1|default:"分類1"}-->';
        case 'icon2':
            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 getMwToken() {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: API_BASE_URL + '/api.php',
            data: {
                action: 'query',
                meta: 'tokens',
                type: 'csrf',
                format: 'json'
            },
            type: 'GET',
            success: function(response) {
                if (response.query && response.query.tokens && response.query.tokens.csrftoken) {
                    resolve(response.query.tokens.csrftoken);
                } else {
                    reject(new Error('Failed to get token'));
                }
            },
            error: function(xhr, status, error) {
                reject(error);
            }
        });
    });
}
function saveToWikiPage(geoJSONData) {
    var formattedData = geoJSONData;
      
      
     // 保存前に新しいトークンを取得
      // フィルタボタンの定義
     getMwToken()
   
         .then(function(token) {
    // Leaflet.Control.TagFilterButton の設定
             return $.ajax({
    L.control.tagFilterButton({
                type: "POST",
        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 getMwToken() {
         return new Promise((resolve, reject) => {
             $.ajax({
                 url: API_BASE_URL + '/api.php',
                 url: API_BASE_URL + '/api.php',
                 data: {
                 data: {
                     action: 'edit',
                     action: 'query',
                     title: '<!--{$geojson}-->',
                     meta: 'tokens',
                     text: formattedData,
                     type: 'csrf',
                    token: token,
                     format: 'json'
                     format: 'json'
                },
                type: 'GET',
                success: function(response) {
                    if (response.query && response.query.tokens && response.query.tokens.csrftoken) {
                        resolve(response.query.tokens.csrftoken);
                    } else {
                        reject(new Error('Failed to get token'));
                    }
                },
                error: function(xhr, status, error) {
                    reject(error);
                 }
                 }
             });
             });
        })
        .then(function(response) {
            if (response.edit && response.edit.result === 'Success') {
                alert('データは正常に保存されました');
                editMode = false;
                drawControl.remove();
                editButton.state('enable-edit');
                saveButton.remove();
               
                // 保存成功後、新しいトークンで再読み込み
                getMwToken()
                    .then(function(newToken) {
                        loadPinsFromWikiPage(newToken);
                    })
                    .catch(function(error) {
                        console.error("Failed to get token for reload:", error);
                    });
            } else {
                throw new Error('保存に失敗しました');
            }
        })
        .catch(function(error) {
            console.error("Save error:", error);
            alert('データの保存に失敗しました: ' + error.message);
         });
         });
}
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() {
    // マップの初期化
    map = initializeMap();
      
      
     // APIリクエストのインターセプター
     function saveToWikiPage(geoJSONData) {
    const originalAjax = $.ajax;
         var formattedData = geoJSONData;
    $.ajax = function(settings) {
          
         if (typeof settings.url === 'string') {
         // 保存前に新しいトークンを取得
            const requestUrl = settings.url.startsWith('http') ?
                settings.url :
                API_BASE_URL + settings.url;
           
            if (!requestUrl.includes(API_BASE_URL.split('/').pop())) {
                console.warn('Incorrect Wiki URL detected, correcting...');
                settings.url = settings.url.replace(
                    /\/[^\/]+\/api\.php/,
                    '/' + API_BASE_URL.split('/').pop() + '/api.php'
                );
            }
         }
         return originalAjax.apply(this, arguments);
    };
 
    // データの読み込み
    setTimeout(function() {
        map.invalidateSize();
         getMwToken()
         getMwToken()
             .then(function(token) {
             .then(function(token) {
                 console.log('Initial token obtained');
                 return $.ajax({
                 loadPinsFromWikiPage(token);
                    type: "POST",
                    url: API_BASE_URL + '/api.php',
                    data: {
                        action: 'edit',
                        title: '<!--{$geojson}-->',
                        text: formattedData,
                        token: token,
                        format: 'json'
                    }
                });
            })
            .then(function(response) {
                 if (response.edit && response.edit.result === 'Success') {
                    alert('データは正常に保存されました');
                    editMode = false;
                    drawControl.remove();
                    editButton.state('enable-edit');
                    saveButton.remove();
                   
                    // 保存成功後、新しいトークンで再読み込み
                    getMwToken()
                        .then(function(newToken) {
                            loadPinsFromWikiPage(newToken);
                        })
                        .catch(function(error) {
                            console.error("Failed to get token for reload:", error);
                        });
                } else {
                    throw new Error('保存に失敗しました');
                }
             })
             })
             .catch(function(error) {
             .catch(function(error) {
                 console.error("Failed to get initial token:", error);
                 console.error("Save error:", error);
                 alert('データの読み込みに失敗しました。ページを再読み込みしてください。');
                 alert('データの保存に失敗しました: ' + error.message);
             });
             });
     }, 500);
     }
   
   
   
   
    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();
            // 初期読み込み時にトークンを取得してからデータを読み込む
            getMwToken()
                .then(function(token) {
                    console.log('Initial token obtained');
                    loadPinsFromWikiPage(token);
                })
                .catch(function(error) {
                    console.error("Failed to get initial token:", error);
                    alert('データの読み込みに失敗しました。ページを再読み込みしてください。');
                });
        }, 500);
    });
   
////////////////////////////////////////////////////
    // マップの初期化
    $(document).ready(function() {
    if (map) {
        map.off();
        map.remove();
    }
    $('.lg-container').remove(); // LightGalleryもクリーンアップ
    initMap();  // マップの再初期化
});
});
</script>


</includeonly>
function initMap() {
    map = L.map('map', { /* 初期設定 */ });
    drawnItems = new L.FeatureGroup();
    map.addLayer(drawnItems);
 
    map.on('unload', function() {
        drawnItems.clearLayers();
        $('.lg-container').remove();
    });
 
    // その他の初期設定
    loadPinsFromWikiPage();
}
 
    window.addEventListener('beforeunload', function() {
    if (map) {
        map.off();
        map.remove();
    }
    localStorage.removeItem('MediaWikiModuleStore');  // LocalStorageのクリーンアップ
    document.cookie = "rootwikimwuser-sessionId=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
});
    </script>
   
    </includeonly>

2024年11月10日 (日) 17:23時点における版

「https://www.h1g.jp/metaphor_refantazio/index.php?title=Widget:Custom_map&oldid=4659」から取得