feat: rollup, controls, debug mode

This commit is contained in:
Artemy 2023-06-12 12:40:01 +03:00
parent af689c92fe
commit dd0d8fd077
6 changed files with 1221 additions and 51 deletions

1102
package-lock.json generated Normal file

File diff suppressed because it is too large Load diff

22
package.json Normal file
View file

@ -0,0 +1,22 @@
{
"name": "map",
"version": "1.0.0",
"description": "Site that displays CIMEngine maps",
"main": "index.js",
"scripts": {
"build": "rollup --config src/rollup.config.js"
},
"type": "module",
"keywords": [],
"author": "",
"license": "MIT",
"devDependencies": {
"@rollup/plugin-commonjs": "^25.0.1",
"@rollup/plugin-node-resolve": "^15.1.0",
"rollup": "^3.25.1",
"rollup-plugin-copy": "^3.4.0"
},
"dependencies": {
"mapbox-gl-controls": "^2.3.5"
}
}

View file

@ -14,14 +14,16 @@
<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://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 {
@ -55,9 +57,11 @@
<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>
<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>

View file

@ -1,3 +1,10 @@
import {
StylesControl,
ZoomControl,
CompassControl,
InspectControl,
} from "mapbox-gl-controls";
function loginfo(...str) {
let info = str.shift();
console.log(
@ -6,35 +13,6 @@ function loginfo(...str) {
...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("click on:", e.latlng.toString());
}
window.onload = async () => {
const params = new Proxy(new URLSearchParams(window.location.search), {
get: (searchParams, prop) => searchParams.get(prop),
@ -53,10 +31,11 @@ window.onload = async () => {
const geoURL = params.geoURL || mapDataFromId.geoURL;
const countryInfoUrl = params.countryInfoURL || mapDataFromId.countryInfoURL;
const debug = params.debug || false;
mapboxgl.accessToken =
"pk.eyJ1IjoiYXJ0ZWdvc2VyIiwiYSI6ImNrcDViN3BhcDAwbW0ydnBnOXZ0ZzFreXUifQ.FIVtaBNr9dr_TIw672Zqdw";
let movc = new mapboxgl.Map({
let map = new mapboxgl.Map({
container: "map",
style: "mapbox://styles/artegoser/clfm612fg002601nlcika2018?optimize=true",
center: [53.19, 41.28],
@ -64,31 +43,69 @@ window.onload = async () => {
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();
movc.on("load", async () => {
movc.loadImage(
map.on("load", async () => {
map.loadImage(
"https://cimengine.github.io/map/icons/city.png",
(error, image) => {
if (error) throw error;
movc.addImage("city", image);
map.addImage("city", image);
}
);
movc.loadImage(
map.loadImage(
"https://cimengine.github.io/map/icons/capital.png",
(error, image) => {
if (error) throw error;
movc.addImage("capital-city", image);
movc.addImage("capital", image);
map.addImage("capital-city", image);
map.addImage("capital", image);
}
);
movc.loadImage(
map.loadImage(
"https://cimengine.github.io/map/icons/landmark.png",
(error, image) => {
if (error) throw error;
movc.addImage("landmark-0", image);
map.addImage("landmark-0", image);
}
);
@ -101,12 +118,12 @@ window.onload = async () => {
for (let i = 0; i < coarray.length; i++)
countries[coarray[i].idc] = coarray[i];
movc.addSource("map-data", {
map.addSource("map-data", {
type: "geojson",
data: geoURL,
});
movc.addLayer({
map.addLayer({
id: "map-data-fill",
type: "fill",
source: "map-data",
@ -116,7 +133,7 @@ window.onload = async () => {
},
});
movc.addLayer({
map.addLayer({
id: "map-data-fill-outline",
type: "line",
source: "map-data",
@ -127,7 +144,7 @@ window.onload = async () => {
},
});
movc.addLayer({
map.addLayer({
id: "map-data-symbol",
type: "symbol",
source: "map-data",
@ -138,7 +155,7 @@ window.onload = async () => {
minzoom: 3,
});
movc.on("click", "map-data-fill", (e) => {
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;
@ -147,7 +164,7 @@ window.onload = async () => {
onEachFeature(e.features[0], coordinates);
});
movc.on("click", "map-data-symbol", (e) => {
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;
@ -193,7 +210,7 @@ window.onload = async () => {
</div>
`
)
.addTo(movc);
.addTo(map);
} else if (
feature.geometry.type === "Polygon" ||
feature.geometry.type === "MultiPolygon"
@ -245,7 +262,7 @@ window.onload = async () => {
</div>
</div>`
)
.addTo(movc);
.addTo(map);
}, 1);
}
}

25
src/rollup.config.js Normal file
View 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" },
],
}),
],
},
];