mirror of
https://github.com/CIMEngine/map.git
synced 2024-11-21 18:36:22 +03:00
fix: controls and icon, title
This commit is contained in:
parent
d6d614195d
commit
fc6b758d4c
2 changed files with 52 additions and 46 deletions
|
|
@ -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;
|
||||
transition: .25s;
|
||||
padding: 5px;
|
||||
transition: 0.25s;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.glass, .about, .menu {
|
||||
.glass,
|
||||
.about,
|
||||
.menu {
|
||||
background: rgba(120, 120, 120, 0.411) !important;
|
||||
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ) !important;
|
||||
backdrop-filter: blur( 20px ) !important;
|
||||
-webkit-backdrop-filter: blur( 20px ) !important;
|
||||
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37) !important;
|
||||
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{
|
||||
border-radius: 20px;
|
||||
.about-img {
|
||||
border-radius: 20px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
|
|
@ -50,4 +50,4 @@
|
|||
padding: 10px 15px;
|
||||
text-align: center;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
68
src/index.js
68
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) {
|
||||
mapDataFromId = await (await fetch(mapDataFromId.external)).json();
|
||||
if (mIdData.external) {
|
||||
mIdData = await (await fetch(mIdData.external)).json();
|
||||
}
|
||||
|
||||
if (!mapDataFromId) {
|
||||
if (!mIdData) {
|
||||
alert(`Map ${mapId} not found`);
|
||||
}
|
||||
|
||||
if (mapDataFromId.icon) {
|
||||
document.getElementById("icon").setAttribute("href", mapDataFromId.icon);
|
||||
}
|
||||
|
||||
let geoURL, countryInfoUrl, debug;
|
||||
let mData = {};
|
||||
|
||||
if (params.external) {
|
||||
const data = await (await fetch(params.external)).json();
|
||||
|
||||
geoURL = data.geoURL;
|
||||
mData.geoURL = data.geoURL;
|
||||
}
|
||||
|
||||
geoURL = params.geoURL || mapDataFromId.geoURL;
|
||||
countryInfoUrl = params.countryInfoURL || mapDataFromId.countryInfoURL;
|
||||
debug = params.debug || false;
|
||||
mData.geoURL = params.geoURL || mIdData.geoURL;
|
||||
mData.countryInfoUrl = params.countryInfoURL || mIdData.countryInfoURL;
|
||||
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) {
|
||||
map.addControl(new InspectControl(), "bottom-right");
|
||||
if (mData.debug) {
|
||||
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({
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue