|
|
| 19行目: |
19行目: |
| <script type="text/javascript"> | | <script type="text/javascript"> |
|
| |
|
| // グローバル変数の定義
| | |
| | |
| let map; | | let map; |
| let drawnItems;
| | var drawnItems; |
| let drawControl;
| | var drawControl; |
| let editMode = false;
| | var editMode = false; |
| | |
| // APIベースURLを定数として定義 | | // APIベースURLを定数として定義 |
| const API_BASE_URL = 'https://prd-h1g-elb-2067013247.ap-northeast-1.elb.amazonaws.com/metaphor_refantazio'; | | const API_BASE_URL = 'https://prd-h1g-elb-2067013247.ap-northeast-1.elb.amazonaws.com/metaphor_refantazio'; |
|
| |
|
| // API_BASE_URLの保護
| | window.savePopupContent = savePopupContent; |
| Object.defineProperty(window, 'API_BASE_URL', {
| |
| value: API_BASE_URL,
| |
| writable: false,
| |
| configurable: false
| |
| });
| |
|
| |
|
| // マップ初期化前のクリーンアップ | | // 表示する画像 |
| function cleanupBeforeInit() {
| | var imageBase = { |
| if (window.map) {
| | url: '<!--{$img}-->', |
| map.remove();
| | width: <!--{$imgwidth}-->, // 画像のサイズ |
| window.map = null;
| | height: <!--{$imgheight}--> |
| }
| | }; |
| if (window.drawnItems) {
| |
| drawnItems.clearLayers();
| |
| window.drawnItems = null;
| |
| }
| |
| ['editControl', 'drawControl', 'iconDefinitions'].forEach(varName => {
| |
| if (window[varName]) {
| |
| window[varName] = null;
| |
| }
| |
| });
| |
| }
| |
|
| |
|
| // マップの初期化 | | // 地図初期化 |
| function initializeMap() {
| | var imageBounds = L.latLngBounds( |
| // クリーンアップ
| | [0, 0], |
| cleanupBeforeInit();
| | [imageBase.height, imageBase.width], |
|
| | |
| // 画像の設定
| | ); |
| const imageBase = {
| |
| url: '<!--{$img}-->',
| |
| width: <!--{$imgwidth}-->,
| |
| height: <!--{$imgheight}-->
| |
| };
| |
|
| |
|
| // 境界の設定
| | map = L.map('map', { |
| const imageBounds = L.latLngBounds(
| | crs: L.CRS.Simple, |
| [0, 0],
| | maxBounds: imageBounds.pad(0.5), |
| [imageBase.height, imageBase.width]
| | minZoom: <!--{$minzoom}-->, // minZoomを0に設定 |
| );
| | maxZoom: <!--{$maxzoom}-->, |
|
| |
|
| // マップインスタンスの作成
| | }); |
| map = L.map('map', {
| | map.fitBounds(imageBounds); |
| crs: L.CRS.Simple,
| | L.imageOverlay(imageBase.url, imageBounds,{ |
| maxBounds: imageBounds.pad(0.5),
| | attribution: '<a href="https://h1g.jp/" target="_blank">【ヘイグ】</a>' |
| minZoom: <!--{$minzoom}-->,
| | }).addTo(map); |
| maxZoom: <!--{$maxzoom}-->
| |
| });
| |
|
| |
|
| // 画像オーバーレイの追加
| | var drawnItems = new L.FeatureGroup(); |
| L.imageOverlay(imageBase.url, imageBounds, {
| | map.addLayer(drawnItems); |
| attribution: '<a href="https://h1g.jp/" target="_blank">【ヘイグ】</a>'
| |
| }).addTo(map);
| |
|
| |
|
| // マップを境界に合わせる
| |
| map.fitBounds(imageBounds);
| |
|
| |
|
| // drawnItemsの初期化（一度だけ）
| | // Leaflet.Draw |
| drawnItems = new L.FeatureGroup();
| | var drawnItems = new L.FeatureGroup(); |
| map.addLayer(drawnItems);
| | map.addLayer(drawnItems); |
|
| |
|
| // drawControlの設定
| | drawControl = new L.Control.Draw({ |
| drawControl = new L.Control.Draw({
| | edit: { |
| edit: {
| | featureGroup: drawnItems, |
| featureGroup: drawnItems,
| | poly: { |
| poly: { allowIntersection: false }
| | allowIntersection: false |
| },
| |
| draw: {
| |
| polygon: false, | |
| polyline: false,
| |
| rectangle: false,
| |
| circle: true,
| |
| marker: true,
| |
| circlemarker: false
| |
| } | | } |
| }); | | }, |
| | | draw: { |
| // 初期状態では編集モードを無効に | | polygon: false, |
| drawControl.remove();
| | polyline: false, |
| | | rectangle: false, |
| // フィルターボタンの追加
| | circle: true, |
| L.control.tagFilterButton({
| | marker: true, |
| data: [ | | circlemarker: false |
| '<!--{$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);
| |
| | |
| return map;
| |
| }
| |
| | |
| // ページ読み込み時の処理
| |
| $(document).ready(function() {
| |
| // 必要な関数をwindowに登録
| |
| window.savePopupContent = savePopupContent;
| |
|
| |
| // マップの初期化
| |
| map = initializeMap();
| |
|
| |
| // APIリクエストのインターセプター
| |
| const originalAjax = $.ajax;
| |
| $.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() | |
| .then(function(token) {
| |
| console.log('Initial token obtained');
| |
| loadPinsFromWikiPage(token);
| |
| })
| |
| .catch(function(error) {
| |
| console.error("Failed to get initial token:", error);
| |
| alert('データの読み込みに失敗しました。ページを再読み込みしてください。');
| |
| });
| |
| }, 500); | |
| }); | | }); |
| | map.addControl(drawControl); |
|
| |
|
| | // 初期状態では編集モードを無効にする |
| | drawControl.remove(); |
|
| |
|
| map.on(L.Draw.Event.CREATED, function (event) { | | map.on(L.Draw.Event.CREATED, function (event) { |