Map Dark Mode

Author: jason5ng32

api/map.js

@@ -16,7 +16,7 @@ module.exports = (req, res) => {
     }
 
     // 使用 req.query 获取参数
-    const { latitude, longitude, language } = req.query;
+    const { latitude, longitude, language, CanvasMode } = req.query;
 
     if (!latitude || !longitude || !language) {
         return res.status(400).json({ error: 'Missing latitude, longitude, or language' });
@@ -28,7 +28,7 @@ module.exports = (req, res) => {
     const dpi = 'Large';
     const apiKey = process.env.BING_MAP_API_KEY;
 
-    const url = `https://dev.virtualearth.net/REST/v1/Imagery/Map/Road/${latitude},${longitude}/5?mapSize=${mapSize}&pp=${pp}&key=${apiKey}&fmt=${fmt}&dpi=${dpi}&c=${language}`;
+    const url = `https://dev.virtualearth.net/REST/v1/Imagery/Map/${CanvasMode}/${latitude},${longitude}/5?mapSize=${mapSize}&pp=${pp}&key=${apiKey}&fmt=${fmt}&dpi=${dpi}&c=${language}`;
 
     https.get(url, apiRes => {
         apiRes.pipe(res);

public/contents/ipDataCards.js

@@ -11,6 +11,7 @@ export default [
     asn: "",
     asnlink: "",
     mapUrl: "res/img/defaultMap.jpg",
+    mapUrl_dark: "res/img/defaultMap_dark.jpg",
     showMap: false,
     source: "Taobao",
   },
@@ -26,6 +27,7 @@ export default [
     asn: "",
     asnlink: "",
     mapUrl: "res/img/defaultMap.jpg",
+    mapUrl_dark: "res/img/defaultMap_dark.jpg",
     showMap: false,
     source: "Special",
   },
@@ -41,6 +43,7 @@ export default [
     asn: "",
     asnlink: "",
     mapUrl: "res/img/defaultMap.jpg",
+    mapUrl_dark: "res/img/defaultMap_dark.jpg",
     showMap: false,
     source: "Cloudflare IPv4",
   },
@@ -56,6 +59,7 @@ export default [
     asn: "",
     asnlink: "",
     mapUrl: "res/img/defaultMap.jpg",
+    mapUrl_dark: "res/img/defaultMap_dark.jpg",
     showMap: false,
     source: "Cloudflare IPv6",
   },
@@ -71,6 +75,7 @@ export default [
     asn: "",
     asnlink: "",
     mapUrl: "res/img/defaultMap.jpg",
+    mapUrl_dark: "res/img/defaultMap_dark.jpg",
     showMap: false,
     source: "IPify IPv4",
   },
@@ -86,6 +91,7 @@ export default [
     asn: "",
     asnlink: "",
     mapUrl: "res/img/defaultMap.jpg",
+    mapUrl_dark: "res/img/defaultMap_dark.jpg",
     showMap: false,
     source: "IPify IPv6",
   },

public/index.html

@@ -138,8 +138,8 @@ <h2 id="IPInfo" class="col-4" :class="{'mobile-h2' : isMobile }">🕵️
                       <i class="bi bi-arrow-clockwise"></i></button>
                   </div>
 
-                  <img v-if="isMapShown" v-if="!isMobile" :src="card.mapUrl" class="card-img-top jn-map-image"
-                    alt="Map">
+                  <img v-if="isMapShown && !isMobile" :src="isDarkMode ? card.mapUrl_dark : card.mapUrl"
+                    class="card-img-top jn-map-image" alt="Map">
                   <div class="card-body">
                     <ul class="list-group list-group-flush">
                       <li class="list-group-item jn-list-group-item" :class="{ 'dark-mode': isDarkMode }"><span
@@ -485,7 +485,7 @@ <h5 class="modal-title" id="helpModal">{{currentTexts.helpModal.Title}}</h5>
       });
     }
   </script>
-  
+
 
 </body>
 

public/res/app.js

@@ -30,6 +30,7 @@ new Vue({
   data: {
 
     isEnvBingMapKey: false,
+    BingMapCanvasMode: "CanvasLight",
     currentLanguage: "en",
     currentTexts: {},
 
@@ -261,7 +262,8 @@ new Vue({
         isp: data.org || "",
         asn: data.asn || "",
         asnlink: data.asn ? `https://radar.cloudflare.com/traffic/${data.asn}` : false,
-        mapUrl: data.latitude && data.longitude ? `/api/map?latitude=${data.latitude}&longitude=${data.longitude}&language=${this.bingMapLanguage}` : ""
+        mapUrl: data.latitude && data.longitude ? `/api/map?latitude=${data.latitude}&longitude=${data.longitude}&language=${this.bingMapLanguage}&CanvasMode=CanvasLight` : "",
+        mapUrl_dark: data.latitude && data.longitude ? `/api/map?latitude=${data.latitude}&longitude=${data.longitude}&language=${this.bingMapLanguage}&CanvasMode=CanvasDark` : ""
       };
     },
 
@@ -307,6 +309,7 @@ new Vue({
       card.asn = "";
       card.isp = "";
       card.mapUrl = "res/img/defaultMap.jpg";
+      card.mapUrl_dark = "res/img/defaultMap_dark.jpg";
     },
 
     toggleMaps() {
@@ -773,6 +776,7 @@ new Vue({
           card.isp = "Google LLC";
           card.asn = "AS15169";
           card.mapUrl = "res/img/defaultMap.jpg";
+          card.mapUrl_dark = "res/img/defaultMap_dark.jpg";
         });
         this.leakTest.forEach((server) => {
           server.geo = "United States";