feat: map fullscreen control & m/ft scale

nobkd · Nov 27, 2023 · bd8e5d3 · bd8e5d3
1 parent 9f50f97
commit bd8e5d3
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 1 deletion.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,8 +32,10 @@
     },
     "devDependencies": {
         "@types/leaflet": "^1.9.8",
+        "@types/leaflet-fullscreen": "^1.0.9",
         "@types/webextension-polyfill": "^0.10.6",
         "@vitest/coverage-v8": "^0.34.6",
+        "leaflet-fullscreen": "^1.0.2",
         "npm-run-all": "^4.1.5",
         "prettier": "^3.1.0",
         "release-it": "^17.0.0",

diff --git a/src/map.html b/src/map.html
@@ -6,6 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <link rel="stylesheet" href="/styles/map.css" />
         <link rel="stylesheet" href="/leaflet.css" />
+        <link rel="stylesheet" href="/leaflet.fullscreen.css" />
         <title>Leaflet Map</title>
     </head>
 

diff --git a/src/map/map.ts b/src/map/map.ts
@@ -1,4 +1,5 @@
 import L from 'leaflet';
+import 'leaflet-fullscreen';
 
 import { readPB, readQ, type MapData } from './utils/read';
 import { type TileType, tileTypes } from './utils/parsePB';
@@ -44,7 +45,8 @@ if (params.has(gZoom)) {
 }
 
 const map: L.Map = L.map('map', {
-    scrollWheelZoom: false, // TODO: on pc allow ctrl + scroll
+    fullscreenControl: true,
+    scrollWheelZoom: true, // TODO: on pc allow ctrl + scroll
     zoom: mapData.zoom ?? 17,
     zoomSnap: 0.1,
     zoomDelta: 0.5,
@@ -71,3 +73,7 @@ L.tileLayer(tileProviders[mapData.tile || tileTypes[0]].layer, {
     maxZoom: 19,
     attribution: tileProviders[mapData.tile || tileTypes[0]].attr,
 }).addTo(map);
+
+L.control.scale().addTo(map);
+// TODO: fix layer loading
+//L.control.layers({}, {}, { hideSingleBase: true }).addTo(map)
diff --git a/vite.config.ts b/vite.config.ts
@@ -18,6 +18,14 @@ export default defineConfig({
                     src: normalizePath(resolve(__dirname, 'node_modules/leaflet/dist/images')),
                     dest: '.',
                 },
+                {
+                    src: normalizePath(resolve(__dirname, 'node_modules/leaflet-fullscreen/dist/leaflet.fullscreen.css')),
+                    dest: '.',
+                },
+                {
+                    src: normalizePath(resolve(__dirname, 'node_modules/leaflet-fullscreen/dist/*.png')),
+                    dest: '.',
+                },
                 {
                     src: normalizePath(resolve(__dirname, 'LICENSE')),
                     dest: '.',