feat: map engine v1

This commit is contained in:
Artemy 2023-06-09 12:19:07 +03:00
parent 37d98a9fa5
commit 141e859878
7 changed files with 373 additions and 0 deletions

3
README.md Normal file
View file

@ -0,0 +1,3 @@
# WIP
Documentation will be here shortly

BIN
icons/capital.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
icons/city.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1 KiB

BIN
icons/landmark.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

53
index.css Normal file
View file

@ -0,0 +1,53 @@
.mapboxgl-popup-tip{
display: none;
}
.mapboxgl-popup-close-button {
display: none;
}
.mapboxgl-popup-content{
background: #fff0 !important;
padding: 0 !important;
box-shadow: none !important;
}
.about {
text-decoration: none;
padding: 5px;
transition: .25s;
margin-top: 5px;
}
.glass, .about, .menu {
background: rgba(120, 120, 120, 0.411) !important;
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ) !important;
backdrop-filter: blur( 20px ) !important;
-webkit-backdrop-filter: blur( 20px ) !important;
border-radius: 20px !important;
border: 1px solid rgba( 255, 255, 255, 0.18 ) !important;
color: white !important;
}
.about:hover {
transition: .25s;
background: rgba(48, 48, 48, 0.3) !important;
}
.about-img{
border-radius: 20px;
margin-bottom: 5px;
}
.menu {
position: absolute;
z-index: 1000;
top: 25px;
left: 50%;
transform: translate(-50%);
padding: 10px 15px;
text-align: center;
border-radius: 10px;
}

65
index.html Normal file
View file

@ -0,0 +1,65 @@
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <html class="no-js"> <!--<![endif]-->
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>CIMEngine</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./index.css">
<link rel="icon" type="image/x-icon" href="https://i.imgur.com/i0yls6d.png">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
crossorigin="anonymous"></script>
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- <div class="menu">
<div class="row">
<div class="col-md-2">
<img class="w-50" src="https://erth2.github.io/movc/icons/movc-logo.png">
</div>
<div class="col-md-8">
<h4>Map of ERTH2</h4>
</div>
</div>
</div> -->
<div id="map"></div>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.13.0/mapbox-gl.js"></script>
<script type="text/javascript" src=" https://unpkg.com/showdown/dist/showdown.min.js"></script>
<script src="./index.js" async defer></script>
</body>
</html>

252
index.js Normal file
View file

@ -0,0 +1,252 @@
function loginfo(...str) {
let info = str.shift();
console.log(
`%c ${info} `,
"color:white; background-color: #78d6fa; border-radius:10px;",
...str
);
}
function logmarker(...str) {
let info = str.shift();
console.log(
`%c ${info} `,
"color:white; background-color: #9300fc; border-radius:10px;",
...str
);
}
function logland(...str) {
let info = str.shift();
console.log(
`%c ${info} `,
"color:white; background-color: #0c7700; border-radius:10px;",
...str
);
}
function logoccupation(...str) {
let info = str.shift();
console.log(
`%c ${info} `,
"color:white; background-color: #B22222; border-radius:10px;",
...str
);
}
function onMapClick(e) {
loginfo("Даблклик", e.latlng.toString());
}
window.onload = async () => {
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
});
const projection = params.projection;
const geoURL = params.geoURL;
const countryInfoUrl = params.countryInfoUrl;
mapboxgl.accessToken =
"pk.eyJ1IjoiYXJ0ZWdvc2VyIiwiYSI6ImNrcDViN3BhcDAwbW0ydnBnOXZ0ZzFreXUifQ.FIVtaBNr9dr_TIw672Zqdw";
let movc = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/artegoser/clfm612fg002601nlcika2018",
center: [53.19, 41.28],
zoom: 3,
projection: projection || "globe",
});
let converter = new showdown.Converter();
movc.on("load", async () => {
movc.loadImage(
"https://cime.github.io/map/icons/city.png",
(error, image) => {
if (error) throw error;
movc.addImage("city", image);
}
);
movc.loadImage(
"https://cime.github.io/map/icons/capital.png",
(error, image) => {
if (error) throw error;
movc.addImage("capital-city", image);
movc.addImage("capital", image);
}
);
movc.loadImage(
"https://cime.github.io/map/icons/landmark.png",
(error, image) => {
if (error) throw error;
movc.addImage("landmark-0", image);
}
);
let lasticocords;
loginfo("Getting geo data");
let geo = await fetch(
geoURL || "https://erth2.github.io/movc/geo/geo.geojson"
);
loginfo("Getting country data");
let coarray = await fetch(
countryInfoUrl ||
"https://erth2.github.io/movc/geo/countries/countries.json"
);
coarray = await coarray.json();
let countries = {};
for (let i = 0; i < coarray.length; i++)
countries[coarray[i].idc] = coarray[i];
let geojson = await geo.json();
movc.addSource("map-data", {
type: "geojson",
data: geojson,
});
movc.addLayer({
id: "map-data-fill",
type: "fill",
source: "map-data",
paint: {
"fill-color": ["get", "fill"],
"fill-opacity": ["coalesce", ["get", "fill-opacity"], 0.3],
},
});
movc.addLayer({
id: "map-data-fill-outline",
type: "line",
source: "map-data",
paint: {
"line-color": ["coalesce", ["get", "stroke"], "#0c7700"],
"line-width": 2,
"line-opacity": 0.8,
},
});
movc.addLayer({
id: "map-data-symbol",
type: "symbol",
source: "map-data",
layout: {
"icon-image": ["get", "type"],
"icon-size": 0.15,
},
minzoom: 3,
});
movc.on("click", "map-data-fill", (e) => {
const coordinates = e.lngLat;
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
onEachFeature(e.features[0], coordinates);
});
movc.on("click", "map-data-symbol", (e) => {
const coordinates = e.lngLat;
while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
}
onEachFeature(e.features[0], coordinates);
});
function onEachFeature(feature, coordinates) {
if (feature.geometry.type === "Point") {
lasticocords = coordinates;
return new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(
`
${
feature?.properties?.amount
? `<div class="row glass" style="color: "white";"><div class="col">Население - ${feature.properties.amount} чел.</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.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>`
: ""
}
</div>
`
)
.addTo(movc);
} else if (
feature.geometry.type === "Polygon" ||
feature.geometry.type === "MultiPolygon"
) {
let country = countries[feature.properties.name] || {
name: "gl js mapbox is awesome",
};
setTimeout(() => {
if (country.name !== "gl js mapbox is awesome")
if (lasticocords !== coordinates)
return new mapboxgl.Popup()
.setLngLat(coordinates)
.setHTML(
`
<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">
Основание: ${country.date}
</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 mt-2">
${
country.about
? `<a href="${country.about}" class="about">Подробнее</a>`
: ""
}
</div>
</div>`
)
.addTo(movc);
}, 1);
}
}
});
};