fix: controls and icon, title

src/index.css

@@ -1,4 +1,4 @@
-.mapboxgl-popup-tip{
+.mapboxgl-popup-tip {
   display: none;
 }
 
@@ -6,7 +6,7 @@
   display: none;
 }
 
-.mapboxgl-popup-content{
+.mapboxgl-popup-content {
   background: #fff0 !important;
   padding: 0 !important;
   box-shadow: none !important;
@@ -14,30 +14,30 @@
 
 .about {
   text-decoration: none;
-  padding: 5px; 
+  padding: 5px;
-  transition: .25s;
+  transition: 0.25s;
   margin-top: 5px;
 }
 
-
+.glass,
-
+.about,
-.glass, .about, .menu {
+.menu {
   background: rgba(120, 120, 120, 0.411) !important;
-  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ) !important;
+  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37) !important;
-  backdrop-filter: blur( 20px ) !important;
+  backdrop-filter: blur(20px) !important;
-  -webkit-backdrop-filter: blur( 20px ) !important;
+  -webkit-backdrop-filter: blur(20px) !important;
   border-radius: 20px !important;
-  border: 1px solid rgba( 255, 255, 255, 0.18 ) !important;
+  border: 1px solid rgba(255, 255, 255, 0.18) !important;
   color: white !important;
 }
 
 .about:hover {
-  transition: .25s;
+  transition: 0.25s;
   background: rgba(48, 48, 48, 0.3) !important;
 }
 
-.about-img{
+.about-img {
-  border-radius: 20px; 
+  border-radius: 20px;
   margin-bottom: 5px;
 }
 
@@ -50,4 +50,4 @@
   padding: 10px 15px;
   text-align: center;
   border-radius: 10px;
-}
+}

src/index.js

@@ -1,21 +1,21 @@
 import "./index.css";
 
-import "bootstrap";
-import "bootstrap/dist/css/bootstrap.min.css";
-
-import StylesControl from "@mapbox-controls/styles";
-import ZoomControl from "@mapbox-controls/zoom";
-import CompassControl from "@mapbox-controls/compass";
-import InspectControl from "@mapbox-controls/inspect";
-
-import "@mapbox-controls/styles/src/index.css";
-import "@mapbox-controls/zoom/src/index.css";
-import "@mapbox-controls/compass/src/index.css";
-import "@mapbox-controls/inspect/src/index.css";
-
 import mapboxgl from "mapbox-gl";
 import "mapbox-gl/dist/mapbox-gl.css";
 
+import CompassControl from "@mapbox-controls/compass";
+import InspectControl from "@mapbox-controls/inspect";
+import StylesControl from "@mapbox-controls/styles";
+import ZoomControl from "@mapbox-controls/zoom";
+
+import "@mapbox-controls/compass/src/index.css";
+import "@mapbox-controls/inspect/src/index.css";
+import "@mapbox-controls/styles/src/index.css";
+import "@mapbox-controls/zoom/src/index.css";
+
+import "bootstrap";
+import "bootstrap/dist/css/bootstrap.min.css";
+
 import showdown from "showdown";
 
 function loginfo(...str) {
@@ -34,7 +34,7 @@ window.onload = async () => {
   const projection = params.projection || "globe";
   const mapId = params.id || "worldMap";
 
-  let mapDataFromId = (
+  let mIdData = (
     await (
       await fetch(
         `https://raw.githubusercontent.com/CIMEngine/MapList/main/index.json`
@@ -42,29 +42,35 @@ window.onload = async () => {
     ).json()
   )[mapId];
 
-  if (mapDataFromId.external) {
+  if (mIdData.external) {
-    mapDataFromId = await (await fetch(mapDataFromId.external)).json();
+    mIdData = await (await fetch(mIdData.external)).json();
   }
 
-  if (!mapDataFromId) {
+  if (!mIdData) {
     alert(`Map ${mapId} not found`);
   }
 
-  if (mapDataFromId.icon) {
+  let mData = {};
-    document.getElementById("icon").setAttribute("href", mapDataFromId.icon);
-  }
-
-  let geoURL, countryInfoUrl, debug;
 
   if (params.external) {
     const data = await (await fetch(params.external)).json();
 
-    geoURL = data.geoURL;
+    mData.geoURL = data.geoURL;
   }
 
-  geoURL = params.geoURL || mapDataFromId.geoURL;
+  mData.geoURL = params.geoURL || mIdData.geoURL;
-  countryInfoUrl = params.countryInfoURL || mapDataFromId.countryInfoURL;
+  mData.countryInfoUrl = params.countryInfoURL || mIdData.countryInfoURL;
-  debug = params.debug || false;
+  mData.debug = params.debug || false;
+  mData.icon = params.icon || mIdData.icon;
+  mData.name = params.name || mIdData.name;
+
+  if (mData.icon) {
+    document.getElementById("icon").setAttribute("href", mData.icon);
+  }
+
+  if (mData.name) {
+    document.title = mData.name;
+  }
 
   mapboxgl.accessToken =
     "pk.eyJ1IjoiYXJ0ZWdvc2VyIiwiYSI6ImNrcDViN3BhcDAwbW0ydnBnOXZ0ZzFreXUifQ.FIVtaBNr9dr_TIw672Zqdw";
@@ -97,10 +103,10 @@ window.onload = async () => {
   );
 
   map.addControl(new ZoomControl(), "top-right");
-  map.addControl(new CompassControl(), "bottom-right");
+  map.addControl(new CompassControl({ instant: true }), "top-right");
 
-  if (debug) {
+  if (mData.debug) {
-    map.addControl(new InspectControl(), "bottom-right");
+    map.addControl(new InspectControl({ console: true }), "bottom-right");
   }
 
   let converter = new showdown.Converter();
@@ -134,7 +140,7 @@ window.onload = async () => {
     let lasticocords;
 
     loginfo("Getting country data");
-    let coarray = await fetch(countryInfoUrl);
+    let coarray = await fetch(mData.countryInfoUrl);
     coarray = await coarray.json();
     let countries = {};
     for (let i = 0; i < coarray.length; i++)
@@ -142,7 +148,7 @@ window.onload = async () => {
 
     map.addSource("map-data", {
       type: "geojson",
-      data: geoURL,
+      data: mData.geoURL,
     });
 
     map.addLayer({