mirror of
https://github.com/CIMEngine/map.git
synced 2025-02-22 18:53:11 +03:00
feat: rollup, controls, debug mode
This commit is contained in:
parent
af689c92fe
commit
dd0d8fd077
6 changed files with 1221 additions and 51 deletions
53
src/index.css
Normal file
53
src/index.css
Normal 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;
|
||||
}
|
||||
69
src/index.html
Normal file
69
src/index.html
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
<!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.15.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>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mapbox-gl-controls@2.3/lib/controls.min.css">
|
||||
<link href="https://watergis.github.io/mapbox-gl-export/mapbox-gl-export.css" rel="stylesheet" />
|
||||
|
||||
<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.15.0/mapbox-gl.js"></script>
|
||||
<script type="text/javascript" src="https://unpkg.com/showdown/dist/showdown.min.js"></script>
|
||||
<script src="https://watergis.github.io/mapbox-gl-export/mapbox-gl-export.js"></script>
|
||||
|
||||
<script src="./index.bundle.js" async defer></script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
270
src/index.js
Normal file
270
src/index.js
Normal file
|
|
@ -0,0 +1,270 @@
|
|||
import {
|
||||
StylesControl,
|
||||
ZoomControl,
|
||||
CompassControl,
|
||||
InspectControl,
|
||||
} from "mapbox-gl-controls";
|
||||
|
||||
function loginfo(...str) {
|
||||
let info = str.shift();
|
||||
console.log(
|
||||
`%c ${info} `,
|
||||
"color:white; background-color: #78d6fa; border-radius:10px;",
|
||||
...str
|
||||
);
|
||||
}
|
||||
window.onload = async () => {
|
||||
const params = new Proxy(new URLSearchParams(window.location.search), {
|
||||
get: (searchParams, prop) => searchParams.get(prop),
|
||||
});
|
||||
|
||||
const projection = params.projection || "globe";
|
||||
const mapId = params.id || "worldMap";
|
||||
|
||||
let mapDataFromId = (
|
||||
await (
|
||||
await fetch(
|
||||
`https://raw.githubusercontent.com/CIMEngine/MapList/main/index.json`
|
||||
)
|
||||
).json()
|
||||
)[mapId];
|
||||
|
||||
const geoURL = params.geoURL || mapDataFromId.geoURL;
|
||||
const countryInfoUrl = params.countryInfoURL || mapDataFromId.countryInfoURL;
|
||||
const debug = params.debug || false;
|
||||
|
||||
mapboxgl.accessToken =
|
||||
"pk.eyJ1IjoiYXJ0ZWdvc2VyIiwiYSI6ImNrcDViN3BhcDAwbW0ydnBnOXZ0ZzFreXUifQ.FIVtaBNr9dr_TIw672Zqdw";
|
||||
let map = new mapboxgl.Map({
|
||||
container: "map",
|
||||
style: "mapbox://styles/artegoser/clfm612fg002601nlcika2018?optimize=true",
|
||||
center: [53.19, 41.28],
|
||||
zoom: 3,
|
||||
projection: projection,
|
||||
});
|
||||
|
||||
map.addControl(
|
||||
new StylesControl({
|
||||
styles: [
|
||||
{
|
||||
label: "Streets",
|
||||
styleName: "Mapbox Streets",
|
||||
styleUrl:
|
||||
"mapbox://styles/artegoser/clfm612fg002601nlcika2018?optimize=true",
|
||||
},
|
||||
{
|
||||
label: "Satellite",
|
||||
styleName: "Satellite",
|
||||
styleUrl:
|
||||
"mapbox://styles/artegoser/cliskjlhw00ug01pgfs9lesog?optimize=true",
|
||||
},
|
||||
],
|
||||
}),
|
||||
"top-left"
|
||||
);
|
||||
|
||||
map.addControl(new ZoomControl(), "top-right");
|
||||
map.addControl(new CompassControl(), "top-right");
|
||||
map.addControl(
|
||||
new MapboxExportControl({
|
||||
PageSize: Size.A3,
|
||||
PageOrientation: PageOrientation.Portrait,
|
||||
Format: Format.PNG,
|
||||
DPI: DPI[96],
|
||||
Crosshair: true,
|
||||
PrintableArea: true,
|
||||
}),
|
||||
"top-right"
|
||||
);
|
||||
|
||||
if (debug) {
|
||||
map.addControl(new InspectControl(), "bottom-right");
|
||||
}
|
||||
|
||||
let converter = new showdown.Converter();
|
||||
|
||||
map.on("load", async () => {
|
||||
map.loadImage(
|
||||
"https://cimengine.github.io/map/icons/city.png",
|
||||
(error, image) => {
|
||||
if (error) throw error;
|
||||
map.addImage("city", image);
|
||||
}
|
||||
);
|
||||
|
||||
map.loadImage(
|
||||
"https://cimengine.github.io/map/icons/capital.png",
|
||||
(error, image) => {
|
||||
if (error) throw error;
|
||||
map.addImage("capital-city", image);
|
||||
map.addImage("capital", image);
|
||||
}
|
||||
);
|
||||
|
||||
map.loadImage(
|
||||
"https://cimengine.github.io/map/icons/landmark.png",
|
||||
(error, image) => {
|
||||
if (error) throw error;
|
||||
map.addImage("landmark-0", image);
|
||||
}
|
||||
);
|
||||
|
||||
let lasticocords;
|
||||
|
||||
loginfo("Getting country data");
|
||||
let coarray = await fetch(countryInfoUrl);
|
||||
coarray = await coarray.json();
|
||||
let countries = {};
|
||||
for (let i = 0; i < coarray.length; i++)
|
||||
countries[coarray[i].idc] = coarray[i];
|
||||
|
||||
map.addSource("map-data", {
|
||||
type: "geojson",
|
||||
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",
|
||||
source: "map-data",
|
||||
paint: {
|
||||
"line-color": ["coalesce", ["get", "stroke"], "#0c7700"],
|
||||
"line-width": 2,
|
||||
"line-opacity": 0.8,
|
||||
},
|
||||
});
|
||||
|
||||
map.addLayer({
|
||||
id: "map-data-symbol",
|
||||
type: "symbol",
|
||||
source: "map-data",
|
||||
layout: {
|
||||
"icon-image": ["get", "type"],
|
||||
"icon-size": 0.15,
|
||||
},
|
||||
minzoom: 3,
|
||||
});
|
||||
|
||||
map.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);
|
||||
});
|
||||
|
||||
map.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">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>`
|
||||
: ""
|
||||
}
|
||||
<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(map);
|
||||
} 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">
|
||||
Founding date: ${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">About</a>`
|
||||
: ""
|
||||
}
|
||||
</div>
|
||||
</div>`
|
||||
)
|
||||
.addTo(map);
|
||||
}, 1);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
25
src/rollup.config.js
Normal file
25
src/rollup.config.js
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import resolve from "@rollup/plugin-node-resolve";
|
||||
import commonjs from "@rollup/plugin-commonjs";
|
||||
import copy from "rollup-plugin-copy";
|
||||
|
||||
export default [
|
||||
{
|
||||
input: "src/index.js",
|
||||
output: {
|
||||
file: "dist/index.bundle.js",
|
||||
format: "iife",
|
||||
sourcemap: true,
|
||||
},
|
||||
context: "window",
|
||||
plugins: [
|
||||
resolve(),
|
||||
commonjs({ sourceMap: false }),
|
||||
copy({
|
||||
targets: [
|
||||
{ src: "src/index.html", dest: "dist" },
|
||||
{ src: "src/index.css", dest: "dist" },
|
||||
],
|
||||
}),
|
||||
],
|
||||
},
|
||||
];
|
||||
Loading…
Add table
Reference in a new issue