mirror of
https://github.com/CIMEngine/map.git
synced 2024-11-21 18:36:22 +03:00
refactor: some components
This commit is contained in:
parent
131d4285e9
commit
d098cea340
2 changed files with 72 additions and 89 deletions
69
src/components.js
Normal file
69
src/components.js
Normal file
|
|
@ -0,0 +1,69 @@
|
||||||
|
import { Converter } from "showdown";
|
||||||
|
import l from "./locales";
|
||||||
|
|
||||||
|
let converter = new Converter();
|
||||||
|
|
||||||
|
export function countryPopup(country, properties) {
|
||||||
|
return `<div class="row" style="padding: 5px;">
|
||||||
|
${img(country.img)}
|
||||||
|
${title(country.name)}
|
||||||
|
<div class="col-12 text-center glass">
|
||||||
|
${JSON.parse(properties.tags || "[]").join(", ")}
|
||||||
|
</div>
|
||||||
|
<div class="col-12 text-center glass">
|
||||||
|
${l("founded")}: ${new Date(country.date).toLocaleDateString()}
|
||||||
|
</div>
|
||||||
|
<div class="col-md-12 col-sm-12 text-center glass">
|
||||||
|
${
|
||||||
|
country.description
|
||||||
|
? `<div>${converter.makeHtml(country.description)}</div>`
|
||||||
|
: ""
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<div class="col-12 text-center glass">
|
||||||
|
${l("area")}: ${properties.area} ${l("km")}²
|
||||||
|
</div>
|
||||||
|
<div class="col-12 text-center mt-2">
|
||||||
|
${
|
||||||
|
country.about
|
||||||
|
? `<a href="${country.about}" class="about">${l("about")}</a>`
|
||||||
|
: ""
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function img(url) {
|
||||||
|
return `<div class="col-12 col-sm-12" style="padding: 0px;"><img class="w-100 about-img" src="${url}"></div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function title(name) {
|
||||||
|
return `<div class="col-12 text-center glass"><h5>${name}</h5></div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function markerPopup(properties) {
|
||||||
|
return `
|
||||||
|
${
|
||||||
|
properties?.amount
|
||||||
|
? `<div class="row glass" style="color: "white";"><div class="col">${l(
|
||||||
|
"population"
|
||||||
|
)} - ${properties.amount} ${l("people")}.</div></div>`
|
||||||
|
: ""
|
||||||
|
}
|
||||||
|
<div class="row" style="padding: 5px;">
|
||||||
|
${properties?.img ? img(properties.img) : ""}
|
||||||
|
${title(
|
||||||
|
`${properties.name} ${
|
||||||
|
properties.translated_name ? `- ${properties.translated_name}` : ""
|
||||||
|
}`
|
||||||
|
)}
|
||||||
|
${
|
||||||
|
properties.description
|
||||||
|
? `<div class="col-md-12 col-sm-12 text-center glass"><div>${converter.makeHtml(
|
||||||
|
properties.description
|
||||||
|
)}</div></div>`
|
||||||
|
: ""
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
92
src/index.js
92
src/index.js
|
|
@ -17,9 +17,7 @@ import "@mapbox-controls/zoom/src/index.css";
|
||||||
import "bootstrap";
|
import "bootstrap";
|
||||||
import "bootstrap/dist/css/bootstrap.min.css";
|
import "bootstrap/dist/css/bootstrap.min.css";
|
||||||
|
|
||||||
import showdown from "showdown";
|
import { countryPopup, markerPopup } from "./components";
|
||||||
|
|
||||||
import l from "./locales";
|
|
||||||
|
|
||||||
function loginfo(...str) {
|
function loginfo(...str) {
|
||||||
let info = str.shift();
|
let info = str.shift();
|
||||||
|
|
@ -109,8 +107,6 @@ window.onload = async () => {
|
||||||
map.addControl(new InspectControl({ console: true }), "bottom-right");
|
map.addControl(new InspectControl({ console: true }), "bottom-right");
|
||||||
}
|
}
|
||||||
|
|
||||||
let converter = new showdown.Converter();
|
|
||||||
|
|
||||||
map.on("style.load", async () => {
|
map.on("style.load", async () => {
|
||||||
map.loadImage(
|
map.loadImage(
|
||||||
"https://cimengine.github.io/map/icons/city.png",
|
"https://cimengine.github.io/map/icons/city.png",
|
||||||
|
|
@ -206,42 +202,7 @@ window.onload = async () => {
|
||||||
lasticocords = coordinates;
|
lasticocords = coordinates;
|
||||||
return new mapboxgl.Popup()
|
return new mapboxgl.Popup()
|
||||||
.setLngLat(coordinates)
|
.setLngLat(coordinates)
|
||||||
.setHTML(
|
.setHTML(markerPopup(feature.properties))
|
||||||
`
|
|
||||||
${
|
|
||||||
feature?.properties?.amount
|
|
||||||
? `<div class="row glass" style="color: "white";"><div class="col">${l(
|
|
||||||
"population"
|
|
||||||
)} - ${feature.properties.amount} ${l(
|
|
||||||
"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>`
|
|
||||||
: ""
|
|
||||||
}
|
|
||||||
<div class="col-md-12 col-sm-12 text-center glass mb-2">
|
|
||||||
<h5 className="card-title">${feature.properties.name}
|
|
||||||
${
|
|
||||||
feature.properties.translated_name
|
|
||||||
? ` - ${feature.properties.translated_name}`
|
|
||||||
: ""
|
|
||||||
}
|
|
||||||
</h5>
|
|
||||||
</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);
|
.addTo(map);
|
||||||
} else if (
|
} else if (
|
||||||
feature.geometry.type === "Polygon" ||
|
feature.geometry.type === "Polygon" ||
|
||||||
|
|
@ -255,54 +216,7 @@ window.onload = async () => {
|
||||||
if (lasticocords !== coordinates)
|
if (lasticocords !== coordinates)
|
||||||
return new mapboxgl.Popup()
|
return new mapboxgl.Popup()
|
||||||
.setLngLat(coordinates)
|
.setLngLat(coordinates)
|
||||||
.setHTML(
|
.setHTML(countryPopup(country, feature.properties))
|
||||||
`
|
|
||||||
<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
|
|
||||||
}">
|
|
||||||
</div>
|
|
||||||
<div class="col-12 text-center glass">
|
|
||||||
<h5>
|
|
||||||
${country.name}
|
|
||||||
</h5>
|
|
||||||
</div>
|
|
||||||
<div class="col-12 text-center glass">
|
|
||||||
${JSON.parse(
|
|
||||||
feature.properties.tags || "[]"
|
|
||||||
).join(", ")}
|
|
||||||
</div>
|
|
||||||
<div class="col-12 text-center glass">
|
|
||||||
${l("founded")}: ${new Date(
|
|
||||||
country.date
|
|
||||||
).toLocaleDateString()}
|
|
||||||
</div>
|
|
||||||
<div class="col-md-12 col-sm-12 text-center glass">
|
|
||||||
${
|
|
||||||
country.description
|
|
||||||
? `<div>${converter.makeHtml(
|
|
||||||
country.description
|
|
||||||
)}</div>`
|
|
||||||
: ""
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
<div class="col-12 text-center glass">
|
|
||||||
${l("area")}: ${feature.properties.area} ${l(
|
|
||||||
"km"
|
|
||||||
)}²
|
|
||||||
</div>
|
|
||||||
<div class="col-12 text-center mt-2">
|
|
||||||
${
|
|
||||||
country.about
|
|
||||||
? `<a href="${
|
|
||||||
country.about
|
|
||||||
}" class="about">${l("about")}</a>`
|
|
||||||
: ""
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>`
|
|
||||||
)
|
|
||||||
.addTo(map);
|
.addTo(map);
|
||||||
}, 1);
|
}, 1);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue