fix: controls and icon, title

This commit is contained in:
Artemy 2024-01-23 20:38:12 +03:00
parent d6d614195d
commit fc6b758d4c
2 changed files with 52 additions and 46 deletions

View file

@ -1,4 +1,4 @@
.mapboxgl-popup-tip{ .mapboxgl-popup-tip {
display: none; display: none;
} }
@ -6,7 +6,7 @@
display: none; display: none;
} }
.mapboxgl-popup-content{ .mapboxgl-popup-content {
background: #fff0 !important; background: #fff0 !important;
padding: 0 !important; padding: 0 !important;
box-shadow: none !important; box-shadow: none !important;
@ -14,30 +14,30 @@
.about { .about {
text-decoration: none; text-decoration: none;
padding: 5px; padding: 5px;
transition: .25s; transition: 0.25s;
margin-top: 5px; margin-top: 5px;
} }
.glass,
.about,
.glass, .about, .menu { .menu {
background: rgba(120, 120, 120, 0.411) !important; 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-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; color: white !important;
} }
.about:hover { .about:hover {
transition: .25s; transition: 0.25s;
background: rgba(48, 48, 48, 0.3) !important; background: rgba(48, 48, 48, 0.3) !important;
} }
.about-img{ .about-img {
border-radius: 20px; border-radius: 20px;
margin-bottom: 5px; margin-bottom: 5px;
} }
@ -50,4 +50,4 @@
padding: 10px 15px; padding: 10px 15px;
text-align: center; text-align: center;
border-radius: 10px; border-radius: 10px;
} }

View file

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