CIMEngine/map
1
0
Fork 0
mirror of https://github.com/CIMEngine/map.git synced 2024-10-05 06:25:58 +03:00
Code Issues Projects Releases Packages Wiki Activity

fix: outline

Browse source
This commit is contained in:
Artemy Egorov 2023-10-19 13:37:47 +03:00
parent a7952ae80e
commit 6439516bff
1 changed files with 51 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

111
src/index.js
View file

@ -5,14 +5,12 @@ import {
InspectControl,
} from "mapbox-gl-controls";
import area from "@turf/area";
function loginfo(...str) {
let info = str.shift();
console.log(
`%c ${info} `,
"color:white; background-color: #78d6fa; border-radius:10px;",
...str
...str,
);
}
window.onload = async () => {
@ -26,7 +24,7 @@ window.onload = async () => {
let mapDataFromId = (
await (
await fetch(
`https://raw.githubusercontent.com/CIMEngine/MapList/main/index.json`
`https://raw.githubusercontent.com/CIMEngine/MapList/main/index.json`,
)
).json()
)[mapId];
@ -62,7 +60,7 @@ window.onload = async () => {
},
],
}),
"top-left"
"top-left",
);
map.addControl(new ZoomControl(), "top-right");
@ -76,7 +74,7 @@ window.onload = async () => {
Crosshair: true,
PrintableArea: true,
}),
"top-right"
"top-right",
);
if (debug) {
@ -91,7 +89,7 @@ window.onload = async () => {
(error, image) => {
if (error) throw error;
map.addImage("city", image);
}
},
);
map.loadImage(
@ -100,7 +98,7 @@ window.onload = async () => {
if (error) throw error;
map.addImage("capital-city", image);
map.addImage("capital", image);
}
},
);
map.loadImage(
@ -108,7 +106,7 @@ window.onload = async () => {
(error, image) => {
if (error) throw error;
map.addImage("landmark-0", image);
}
},
);
let lasticocords;
@ -125,16 +123,6 @@ window.onload = async () => {
data: geoURL,
});
map.addLayer({
id: "map-data-fill",
type: "fill",
source: "map-data",
paint: {
"fill-color": ["get", "fill"],
"fill-opacity": ["coalesce", ["get", "fill-opacity"], 0.3],
},
});
map.addLayer({
id: "map-data-fill-outline",
type: "line",
@ -146,6 +134,16 @@ window.onload = async () => {
},
});
map.addLayer({
id: "map-data-fill",
type: "fill",
source: "map-data",
paint: {
"fill-color": ["get", "fill"],
"fill-opacity": ["coalesce", ["get", "fill-opacity"], 0.3],
},
});
map.addLayer({
id: "map-data-symbol",
type: "symbol",
@ -182,35 +180,31 @@ window.onload = async () => {
.setLngLat(coordinates)
.setHTML(
`
${
feature?.properties?.amount
? `<div class="row glass" style="color: "white";"><div class="col">Population - ${feature.properties.amount} people.</div></div>`
: ""
}
${feature?.properties?.amount
? `<div class="row glass" style="color: "white";"><div class="col">Population - ${feature.properties.amount} people.</div></div>`
: ""
}
<div class="row" style="padding: 5px;">
${
feature?.properties?.img
? `<div class="col-md-12 col-sm-12" style="padding: 0px;"><img class="w-100 about-img" src="${feature.properties.img}" alt="${feature.properties.name} img"></div>`
: ""
}
${feature?.properties?.img
? `<div class="col-md-12 col-sm-12" style="padding: 0px;"><img class="w-100 about-img" src="${feature.properties.img}" alt="${feature.properties.name} img"></div>`
: ""
}
<div class="col-md-12 col-sm-12 text-center glass mb-2">
<h5 className="card-title">${feature.properties.name}
${
feature.properties.name_ru
? ` - ${feature.properties.name_ru}`
: ""
}
${feature.properties.name_ru
? ` - ${feature.properties.name_ru}`
: ""
}
</h5>
</div>
${
feature.properties.description
? `<div class="col-md-12 col-sm-12 text-center glass"><div>${converter.makeHtml(
feature.properties.description
)}</div></div>`
: ""
}
${feature.properties.description
? `<div class="col-md-12 col-sm-12 text-center glass"><div>${converter.makeHtml(
feature.properties.description,
)}</div></div>`
: ""
}
</div>
`
`,
)
.addTo(map);
} else if (
@ -229,9 +223,8 @@ window.onload = async () => {
`
<div class="row" style="padding: 5px;">
<div class="col-12 col-sm-12" style="padding: 0px;">
<img class="w-100 about-img" src="${
country.img
}">
<img class="w-100 about-img" src="${country.img
}">
</div>
<div class="col-12 text-center glass">
<h5>
@ -240,32 +233,30 @@ window.onload = async () => {
</div>
<div class="col-12 text-center glass">
${JSON.parse(
feature.properties.tags || "[]"
).join(", ")}
feature.properties.tags || "[]",
).join(", ")}
</div>
<div class="col-12 text-center glass">
Founding date: ${country.date}
</div>
<div class="col-md-12 col-sm-12 text-center glass">
${
country.description
? `<div>${converter.makeHtml(
country.description
)}</div>`
: ""
}
${country.description
? `<div>${converter.makeHtml(
country.description,
)}</div>`
: ""
}
</div>
<div class="col-12 text-center glass">
Area: ${feature.properties.area} km²
</div>
<div class="col-12 text-center mt-2">
${
country.about
? `<a href="${country.about}" class="about">About</a>`
: ""
}
${country.about
? `<a href="${country.about}" class="about">About</a>`
: ""
}
</div>
</div>`
</div>`,
)
.addTo(map);
}, 1);