CIMEngine/map
1
0
Fork 0
mirror of https://github.com/CIMEngine/map.git synced 2024-11-22 02:46:22 +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

67
src/index.js
View file

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