@maplat/ui 0.10.4 → 0.10.6

package/locales/zh-TW/translation.json

@@ -1,65 +1,65 @@
-{
-    "control": {
-        "compass": "停止旋轉",
-        "info": "顯示地圖信息",
-        "zoom": "地圖尺寸調整",
-        "gps": "獲取GPS位置",
-        "home": "返回起點",
-        "help": "查看幫助",
-        "trans": "調整地圖透明度",
-        "share": "分享",
-        "hide_marker": "隱藏標記",
-        "border": "顯示地圖邊界"
-    },
-    "html": {
-        "close": "關閉",
-        "app_loading_body": "正在上傳中……",
-        "acquiring_gps": "獲取GPS數據中",
-        "author": "作者",
-        "createdAt": "創建日期",
-        "era": "對象所處時期",
-        "contributor": "收藏捐贈者",
-        "mapper": "製圖人",
-        "license": "地圖許可",
-        "dataLicense": "映射數據許可",
-        "attr": "地圖版權",
-        "dataAttr": "映射數據版權",
-        "reference": "來源參考",
-        "description": "說明",
-        "cache_handle": "地圖緩存佔用",
-        "cache_delete": "清除緩存",
-        "cache_fetch": "批量下載",
-        "cache_cancel": "停止下載",
-        "cache_processing": "正在計算...",
-        "help_title": "Maplat 幫助",
-        "help_using_maplat": "本站點是使用開源歷史地圖<a href='https://github.com/code4history/Maplat/wiki' target='_blank'>Maplat</a>為基礎製作的。",
-        "help_operation_title": "地圖的操作方法",
-        "help_operation_content": "用電腦訪問時可以用鼠標拖動地圖。使用手機訪問時用手指拖動地圖。 <br>調整地圖大小時，用電腦時，點擊左上角的<img src='${plus.png}'> <img src='${minus.png}'>按鈕來操作，使用手機時使用兩個手指縮放來進行操作。 <br>在手機上可以使用兩個手指按住旋轉地圖。 <br>按下<img src='${home.png}'>按鈕可以返回地圖的起點。 <br><img src='${compass.png}'>按鈕上表的羅盤顯示著當前方向與北方向的角度，如果按下這個按鈕，地圖的旋轉角度會恢復成正北方向表示。",
-        "help_selection_title": "地圖的切換選擇方法",
-        "help_selection_content": "在頁面的左下和右下的位置，可以找到像<img src='${overlay.png}'>這樣的可滑動的縮略圖。可以選擇想查看的地圖。 <br>左右滑動對想看的地圖進行選擇，點擊後即可切換成想看的地圖。 <br>在左下的地圖滑塊是基礎的地圖(當前年代)，右下邊可選擇的地圖滑塊是手繪地圖或歷史地圖。",
-        "help_gps_title": "在地圖上顯示您的位置",
-        "help_gps_content": "按下<img src='${gps.png}'>按鈕，開啟GPS功能，可以用<img src='${bluedot.png}'>在地圖上顯示您所在的位置。 <br>再次按下時，會關閉GPS功能。 <br>如果您所在地沒有在地圖上顯示出來的話，會提示信息，並且會自動關閉GPS功能。",
-        "help_poi_title": "場所信息顯示",
-        "help_poi_content": "在地圖上顯示<img src='${defaultpin.png}'>這樣標記的地方，這個支持拓展信息顯示的地方。 <br>標記點擊時，會顯示支持的信息。",
-        "help_etc_title": "其它",
-        "help_etc_attr": "<img src='${attr.png}'>按鈕 顯示中地圖的製作者、所有者、許可等各種信息顯示。",
-        "help_etc_help": "<img src='${help.png}'>按鈕: 顯示這個幫助信息。",
-        "help_share_help": "<img src='${share.png}'>按鈕: 顯示向SNS等其它應用分享的頁面。",
-        "help_etc_hide_marker": "<img src='${hide_marker.png}'>按鈕: 顯示標記/隱藏標記 的功能切換。 <br>長按按鈕，會在畫面上按順序對每種標記進行顯示/隱藏的切換操作。",
-        "help_etc_border": "<img src='${border.png}'>按鈕: 地圖的邊界顯示。 <br>在邊界內點擊也可以切換地圖顯示。 <br>在電腦上操作可以用鼠標在地圖上上移動選擇後點擊進行地圖切換顯示，手機上在選中地圖後，再一次點擊後進行地圖切換顯示。",
-        "help_etc_slider": "<img src='${slider.png}'>側邊欄: 顯示中的地圖的透明度調整，可以將背景中的地圖透明地看到。 <br>只支持在手繪地圖、歷史地圖中使用，基本地圖顯示時不可用。",
-        "share_title": "分享",
-        "share_app_title": "分享此應用",
-        "share_state_title": "分享現在所在位置",
-        "share_copy": "複製",
-        "hide_marker_title": "標記項顯示切換"
-    },
-    "app": {
-        "fake_explanation": "※以%1$s為中心，超出%2$dkm以上時、以%1$s為中心使用模糊經緯度表示周邊範圍。",
-        "acquiring_gps_desc": "GPS數據獲取中……",
-        "out_of_map": "超出地圖範圍",
-        "out_of_map_desc": "GPS數據獲取結果已超出地圖範圍外。 GPS功能已關閉。",
-        "out_of_map_area": "已經超出地圖範圍以外。請返回地圖標準位置。",
-        "copy_toast": "已經復製到剪貼板。"
-    }
-}
+{
+    "control": {
+        "compass": "停止旋轉",
+        "info": "顯示地圖信息",
+        "zoom": "地圖尺寸調整",
+        "gps": "獲取GPS位置",
+        "home": "返回起點",
+        "help": "查看幫助",
+        "trans": "調整地圖透明度",
+        "share": "分享",
+        "hide_marker": "隱藏標記",
+        "border": "顯示地圖邊界"
+    },
+    "html": {
+        "close": "關閉",
+        "app_loading_body": "正在上傳中……",
+        "acquiring_gps": "獲取GPS數據中",
+        "author": "作者",
+        "createdAt": "創建日期",
+        "era": "對象所處時期",
+        "contributor": "收藏捐贈者",
+        "mapper": "製圖人",
+        "license": "地圖許可",
+        "dataLicense": "映射數據許可",
+        "attr": "地圖版權",
+        "dataAttr": "映射數據版權",
+        "reference": "來源參考",
+        "description": "說明",
+        "cache_handle": "地圖緩存佔用",
+        "cache_delete": "清除緩存",
+        "cache_fetch": "批量下載",
+        "cache_cancel": "停止下載",
+        "cache_processing": "正在計算...",
+        "help_title": "Maplat 幫助",
+        "help_using_maplat": "本站點是使用開源歷史地圖<a href='https://github.com/code4history/Maplat/wiki' target='_blank'>Maplat</a>為基礎製作的。",
+        "help_operation_title": "地圖的操作方法",
+        "help_operation_content": "用電腦訪問時可以用鼠標拖動地圖。使用手機訪問時用手指拖動地圖。 <br>調整地圖大小時，用電腦時，點擊左上角的<img src='${plus.png}'> <img src='${minus.png}'>按鈕來操作，使用手機時使用兩個手指縮放來進行操作。 <br>在手機上可以使用兩個手指按住旋轉地圖。 <br>按下<img src='${home.png}'>按鈕可以返回地圖的起點。 <br><img src='${compass.png}'>按鈕上表的羅盤顯示著當前方向與北方向的角度，如果按下這個按鈕，地圖的旋轉角度會恢復成正北方向表示。",
+        "help_selection_title": "地圖的切換選擇方法",
+        "help_selection_content": "在頁面的左下和右下的位置，可以找到像<img src='${overlay.png}'>這樣的可滑動的縮略圖。可以選擇想查看的地圖。 <br>左右滑動對想看的地圖進行選擇，點擊後即可切換成想看的地圖。 <br>在左下的地圖滑塊是基礎的地圖(當前年代)，右下邊可選擇的地圖滑塊是手繪地圖或歷史地圖。",
+        "help_gps_title": "在地圖上顯示您的位置",
+        "help_gps_content": "按下<img src='${gps.png}'>按鈕，開啟GPS功能，可以用<img src='${bluedot.png}'>在地圖上顯示您所在的位置。 <br>再次按下時，會關閉GPS功能。 <br>如果您所在地沒有在地圖上顯示出來的話，會提示信息，並且會自動關閉GPS功能。",
+        "help_poi_title": "場所信息顯示",
+        "help_poi_content": "在地圖上顯示<img src='${defaultpin.png}'>這樣標記的地方，這個支持拓展信息顯示的地方。 <br>標記點擊時，會顯示支持的信息。",
+        "help_etc_title": "其它",
+        "help_etc_attr": "<img src='${attr.png}'>按鈕 顯示中地圖的製作者、所有者、許可等各種信息顯示。",
+        "help_etc_help": "<img src='${help.png}'>按鈕: 顯示這個幫助信息。",
+        "help_share_help": "<img src='${share.png}'>按鈕: 顯示向SNS等其它應用分享的頁面。",
+        "help_etc_hide_marker": "<img src='${hide_marker.png}'>按鈕: 顯示標記/隱藏標記 的功能切換。 <br>長按按鈕，會在畫面上按順序對每種標記進行顯示/隱藏的切換操作。",
+        "help_etc_border": "<img src='${border.png}'>按鈕: 地圖的邊界顯示。 <br>在邊界內點擊也可以切換地圖顯示。 <br>在電腦上操作可以用鼠標在地圖上上移動選擇後點擊進行地圖切換顯示，手機上在選中地圖後，再一次點擊後進行地圖切換顯示。",
+        "help_etc_slider": "<img src='${slider.png}'>側邊欄: 顯示中的地圖的透明度調整，可以將背景中的地圖透明地看到。 <br>只支持在手繪地圖、歷史地圖中使用，基本地圖顯示時不可用。",
+        "share_title": "分享",
+        "share_app_title": "分享此應用",
+        "share_state_title": "分享現在所在位置",
+        "share_copy": "複製",
+        "hide_marker_title": "標記項顯示切換"
+    },
+    "app": {
+        "fake_explanation": "※以%1$s為中心，超出%2$dkm以上時、以%1$s為中心使用模糊經緯度表示周邊範圍。",
+        "acquiring_gps_desc": "GPS數據獲取中……",
+        "out_of_map": "超出地圖範圍",
+        "out_of_map_desc": "GPS數據獲取結果已超出地圖範圍外。 GPS功能已關閉。",
+        "out_of_map_area": "已經超出地圖範圍以外。請返回地圖標準位置。",
+        "copy_toast": "已經復製到剪貼板。"
+    }
+}

package/package.json

@@ -1,105 +1,106 @@
-{
-  "name": "@maplat/ui",
-  "version": "0.10.4",
-  "description": "Maplat is the cool Historical Map/Illustrated Map Viewer.\nIt can transform each map coordinates with nonlinear but homeomorphic projection and makes possible that the maps can collaborate with GPS/accurate maps, without distorting original maps.",
-  "main": "src/index.js",
-  "module": "src/index.js",
-  "files": [
-    "src/",
-    "dist/",
-    "legacy/",
-    "less/",
-    "parts/",
-    "fonts/",
-    "locales/"
-  ],
-  "scripts": {
-    "server": "webpack-cli serve --config ./webpack_config/webpack.config.standard.dev.js --mode=development",
-    "server:packed": "npm run freeze && webpack-cli serve --config ./webpack_config/webpack.config.packed.dev.js --mode=development",
-    "build": "npm run build:standard && npm run build:packed",
-    "build:standard": "webpack --color --progress --config ./webpack_config/webpack.config.standard.js",
-    "build:packed": "npm run freeze && webpack --config ./webpack_config/webpack.config.packed.js",
-    "zip": "gulp zip",
-    "test": "jest",
-    "preversion": "npm run lint",
-    "version": "npm run build && npm run zip && git add -A",
-    "freeze": "node bin/freezer.js",
-    "lint": "npm run lint:eslint && npm run lint:prettier",
-    "lint:eslint": "eslint \"{src,spec}/**/*.js\" --fix",
-    "lint:prettier": "prettier \"./{src,spec}/**/*.js\" --write",
-    "git_switch": "gulp git_switch"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/code4history/Maplat.git"
-  },
-  "keywords": [
-    "warp",
-    "GIS"
-  ],
-  "author": "Kohei Otsuka, Code for History",
-  "license": "Maplat Limited License 1.1",
-  "bugs": {
-    "url": "https://github.com/code4history/Maplat/issues"
-  },
-  "homepage": "https://github.com/code4history/Maplat/wiki",
-  "dependencies": {
-    "@maplat/core": "^0.10.5",
-    "@maplat/tin": "^0.9.4",
-    "@turf/turf": "^6.5.0",
-    "caniuse-lite": "^1.0.30001431",
-    "lodash.template": "^4.5.0",
-    "ol": "^6.14.1",
-    "ol-contextmenu": "^4.1.0",
-    "swiper": "^6.7.1",
-    "swiper4": "npm:swiper@^4.5.1",
-    "weiwudi": "^0.1.4"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.17.10",
-    "@babel/core": "^7.18.2",
-    "@babel/preset-env": "^7.18.2",
-    "babel-jest": "^28.1.0",
-    "babel-loader": "^8.2.5",
-    "clean-webpack-plugin": "^4.0.0",
-    "concaveman": "https://github.com/grassick/concaveman#patch-1",
-    "copy-webpack-plugin": "^6.4.1",
-    "core-js": "^3.22.7",
-    "css-loader": "^5.2.6",
-    "css-minimizer-webpack-plugin": "^4.2.2",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-loader": "^4.0.2",
-    "eslint-plugin-jest": "^26.3.0",
-    "file-loader": "^6.2.0",
-    "fs-extra": "^10.1.0",
-    "gulp": "^4.0.2",
-    "gulp-cli": "^2.3.0",
-    "gulp-zip": "^5.1.0",
-    "html-webpack-plugin": "^5.5.0",
-    "jest": "^28.1.0",
-    "jest-canvas-mock": "^2.3.1",
-    "less": "^4.1.2",
-    "less-loader": "^11.0.0",
-    "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "^2.6.0",
-    "prettier": "^2.6.2",
-    "strip-whitespace-loader": "github:kochizufan/strip-whitespace-loader#fix_dq_npm",
-    "terser-webpack-plugin": "^5.3.1",
-    "url-loader": "^4.1.1",
-    "webpack": "^5.72.1",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.11.1",
-    "workbox-build": "^6.5.4",
-    "workbox-cli": "^6.5.4",
-    "workbox-core": "^6.5.4",
-    "workbox-expiration": "^6.5.4",
-    "workbox-precaching": "^6.5.4",
-    "workbox-routing": "^6.5.4",
-    "workbox-strategies": "^6.5.4",
-    "workbox-webpack-plugin": "^6.5.4"
-  },
-  "resolutions": {
-    "concaveman": "https://github.com/grassick/concaveman#patch-1"
-  }
-}
+{
+  "name": "@maplat/ui",
+  "version": "0.10.6",
+  "description": "Maplat is the cool Historical Map/Illustrated Map Viewer.\nIt can transform each map coordinates with nonlinear but homeomorphic projection and makes possible that the maps can collaborate with GPS/accurate maps, without distorting original maps.",
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "files": [
+    "src/",
+    "dist/",
+    "legacy/",
+    "less/",
+    "parts/",
+    "fonts/",
+    "locales/"
+  ],
+  "scripts": {
+    "server": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack-cli serve --config ./webpack_config/webpack.config.standard.dev.js --mode=development",
+    "server:packed": "cross-env NODE_OPTIONS=--openssl-legacy-provider npm run freeze && cross-env NODE_OPTIONS=--openssl-legacy-provider webpack-cli serve --config ./webpack_config/webpack.config.packed.dev.js --mode=development",
+    "build": "npm run build:standard && npm run build:packed",
+    "build:standard": "cross-env NODE_OPTIONS=--openssl-legacy-provider webpack --color --progress --config ./webpack_config/webpack.config.standard.js",
+    "build:packed": "cross-env NODE_OPTIONS=--openssl-legacy-provider npm run freeze && cross-env NODE_OPTIONS=--openssl-legacy-provider webpack --config ./webpack_config/webpack.config.packed.js",
+    "zip": "gulp zip",
+    "test": "jest",
+    "preversion": "npm run lint",
+    "version": "npm run build && npm run zip && git add -A",
+    "freeze": "node bin/freezer.js",
+    "lint": "npm run lint:eslint && npm run lint:prettier",
+    "lint:eslint": "eslint \"{src,spec}/**/*.js\" --fix",
+    "lint:prettier": "prettier \"./{src,spec}/**/*.js\" --write",
+    "git_switch": "gulp git_switch"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/code4history/Maplat.git"
+  },
+  "keywords": [
+    "warp",
+    "GIS"
+  ],
+  "author": "Kohei Otsuka, Code for History",
+  "license": "Maplat Limited License 1.1",
+  "bugs": {
+    "url": "https://github.com/code4history/Maplat/issues"
+  },
+  "homepage": "https://github.com/code4history/Maplat/wiki",
+  "dependencies": {
+    "@maplat/core": "https://github.com/code4history/MaplatCore#yamato_koriyama_4",
+    "@maplat/tin": "^0.9.4",
+    "@turf/turf": "^6.5.0",
+    "caniuse-lite": "^1.0.30001431",
+    "lodash.template": "^4.5.0",
+    "ol": "^6.14.1",
+    "ol-contextmenu": "^4.1.0",
+    "swiper": "^6.7.1",
+    "swiper4": "npm:swiper@^4.5.1",
+    "weiwudi": "^0.1.4"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.18.2",
+    "@babel/preset-env": "^7.18.2",
+    "babel-jest": "^28.1.0",
+    "babel-loader": "^8.2.5",
+    "clean-webpack-plugin": "^4.0.0",
+    "concaveman": "https://github.com/grassick/concaveman#patch-1",
+    "copy-webpack-plugin": "^6.4.1",
+    "core-js": "^3.22.7",
+    "cross-env": "^7.0.3",
+    "css-loader": "^5.2.6",
+    "css-minimizer-webpack-plugin": "^4.2.2",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-loader": "^4.0.2",
+    "eslint-plugin-jest": "^26.3.0",
+    "file-loader": "^6.2.0",
+    "fs-extra": "^10.1.0",
+    "gulp": "^4.0.2",
+    "gulp-cli": "^2.3.0",
+    "gulp-zip": "^5.1.0",
+    "html-webpack-plugin": "^5.5.0",
+    "jest": "^28.1.0",
+    "jest-canvas-mock": "^2.3.1",
+    "less": "^4.1.2",
+    "less-loader": "^11.0.0",
+    "lodash": "^4.17.21",
+    "mini-css-extract-plugin": "^2.6.0",
+    "prettier": "^2.6.2",
+    "strip-whitespace-loader": "github:kochizufan/strip-whitespace-loader#fix_dq_npm",
+    "terser-webpack-plugin": "^5.3.1",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.72.1",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.11.1",
+    "workbox-build": "^6.5.4",
+    "workbox-cli": "^6.5.4",
+    "workbox-core": "^6.5.4",
+    "workbox-expiration": "^6.5.4",
+    "workbox-precaching": "^6.5.4",
+    "workbox-routing": "^6.5.4",
+    "workbox-strategies": "^6.5.4",
+    "workbox-webpack-plugin": "^6.5.4"
+  },
+  "resolutions": {
+    "concaveman": "https://github.com/grassick/concaveman#patch-1"
+  }
+}

