mirror of
https://github.com/CIMEngine/map.git
synced 2024-11-22 02:46: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
|
@ -15,13 +15,13 @@
|
||||||
.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;
|
||||||
|
@ -32,7 +32,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
68
src/index.js
68
src/index.js
|
@ -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({
|
||||||
|
|
Loading…
Add table
Reference in a new issue