mirror of
https://github.com/CIMEngine/map.git
synced 2024-11-21 18:36:22 +03:00
fix: outline
This commit is contained in:
parent
a7952ae80e
commit
6439516bff
1 changed files with 51 additions and 60 deletions
111
src/index.js
111
src/index.js
|
@ -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);
|
||||
|
|
Loading…
Add table
Reference in a new issue