fix: external loading

and add logging
This commit is contained in:
Artemy 2024-01-24 10:08:26 +03:00
parent b6b56ff7e9
commit de3a212dbb
3 changed files with 44 additions and 15 deletions

View file

@ -13,7 +13,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./index.css"> <link rel="stylesheet" href="./index.css">
<link rel="icon" type="image/x-icon" href="https://i.imgur.com/i0yls6d.png"> <link rel="icon" type="image/x-icon" id="icon" href="https://i.imgur.com/i0yls6d.png">
<style> <style>
body { body {

View file

@ -20,15 +20,8 @@ import "bootstrap/dist/css/bootstrap.min.css";
import { countryPopup, markerPopup } from "./components"; import { countryPopup, markerPopup } from "./components";
import l from "./locales"; import l from "./locales";
import { info, error, log } from "./logging";
function loginfo(...str) {
let info = str.shift();
console.log(
`%c ${info} `,
"color:white; background-color: #78d6fa; border-radius:10px;",
...str
);
}
window.onload = async () => { window.onload = async () => {
const params = new Proxy(new URLSearchParams(window.location.search), { const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop), get: (searchParams, prop) => searchParams.get(prop),
@ -37,6 +30,7 @@ window.onload = async () => {
const projection = params.projection || "globe"; const projection = params.projection || "globe";
const mapId = params.id || "worldMap"; const mapId = params.id || "worldMap";
info("Loading", mapId);
let mIdData = ( let mIdData = (
await ( await (
await fetch( await fetch(
@ -46,7 +40,7 @@ window.onload = async () => {
)[mapId]; )[mapId];
if (!mIdData) { if (!mIdData) {
alert(`Map "${mapId}" not found`); error(`Map "${mapId}" not found`);
} }
let mData = {}; let mData = {};
@ -54,20 +48,23 @@ window.onload = async () => {
mData.external = params.external || mIdData.external; mData.external = params.external || mIdData.external;
if (mData.external) { if (mData.external) {
info("Getting data from external", mData.external);
mData = await (await fetch(mData.external)).json(); mData = await (await fetch(mData.external)).json();
} }
mData.geoURL = params.geoURL || mIdData.geoURL; mData.geoURL = params.geoURL || mData.geoURL;
mData.countryInfoUrl = params.countryInfoURL || mIdData.countryInfoURL; mData.countryInfoUrl = params.countryInfoURL || mData.countryInfoURL;
mData.debug = params.debug || false; mData.debug = params.debug || false;
mData.icon = params.icon || mIdData.icon; mData.icon = params.icon || mData.icon;
mData.name = params.name || mIdData.name; mData.name = params.name || mData.name;
if (mData.icon) { if (mData.icon) {
info("Setting icon", mData.icon);
document.getElementById("icon").setAttribute("href", mData.icon); document.getElementById("icon").setAttribute("href", mData.icon);
} }
if (mData.name) { if (mData.name) {
info("Setting title", mData.name);
document.title = mData.name; document.title = mData.name;
} }
@ -82,6 +79,7 @@ window.onload = async () => {
projection: projection, projection: projection,
}); });
info("Adding controls");
map.addControl(new ZoomControl(), "top-right"); map.addControl(new ZoomControl(), "top-right");
map.addControl(new CompassControl({ instant: true }), "top-right"); map.addControl(new CompassControl({ instant: true }), "top-right");
map.addControl(new LanguageControl()); map.addControl(new LanguageControl());
@ -110,6 +108,7 @@ window.onload = async () => {
} }
map.on("style.load", async () => { map.on("style.load", async () => {
info("Loading icons");
map.loadImage( map.loadImage(
"https://cimengine.github.io/map/icons/city.png", "https://cimengine.github.io/map/icons/city.png",
(error, image) => { (error, image) => {
@ -137,18 +136,23 @@ window.onload = async () => {
let lasticocords; let lasticocords;
loginfo("Getting country data"); info("Getting country data from", mData.countryInfoUrl);
let coarray = await fetch(mData.countryInfoUrl); let coarray = await fetch(mData.countryInfoUrl);
coarray = await coarray.json(); coarray = await coarray.json();
let countries = {}; let countries = {};
info("Adding country data", `${coarray.length} countries`);
for (let i = 0; i < coarray.length; i++) for (let i = 0; i < coarray.length; i++)
countries[coarray[i].idc] = coarray[i]; countries[coarray[i].idc] = coarray[i];
info("Adding map data", mData.geoURL);
map.addSource("map-data", { map.addSource("map-data", {
type: "geojson", type: "geojson",
data: mData.geoURL, data: mData.geoURL,
}); });
info("---Adding layers---");
log("map-data-fill-outline");
map.addLayer({ map.addLayer({
id: "map-data-fill-outline", id: "map-data-fill-outline",
type: "line", type: "line",
@ -160,6 +164,7 @@ window.onload = async () => {
}, },
}); });
log("map-data-fill");
map.addLayer({ map.addLayer({
id: "map-data-fill", id: "map-data-fill",
type: "fill", type: "fill",
@ -170,6 +175,7 @@ window.onload = async () => {
}, },
}); });
log("map-data-symbol");
map.addLayer({ map.addLayer({
id: "map-data-symbol", id: "map-data-symbol",
type: "symbol", type: "symbol",
@ -180,7 +186,9 @@ window.onload = async () => {
}, },
minzoom: 3, minzoom: 3,
}); });
info("---Layers added---");
info("Adding event listeners for clicks");
map.on("click", "map-data-fill", (e) => { map.on("click", "map-data-fill", (e) => {
const coordinates = e.lngLat; const coordinates = e.lngLat;
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {

21
src/logging.js Normal file
View file

@ -0,0 +1,21 @@
export function info(...str) {
let info = str.shift();
console.log(
`%c ${info} `,
"color:black; background-color: #78d6fa; border-radius:10px;",
...str
);
}
export function log(...str) {
console.log(...str);
}
export function error(...str) {
let info = str.shift();
console.log(
`%c ${info} `,
"color:black; background-color: #ff0000; border-radius:10px;",
...str
);
}