package/src/index.js

@@ -1,5 +1,6 @@
 import { absoluteUrl } from "./absolute_url";
 import { Swiper } from "./swiper_ex";
+import { Navigation, Pagination } from "swiper";
 import EventTarget from "ol/events/Target";
 import page from "../legacy/page";
 import bsn from "../legacy/bootstrap-native";
@@ -31,6 +32,7 @@ import { NowMap } from "@maplat/core/lib/source/nowmap";
 import Weiwudi from "weiwudi";
 import { normalizeArg } from "./function";
 import pointer from "./pointer_images";
+Swiper.use([Navigation, Pagination]);
 
 // Maplat UI Class
 export class MaplatUi extends EventTarget {
@@ -154,6 +156,7 @@ export class MaplatUi extends EventTarget {
     const enableSplash = !ui.core.initialRestore.mapID;
     const restoreTransparency = ui.core.initialRestore.transparency;
     const enableOutOfMap = !appOption.presentation_mode;
+    const enablePoiHtmlNoScroll = appOption.enablePoiHtmlNoScroll;
 
     if (appOption.enableShare) {
       ui.core.mapDivDocument.classList.add("enable_share");
@@ -271,12 +274,21 @@ export class MaplatUi extends EventTarget {
         </d> 
 
         <d c="modal_poi_content">
-          <d c="poi_web embed-responsive embed-responsive-60vh">
-            <iframe c="poi_iframe iframe_poi" frameborder="0" src=""></iframe>
+          <d c="poi_web${
+            enablePoiHtmlNoScroll
+              ? ""
+              : " embed-responsive embed-responsive-60vh"
+          }">
+            <iframe c="poi_iframe iframe_poi" frameborder="0" src=""${
+              enablePoiHtmlNoScroll
+                ? ` onload="window.addEventListener('message', (e) =>{if (e.data[0] == 'setHeight') {console.log(this.style.height = e.data[1]);}});" scrolling="no"`
+                : ""
+            }></iframe>
           </d> 
           <d c="poi_data hide">
             <d c="col-xs-12 swiper-container poi_img_swiper">
               <d c="swiper-wrapper"></d>
+              <d c="swiper-pagination poi-pagination"></d>
               <d c="swiper-button-next poi-img-next"></d>
               <d c="swiper-button-prev poi-img-prev"></d>
             </d>
@@ -1416,13 +1428,25 @@ enable-background="new 0 0 10 10" xml:space="preserve">
         iframe.addEventListener("load", function loadEvent(event) {
           event.currentTarget.removeEventListener(event.type, loadEvent);
           const cssLink = createElement(
-            '<style type="text/css">html, body { height: 100vh; }\n img { width: 100vw; }</style>'
+            '<style type="text/css">html, body { height: 100vh; }\n img { width: 100%; }</style>'
+          );
+          const jsLink = createElement(
+            `<script>
+              const heightGetter = document.querySelector("#heightGetter");
+              const resizeObserver = new ResizeObserver(entries => {
+                window.parent.postMessage(["setHeight", (entries[0].target.clientHeight + 16) + "px"], "*");
+              });
+              resizeObserver.observe(heightGetter);
+            </script>`
           );
-          console.log(cssLink); // eslint-disable-line no-undef
           iframe.contentDocument.head.appendChild(cssLink[0]);
+          iframe.contentDocument.head.appendChild(jsLink[0]);
         });
         iframe.removeAttribute("src");
-        iframe.setAttribute("srcdoc", this.core.translate(data.html));
+        iframe.setAttribute(
+          "srcdoc",
+          `<div id="heightGetter">${this.core.translate(data.html)}</div>`
+        );
       } else {
         iframe.removeAttribute("srcdoc");
         iframe.setAttribute("src", this.core.translate(data.url));
@@ -1463,8 +1487,9 @@ enable-background="new 0 0 10 10" xml:space="preserve">
           if (!this.poiSwiper) {
             this.poiSwiper = new Swiper(".swiper-container.poi_img_swiper", {
               lazy: true,
+              modules: [Navigation, Pagination],
               pagination: {
-                el: ".swiper-pagination",
+                el: ".poi-pagination",
                 clickable: true
               },
               navigation: {
@@ -1587,7 +1612,6 @@ enable-background="new 0 0 10 10" xml:space="preserve">
         .filter(source => source.envelopeAreaIndex / areaIndex < threshold)
         .sort((a, b) => a.envelopeAreaIndex - b.envelopeAreaIndex)
         .map(source => source.mapID);
-      console.log(mapIDs);
       return mapIDs;
     });
   }

package/src/maplat_control.js

@@ -610,11 +610,13 @@ export class CompassRotate extends Rotate {
         center[1] != this.center_[1] ||
         zoom != this.zoom_
       ) {
-        const contains = this.element.classList.contains("disable");
-        if (!contains && rotation === 0) {
-          this.element.classList.add("disable");
-        } else if (contains && rotation !== 0) {
-          this.element.classList.remove("disable");
+        if (!this.getMap().northUp) {
+          const contains = this.element.classList.contains("disable");
+          if (!contains && rotation === 0) {
+            this.element.classList.add("disable");
+          } else if (contains && rotation !== 0) {
+            this.element.classList.remove("disable");
+          }
         }
         const self = this;
         const layer = this.getMap().getLayers().item(0);
@@ -629,11 +631,20 @@ export class CompassRotate extends Rotate {
           return;
         }
         source.viewpoint2MercsAsync().then(mercs => {
-          const rot = source.mercs2MercViewpoint(mercs)[2];
-          const transform = `rotate(${rot}rad)`;
+          const direction = source.mercs2MercViewpoint(mercs)[2];
+          const transform = `rotate(${direction}rad)`;
           self.label_.style.msTransform = transform;
           self.label_.style.webkitTransform = transform;
           self.label_.style.transform = transform;
+          if (this.getMap().northUp) {
+            console.log(direction);
+            const contains = self.element.classList.contains("disable");
+            if (!contains && Math.abs(direction) < 0.1) {
+              self.element.classList.add("disable");
+            } else if (contains && Math.abs(direction) >= 0.1) {
+              self.element.classList.remove("disable");
+            }
+          }
         });
       }
       this.rotation_ = rotation;
@@ -647,6 +658,13 @@ export class CompassRotate extends Rotate {
     }
     this.center_ = [];
     this.zoom_ = undefined;
+    this.callResetNorth_ = () => {
+      const layer = this.getMap().getLayers().item(0);
+      const source = layer.getSource
+        ? layer.getSource()
+        : layer.getLayers().item(0).getSource();
+      source.resetCirculation();
+    };
   }
 }
 

package/src/service-worker.js

@@ -26,7 +26,7 @@ clientsClaim();
  * requests for URLs in the manifest.
  * See https://goo.gl/S9QRab
  */
-precacheAndRoute(self.__WB_MANIFEST, {});
+precacheAndRoute(self.__WB_MANIFEST);
 // eslint-disable-next-line no-undef
 registerRoute(
   /(?:maps\/.+\.json|pwa\/.+|pois\/.+\.json|apps\/.+\.json|tmbs\/.+\.jpg|images\/.+\.(?:png|jpg))$/,