mirror of
https://github.com/CIMEngine/map.git
synced 2024-10-05 14:35:59 +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,
|
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,9 +223,8 @@ 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">
|
||||||
<h5>
|
<h5>
|
||||||
|
|
@ -240,32 +233,30 @@ 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>`
|
: ""
|
||||||
: ""
|
}
|
||||||
}
|
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 text-center glass">
|
<div class="col-12 text-center glass">
|
||||||
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);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue